fix(a11y): improve support for ids with special characters when getting label element (#22680)

resolves #22678

Author: liamdebeasi

core/src/utils/helpers.ts

@@ -133,7 +133,7 @@ export const getAriaLabel = (componentEl: HTMLElement, inputId: string): { label
     : inputId + '-lbl';
 
   let label = labelledBy !== null && labelledBy.trim() !== ''
-    ? document.querySelector(`#${labelledBy}`)
+    ? document.getElementById(labelledBy)
     : findItemLabel(componentEl);
 
   if (label) {
@@ -147,10 +147,15 @@ export const getAriaLabel = (componentEl: HTMLElement, inputId: string): { label
   // if there is no label, check to see if the user has provided
   // one by setting an id on the component and using the label element
   } else if (componentId.trim() !== '') {
-    label = document.querySelector(`label[for=${componentId}]`);
+    label = document.querySelector(`label[for="${componentId}"]`);
 
     if (label) {
-      label.id = labelId = `${componentId}-lbl`;
+      if (label.id !== '') {
+        labelId = label.id;
+      } else {
+        label.id = labelId = `${componentId}-lbl`;
+      }
+
       labelText = label.textContent;
     }
   }

core/src/utils/test/aria.spec.ts

@@ -0,0 +1,96 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { getAriaLabel } from '../helpers';
+import { Item } from '../../components/item/item.tsx';
+import { Label } from '../../components/label/label.tsx';
+import { Toggle } from '../../components/toggle/toggle.tsx';
+
+describe('getAriaLabel()', () => {
+  it('should correctly link component to label', async () => {
+    const page = await newSpecPage({
+      components: [Item, Label, Toggle],
+      html: `
+        <ion-item>
+          <ion-label>My Label</ion-label>
+          <ion-toggle></ion-toggle>
+        </ion-item>
+      `
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    const { label, labelId, labelText } = getAriaLabel(toggle, 'ion-tg-0');
+
+    expect(labelText).toEqual('My Label');
+    expect(labelId).toEqual('ion-tg-0-lbl');
+    expect(label).toEqual(page.body.querySelector('ion-label'));
+  });
+
+  it('should correctly link component when using custom label', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <div id="my-label">Hello World</div>
+        <ion-toggle aria-labelledby="my-label"></ion-toggle>
+      `
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    const { label, labelId, labelText } = getAriaLabel(toggle, 'ion-tg-0');
+
+    expect(labelText).toEqual('Hello World');
+    expect(labelId).toEqual('my-label');
+    expect(label).toEqual(page.body.querySelector('#my-label'));
+  });
+
+  it('should correctly link component when special characters are used', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <div id="id.1">Hello World</div>
+        <ion-toggle aria-labelledby="id.1"></ion-toggle>
+      `
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    const { label, labelId, labelText } = getAriaLabel(toggle, 'ion-tg-0');
+
+    expect(labelText).toEqual('Hello World');
+    expect(labelId).toEqual('id.1');
+  });
+
+  it('should only set the label id if one was not set already', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <label id="my-id" for="id.1">Hello World</label>
+        <ion-toggle id="id.1"></ion-toggle>
+      `
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    const { label, labelId, labelText } = getAriaLabel(toggle, 'ion-tg-0');
+
+    expect(labelText).toEqual('Hello World');
+    expect(labelId).toEqual('my-id');
+  });
+
+  it('should set label id', async () => {
+    const page = await newSpecPage({
+      components: [Toggle],
+      html: `
+        <label for="id.1">Hello World</label>
+        <ion-toggle id="id.1"></ion-toggle>
+      `
+    });
+
+    const toggle = page.body.querySelector('ion-toggle');
+
+    const { label, labelId, labelText } = getAriaLabel(toggle, 'ion-tg-0');
+
+    expect(labelText).toEqual('Hello World');
+    expect(labelId).toEqual('id.1-lbl');
+  });
+});