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

fix(alert): use aria-labelledby and aria-describedby instead of aria-label (#25805)

Browse Source 
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Amanda Johnston
2022-08-23 15:31:00 -05:00
committed by GitHub
parent 65af865db7
commit 27318d75df
3 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
core/src/components/alert/alert.tsx
View File

@ -578,20 +578,26 @@ export class Alert implements ComponentInterface, OverlayInterface {
}
render() {
const { overlayIndex, header, subHeader, htmlAttributes } = this;
const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
const mode = getIonMode(this);
const hdrId = `alert-${overlayIndex}-hdr`;
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const msgId = `alert-${overlayIndex}-msg`;
const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
const defaultAriaLabel = header || subHeader || 'Alert';
/**
* If the header is defined, use that. Otherwise, fall back to the subHeader.
* If neither is defined, don't set aria-labelledby.
*/
const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
return (
<Host
role={role}
aria-modal="true"
aria-labelledby={ariaLabelledBy}
aria-describedby={message ? msgId : null}
tabindex="-1"
aria-label={defaultAriaLabel}
{...(htmlAttributes as any)}
style={{
zIndex: `${20000 + overlayIndex}`,
@ -623,7 +629,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
)}
</div>
<div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>
<div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(message)}></div>
{this.renderAlertInputs()}
{this.renderAlertButtons()}