From c4ba1b4fc51639490f30433e96983fc02c7ca7ab Mon Sep 17 00:00:00 2001
From: David Wheatley <hi@davwheat.dev>
Date: Sun, 15 Aug 2021 20:54:50 +0200
Subject: [PATCH] [A11Y] Explicitly state `aria-hidden` value; hide icons from
 screenreaders (#3027)

* Set explicit `aria-hidden` value
* Hide icons from screen-readers
---
 framework/core/js/src/admin/components/UserListPage.tsx      | 2 +-
 framework/core/js/src/common/components/LoadingIndicator.tsx | 2 +-
 framework/core/js/src/common/helpers/icon.tsx                | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/framework/core/js/src/admin/components/UserListPage.tsx b/framework/core/js/src/admin/components/UserListPage.tsx
index 6665ccbb0..cbc790cfb 100644
--- a/framework/core/js/src/admin/components/UserListPage.tsx
+++ b/framework/core/js/src/admin/components/UserListPage.tsx
@@ -286,7 +286,7 @@ export default class UserListPage extends AdminPage {
 
           return (
             <div class="UserList-email" key={user.id()} data-email-shown="false">
-              <span class="UserList-emailAddress" aria-hidden onclick={() => setEmailVisibility(true)}>
+              <span class="UserList-emailAddress" aria-hidden="true" onclick={() => setEmailVisibility(true)}>
                 {user.email()}
               </span>
               <button
diff --git a/framework/core/js/src/common/components/LoadingIndicator.tsx b/framework/core/js/src/common/components/LoadingIndicator.tsx
index 7b1cc8841..f99575747 100644
--- a/framework/core/js/src/common/components/LoadingIndicator.tsx
+++ b/framework/core/js/src/common/components/LoadingIndicator.tsx
@@ -73,7 +73,7 @@ export default class LoadingIndicator extends Component<LoadingIndicatorAttrs> {
         data-size={size}
         className={completeContainerClassName}
       >
-        <div aria-hidden className={completeClassName} {...attrs} />
+        <div aria-hidden="true" className={completeClassName} {...attrs} />
       </div>
     );
   }
diff --git a/framework/core/js/src/common/helpers/icon.tsx b/framework/core/js/src/common/helpers/icon.tsx
index cb01a1347..996142a9d 100644
--- a/framework/core/js/src/common/helpers/icon.tsx
+++ b/framework/core/js/src/common/helpers/icon.tsx
@@ -9,5 +9,5 @@ import * as Mithril from 'mithril';
 export default function icon(fontClass: string, attrs: Mithril.Attributes = {}): Mithril.Vnode {
   attrs.className = 'icon ' + fontClass + ' ' + (attrs.className || '');
 
-  return <i {...attrs} />;
+  return <i aria-hidden="true" {...attrs} />;
 }