Make upload button focusable (accessibility/tab navigation)

This commit is contained in:
ehuggett 2017-09-13 00:49:50 +01:00
parent cdd1bb3c29
commit 208c28ee01
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;