javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Amanda Johnston
2023-01-19 14:50:05 -06:00
committed by GitHub
parent 77ccac0590
commit 22e9ff866f
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/action-sheet/action-sheet.tsx
View File

@ -287,7 +287,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
{buttons.map((b) => ( {buttons.map((b) => (
<button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}> <button type="button" id={b.id} class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
<span class="action-sheet-button-inner"> <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} {b.text}
</span> </span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>} {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"> <div class="action-sheet-group action-sheet-group-cancel">
<button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}> <button type="button" class={buttonClass(cancelButton)} onClick={() => this.buttonClick(cancelButton)}>
<span class="action-sheet-button-inner"> <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} {cancelButton.text}
</span> </span>
{mode === 'md' && <ion-ripple-effect></ion-ripple-effect>} {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}