fix(angular, react, vue): add aria-hidden to all ion-icons (ionic-tea…

…m#1757)
mattschlosser · Feb 22, 2023 · a2cf27f · a2cf27f
1 parent f0c7e83
commit a2cf27f
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 20 deletions.
diff --git a/angular/official/list/src/app/message/message.component.html b/angular/official/list/src/app/message/message.component.html
@@ -5,7 +5,7 @@ <h2>
       {{ message.fromName }}
       <span class="date">
         <ion-note>{{ message.date }}</ion-note>
-        <ion-icon name="chevron-forward" size="small" *ngIf="isIos()"></ion-icon>
+        <ion-icon aria-hidden="true" name="chevron-forward" size="small" *ngIf="isIos()"></ion-icon>
       </span>
     </h2>
     <h3>{{ message.subject }}</h3>

diff --git a/angular/official/list/src/app/view-message/view-message.page.html b/angular/official/list/src/app/view-message/view-message.page.html
@@ -8,7 +8,7 @@
 
 <ion-content [fullscreen]="true" *ngIf="message">
   <ion-item>
-    <ion-icon name="person-circle" color="primary"></ion-icon>
+    <ion-icon aria-hidden="true" name="person-circle" color="primary"></ion-icon>
     <ion-label class="ion-text-wrap">
       <h2>
         {{ message.fromName }}

diff --git a/angular/official/sidemenu/src/app/app.component.html b/angular/official/sidemenu/src/app/app.component.html
@@ -8,7 +8,7 @@
 
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
             <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
-              <ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
+              <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
               <ion-label>{{ p.title }}</ion-label>
             </ion-item>
           </ion-menu-toggle>
@@ -18,7 +18,7 @@
           <ion-list-header>Labels</ion-list-header>
 
           <ion-item *ngFor="let label of labels" lines="none">
-            <ion-icon slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
+            <ion-icon aria-hidden="true" slot="start" ios="bookmark-outline" md="bookmark-sharp"></ion-icon>
             <ion-label>{{ label }}</ion-label>
           </ion-item>
         </ion-list>

diff --git a/angular/official/tabs/src/app/tabs/tabs.page.html b/angular/official/tabs/src/app/tabs/tabs.page.html
@@ -2,17 +2,17 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1">
-      <ion-icon name="triangle"></ion-icon>
+      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
       <ion-label>Tab 1</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2">
-      <ion-icon name="ellipse"></ion-icon>
+      <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
       <ion-label>Tab 2</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3">
-      <ion-icon name="square"></ion-icon>
+      <ion-icon aria-hidden="true" name="square"></ion-icon>
       <ion-label>Tab 3</ion-label>
     </ion-tab-button>
   </ion-tab-bar>

diff --git a/react/official/list/src/pages/ViewMessage.tsx b/react/official/list/src/pages/ViewMessage.tsx
@@ -40,7 +40,7 @@ function ViewMessage() {
         {message ? (
           <>
             <IonItem>
-              <IonIcon icon={personCircle} color="primary"></IonIcon>
+              <IonIcon aria-hidden="true" icon={personCircle} color="primary"></IonIcon>
               <IonLabel className="ion-text-wrap">
                 <h2>
                   {message.fromName}

diff --git a/react/official/sidemenu/src/components/Menu.tsx b/react/official/sidemenu/src/components/Menu.tsx
@@ -75,7 +75,7 @@ const Menu: React.FC = () => {
             return (
               <IonMenuToggle key={index} autoHide={false}>
                 <IonItem className={location.pathname === appPage.url ? 'selected' : ''} routerLink={appPage.url} routerDirection="none" lines="none" detail={false}>
-                  <IonIcon slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
+                  <IonIcon aria-hidden="true" slot="start" ios={appPage.iosIcon} md={appPage.mdIcon} />
                   <IonLabel>{appPage.title}</IonLabel>
                 </IonItem>
               </IonMenuToggle>
@@ -87,7 +87,7 @@ const Menu: React.FC = () => {
           <IonListHeader>Labels</IonListHeader>
           {labels.map((label, index) => (
             <IonItem lines="none" key={index}>
-              <IonIcon slot="start" icon={bookmarkOutline} />
+              <IonIcon aria-hidden="true" slot="start" icon={bookmarkOutline} />
               <IonLabel>{label}</IonLabel>
             </IonItem>
           ))}

diff --git a/react/official/tabs/src/App.tsx b/react/official/tabs/src/App.tsx
@@ -56,15 +56,15 @@ const App: React.FC = () => (
         </IonRouterOutlet>
         <IonTabBar slot="bottom">
           <IonTabButton tab="tab1" href="/tab1">
-            <IonIcon icon={triangle} />
+            <IonIcon aria-hidden="true" icon={triangle} />
             <IonLabel>Tab 1</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab2" href="/tab2">
-            <IonIcon icon={ellipse} />
+            <IonIcon aria-hidden="true" icon={ellipse} />
             <IonLabel>Tab 2</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab3" href="/tab3">
-            <IonIcon icon={square} />
+            <IonIcon aria-hidden="true" icon={square} />
             <IonLabel>Tab 3</IonLabel>
           </IonTabButton>
         </IonTabBar>

diff --git a/vue/official/list/src/components/MessageListItem.vue b/vue/official/list/src/components/MessageListItem.vue
@@ -6,7 +6,7 @@
         {{ message.fromName }}
         <span class="date">
           <ion-note>{{ message.date }}</ion-note>
-          <ion-icon :icon="chevronForward" size="small" v-if="isIos()"></ion-icon>
+          <ion-icon aria-hidden="true" :icon="chevronForward" size="small" v-if="isIos()"></ion-icon>
         </span>
       </h2>
       <h3>{{ message.subject }}</h3>

diff --git a/vue/official/list/src/views/ViewMessagePage.vue b/vue/official/list/src/views/ViewMessagePage.vue
@@ -10,7 +10,7 @@
 
     <ion-content :fullscreen="true" v-if="message">
       <ion-item>
-        <ion-icon :icon="personCircle" color="primary"></ion-icon>
+        <ion-icon aria-hidden="true" :icon="personCircle" color="primary"></ion-icon>
         <ion-label class="ion-text-wrap">
           <h2>
             {{ message.fromName }}

diff --git a/vue/official/sidemenu/src/App.vue b/vue/official/sidemenu/src/App.vue
@@ -9,7 +9,7 @@
 
             <ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
               <ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
-                <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
+                <ion-icon aria-hidden="true" slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
                 <ion-label>{{ p.title }}</ion-label>
               </ion-item>
             </ion-menu-toggle>
@@ -19,7 +19,7 @@
             <ion-list-header>Labels</ion-list-header>
 
             <ion-item v-for="(label, index) in labels" lines="none" :key="index">
-              <ion-icon slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
+              <ion-icon aria-hidden="true" slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
               <ion-label>{{ label }}</ion-label>
             </ion-item>
           </ion-list>

diff --git a/vue/official/tabs/src/views/TabsPage.vue b/vue/official/tabs/src/views/TabsPage.vue
@@ -4,17 +4,17 @@
       <ion-router-outlet></ion-router-outlet>
       <ion-tab-bar slot="bottom">
         <ion-tab-button tab="tab1" href="/tabs/tab1">
-          <ion-icon :icon="triangle" />
+          <ion-icon aria-hidden="true" :icon="triangle" />
           <ion-label>Tab 1</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab2" href="/tabs/tab2">
-          <ion-icon :icon="ellipse" />
+          <ion-icon aria-hidden="true" :icon="ellipse" />
           <ion-label>Tab 2</ion-label>
         </ion-tab-button>
 
         <ion-tab-button tab="tab3" href="/tabs/tab3">
-          <ion-icon :icon="square" />
+          <ion-icon aria-hidden="true" :icon="square" />
           <ion-label>Tab 3</ion-label>
         </ion-tab-button>
       </ion-tab-bar>