From 61aa58458be46e937eba129eeb182242052d6e00 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Mon, 14 Dec 2020 15:17:45 -0500
Subject: [PATCH 1/3] fix

---
 core/src/utils/helpers.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index da8b9389758..f18e7f47a12 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(CSS.escape(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="${CSS.escape(componentId)}"]`);
 
     if (label) {
-      label.id = labelId = `${componentId}-lbl`;
+      if (label.id !== '') {
+        labelId = label.id;
+      } else {
+        label.id = labelId = `${componentId}-lbl`;
+      }
+
       labelText = label.textContent;
     }
   }

From ea2c640a8222e4cbd3a5c1e5cc0ee59ef63e1735 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Mon, 14 Dec 2020 21:31:35 +0000
Subject: [PATCH 2/3] remove escape

---
 core/src/utils/helpers.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index f18e7f47a12..d0f3add90f8 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.getElementById(CSS.escape(labelledBy))
+    ? document.getElementById(labelledBy)
     : findItemLabel(componentEl);
 
   if (label) {
@@ -147,7 +147,7 @@ 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="${CSS.escape(componentId)}"]`);
+    label = document.querySelector(`label[for="${componentId}"]`);
 
     if (label) {
       if (label.id !== '') {

From 082160d95f9682bdf248c1042abe27dbceedd094 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 9 Feb 2021 10:22:27 -0500
Subject: [PATCH 3/3] add tests

---
 core/src/utils/test/aria.spec.ts | 96 ++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 core/src/utils/test/aria.spec.ts

diff --git a/core/src/utils/test/aria.spec.ts b/core/src/utils/test/aria.spec.ts
new file mode 100644
index 00000000000..4990cc26089
--- /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');
+  });
+});