Chapril/drop.chapril.org-firefoxsend
Chapril/drop.chapril.org-firefoxsend
25
1
Fork 0
Code Issues Releases Activity

Merge pull request #574 from ehuggett/tab-upload

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/templates/welcome.js
View File

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

12
assets/main.css
View File

@ -279,7 +279,17 @@ a {
} }
input[type='file'] { 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 { #file-size-msg {