From 19d63f62431ef9d8279f1726dd63fac2f0d4b46b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 11 Feb 2021 11:34:03 -0500
Subject: [PATCH] fix(a11y): improve support for ids with special characters
 when getting label element (#22680)

resolves #22678
---
 core/src/utils/helpers.ts        | 11 +++-
 core/src/utils/test/aria.spec.ts | 96 ++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 core/src/utils/test/aria.spec.ts

diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index da8b938975..d0f3add90f 100644
--- a/core/src/utils/helpers.ts
+++ b/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;
     }
   }
diff --git a/core/src/utils/test/aria.spec.ts b/core/src/utils/test/aria.spec.ts
new file mode 100644
index 0000000000..4990cc2608
--- /dev/null
+++ b/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');
+  });
+});