fix(action-sheet): button icons are not announced by screen readers (#…

…26640)
ionic-team · Jan 19, 2023 · 22e9ff8 · 22e9ff8
1 parent 77ccac0
commit 22e9ff8
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
@@ -287,7 +287,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               {buttons.map((b) => (
                 <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
                   <span class="action-sheet-button-inner">
-                    {b.icon && <ion-icon icon={b.icon} lazy={false} class="action-sheet-icon" />}
+                    {b.icon && <ion-icon icon={b.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />}
                     {b.text}
                   </span>
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
@@ -299,7 +299,9 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
               <div class="action-sheet-group action-sheet-group-cancel">
                 <button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}>
                   <span class="action-sheet-button-inner">
-                    {cancelButton.icon && <ion-icon icon={cancelButton.icon} lazy={false} class="action-sheet-icon" />}
+                    {cancelButton.icon && (
+                      <ion-icon icon={cancelButton.icon} aria-hidden="true" lazy={false} class="action-sheet-icon" />
+                    )}
                     {cancelButton.text}
                   </span>
                   {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}