Merge pull request #574 from ehuggett/tab-upload

Make upload button focusable (accessibility/tab navigation)
This commit is contained in:
Erica 2017-10-02 20:15:37 -04:00 committed by GitHub
commit d10ceacd67
2 changed files with 20 additions and 2 deletions

View File

@ -23,11 +23,11 @@ module.exports = function(state, emit) {
'uploadPageSizeMessage'
)}</em></span>
<form method="post" action="upload" enctype="multipart/form-data">
<input id="file-upload" type="file" name="fileUploaded" onchange=${upload} onfocus=${onfocus} onblur=${onblur} />
<label for="file-upload" id="browse" class="${state.config
.uploadButtonStyle}" title="${state.translate(
'uploadPageBrowseButton1'
)}">${state.translate('uploadPageBrowseButton1')}</label>
<input id="file-upload" type="file" name="fileUploaded" onchange=${upload} />
</form>
</div>
${fileList(state, emit)}
@ -44,6 +44,14 @@ module.exports = function(state, emit) {
div.classList.remove('ondrag');
}
function onfocus(event) {
event.target.classList.add('has-focus');
}
function onblur(event) {
event.target.classList.remove('has-focus');
}
async function upload(event) {
event.preventDefault();
const target = event.target;

View File

@ -279,7 +279,17 @@ a {
}
input[type='file'] {
display: none;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
input[type='file'].has-focus + #browse,
input[type='file']:focus + #browse {
background-color: #0287e8;
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
#file-size-msg {