Better a11y for upload buttons

Fixes #2969

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 06943fa68f03b57f6341fd9d0966c7604fc542a7..f620d4e22389af1f0415b0e93c8e9a1356b8b04f 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -5976,8 +5976,10 @@ if (COMPILER_TARGET_DEFAULT) {
                                this._fileUpload.change($.proxy(this._upload, this));
                                var $button = $('<p class="button uploadButton"><span>' + WCF.Language.get('wcf.global.button.upload') + '</span></p>');
                                elAttr($button[0], 'role', 'button');
-                               elAttr($button[0], 'tabindex', '0');
                                $button.prepend(this._fileUpload);
+                               
+                               this._fileUpload[0].addEventListener('focus', function() { $button[0].classList.add('active'); });
+                               this._fileUpload[0].addEventListener('blur', function() { $button[0].classList.remove('active'); });
                        }
                        else {
                                var $button = $('<p class="button uploadFallbackButton"><span>' + WCF.Language.get('wcf.global.button.upload') + '</span></p>');

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
index bba83d72762b82fe784f9f940902ab817ca8b0b4..d4649133fc1e520a7d76f3f5bda888ff0d8491dd 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Upload.js
@@ -93,7 +93,9 @@ define(['AjaxRequest', 'Core', 'Dom/ChangeListener', 'Language', 'Dom/Util', 'Do
                        this._button = elCreate('p');
                        this._button.className = 'button uploadButton';
                        elAttr(this._button, 'role', 'button');
-                       elAttr(this._button, 'tabindex', '0');
+
+                       this._fileUpload.addEventListener('focus', (function() { this._button.classList.add('active'); }).bind(this));
+                       this._fileUpload.addEventListener('blur', (function() { this._button.classList.remove('active'); }).bind(this));
                        
                        var span = elCreate('span');
                        span.textContent = Language.get('wcf.global.button.upload');