remove aria-hidden from focusable elements as suggested by lighthouse

Author: rikschennink

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 4.31.2
+
+-   Remove `aria-hidden` from drop label as suggested by Lighthouse.
+-   Fix `tabIndex` attribute on credits link not set correctly, now no longer included in tab flow.
+
 ## 4.31.1
 
 -   Fix issue with dragging file items sometimes not working.

dist/filepond.css

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.1
+ * FilePond 4.31.2
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */

dist/filepond.esm.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.1
+ * FilePond 4.31.2
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -6957,9 +6957,6 @@ const create$b = ({ root, props }) => {
     // use for labeling file input (aria-labelledby on file input)
     attr(label, 'id', `filepond--drop-label-${props.id}`);
 
-    // hide the label for screenreaders, the input element will read the contents of the label when it's focussed. If we don't set aria-hidden the screenreader will also navigate the contents of the label separately from the input.
-    attr(label, 'aria-hidden', 'true');
-
     // handle keys
     root.ref.handleKeyDown = e => {
         const isActivationKey = e.keyCode === Key.ENTER || e.keyCode === Key.SPACE;
@@ -8064,9 +8061,8 @@ const create$e = ({ root, props }) => {
     if (hasCredits) {
         const frag = document.createElement('a');
         frag.className = 'filepond--credits';
-        frag.setAttribute('aria-hidden', 'true');
         frag.href = credits[0];
-        frag.tabindex = -1;
+        frag.tabIndex = -1;
         frag.target = '_blank';
         frag.rel = 'noopener noreferrer';
         frag.textContent = credits[1];

dist/filepond.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * FilePond 4.31.1
+ * FilePond 4.31.2
  * Licensed under MIT, https://opensource.org/licenses/MIT/
  * Please visit https://pqina.nl/filepond/ for details.
  */
@@ -9612,17 +9612,13 @@
     var create$b = function create(_ref) {
         var root = _ref.root,
             props = _ref.props;
-
         // create the label and link it to the file browser
         var label = createElement$1('label');
         attr(label, 'for', 'filepond--browser-' + props.id);
 
         // use for labeling file input (aria-labelledby on file input)
         attr(label, 'id', 'filepond--drop-label-' + props.id);
 
-        // hide the label for screenreaders, the input element will read the contents of the label when it's focussed. If we don't set aria-hidden the screenreader will also navigate the contents of the label separately from the input.
-        attr(label, 'aria-hidden', 'true');
-
         // handle keys
         root.ref.handleKeyDown = function(e) {
             var isActivationKey = e.keyCode === Key.ENTER || e.keyCode === Key.SPACE;
@@ -10864,9 +10860,8 @@
         if (hasCredits) {
             var frag = document.createElement('a');
             frag.className = 'filepond--credits';
-            frag.setAttribute('aria-hidden', 'true');
             frag.href = credits[0];
-            frag.tabindex = -1;
+            frag.tabIndex = -1;
             frag.target = '_blank';
             frag.rel = 'noopener noreferrer';
             frag.textContent = credits[1];

dist/filepond.js

@@ -1,6 +1,6 @@
 {
     "name": "filepond",
-    "version": "4.31.1",
+    "version": "4.31.2",
     "description": "FilePond, Where files go to stretch their bits.",
     "license": "MIT",
     "author": {

dist/filepond.min.css

@@ -4,17 +4,13 @@ import { createElement } from '../../utils/createElement';
 import { Key } from '../enum/Key';
 
 const create = ({ root, props }) => {
-
     // create the label and link it to the file browser
     const label = createElement('label');
     attr(label, 'for', `filepond--browser-${props.id}`);
 
     // use for labeling file input (aria-labelledby on file input)
     attr(label, 'id', `filepond--drop-label-${props.id}`);
 
-    // hide the label for screenreaders, the input element will read the contents of the label when it's focussed. If we don't set aria-hidden the screenreader will also navigate the contents of the label separately from the input.
-    attr(label, 'aria-hidden', 'true');
-
     // handle keys
     root.ref.handleKeyDown = e => {
         const isActivationKey = e.keyCode === Key.ENTER || e.keyCode === Key.SPACE;
@@ -27,7 +23,6 @@ const create = ({ root, props }) => {
     };
 
     root.ref.handleClick = e => {
-
         const isLabelClick = e.target === label || label.contains(e.target);
 
         // don't want to click twice
@@ -69,14 +64,14 @@ export const dropLabel = createView({
     write: createRoute({
         DID_SET_LABEL_IDLE: ({ root, action }) => {
             updateLabelValue(root.ref.label, action.value);
-        }
+        },
     }),
     mixins: {
         styles: ['opacity', 'translateX', 'translateY'],
         animations: {
             opacity: { type: 'tween', duration: 150 },
             translateX: 'spring',
-            translateY: 'spring'
-        }
-    }
+            translateY: 'spring',
+        },
+    },
 });

dist/filepond.min.js

@@ -104,9 +104,8 @@ const create = ({ root, props }) => {
     if (hasCredits) {
         const frag = document.createElement('a');
         frag.className = 'filepond--credits';
-        frag.setAttribute('aria-hidden', 'true');
         frag.href = credits[0];
-        frag.tabindex = -1;
+        frag.tabIndex = -1;
         frag.target = '_blank';
         frag.rel = 'noopener noreferrer';
         frag.textContent = credits[1];