From 2450a1e821d3901c8efb57ec256a10a951d22c8f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 10 Jan 2023 08:59:52 -0500 Subject: [PATCH] fix(loading): support custom aria-label (#26581) resolves #24486 --- core/src/components/loading/loading.tsx | 18 +++++-- .../components/loading/test/a11y/index.html | 50 +++++++++++++++++++ .../loading/test/a11y/loading.e2e.ts | 34 +++++++++++++ 3 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 core/src/components/loading/test/a11y/index.html create mode 100644 core/src/components/loading/test/a11y/loading.e2e.ts diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx index 21ce53a377..9c34b1b824 100644 --- a/core/src/components/loading/loading.tsx +++ b/core/src/components/loading/loading.tsx @@ -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 ( -