Mirrors/send
1
0
Fork 0
mirror of https://gitlab.com/timvisee/send.git synced 2024-11-10 05:02:45 +01:00
Code Issues Releases Activity

Make upload button focusable (accessibility/tab navigation)

Browse Source
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
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'
)}</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;

12
assets/main.css
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 {