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

fix(loading): support custom aria-label (#26581)

Browse Source 
resolves #24486
This commit is contained in:
Liam DeBeasi
2023-01-10 08:59:52 -05:00
committed by GitHub
parent 77ce9e066e
commit 2450a1e821
3 changed files with 99 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/loading/loading.tsx
View File

@ -186,10 +186,20 @@ export class Loading implements ComponentInterface, OverlayInterface {
};
render() {
const { message, spinner, htmlAttributes } = this;
const { message, spinner, htmlAttributes, overlayIndex } = this;
const mode = getIonMode(this);
const msgId = `loading-${overlayIndex}-msg`;
/**
* If the message is defined, use that as the label.
* Otherwise, don't set aria-labelledby.
*/
const ariaLabelledBy = message !== undefined ? msgId : null;
return (
<Host
role="dialog"
aria-modal="true"
aria-labelledby={ariaLabelledBy}
tabindex="-1"
{...(htmlAttributes as any)}
style={{
@ -207,14 +217,16 @@ export class Loading implements ComponentInterface, OverlayInterface {
<div tabindex="0"></div>
<div class="loading-wrapper ion-overlay-wrapper" role="dialog">
<div class="loading-wrapper ion-overlay-wrapper">
{spinner && (
<div class="loading-spinner">
<ion-spinner name={spinner} aria-hidden="true" />
</div>
)}
{message !== undefined && <div class="loading-content" innerHTML={sanitizeDOMString(message)}></div>}
{message !== undefined && (
<div class="loading-content" id={msgId} innerHTML={sanitizeDOMString(message)}></div>
)}
</div>
<div tabindex="0"></div>