From 52ed2bf63777c764f57bb4c3a5d4a127bff46c50 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 30 Nov 2023 10:36:21 -0500
Subject: [PATCH] feat(range): expose label wrapper as shadow part (#28601)

---
 core/api.txt                                 |  1 +
 core/setupJest.js                            | 21 ++++++++++++++++++++
 core/src/components/range/range.scss         |  7 -------
 core/src/components/range/range.tsx          |  2 ++
 core/src/components/range/test/range.spec.ts | 18 +++++++++++++++++
 core/src/jest.d.ts                           |  5 +++++
 core/stencil.config.ts                       |  1 +
 7 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 core/setupJest.js
 create mode 100644 core/src/jest.d.ts

diff --git a/core/api.txt b/core/api.txt
index 67e3adea16..6018835a03 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1077,6 +1077,7 @@ ion-range,css-prop,--pin-color
 ion-range,part,bar
 ion-range,part,bar-active
 ion-range,part,knob
+ion-range,part,label
 ion-range,part,pin
 ion-range,part,tick
 ion-range,part,tick-active
diff --git a/core/setupJest.js b/core/setupJest.js
new file mode 100644
index 0000000000..f2eb0e70a3
--- /dev/null
+++ b/core/setupJest.js
@@ -0,0 +1,21 @@
+expect.extend({
+  toHaveShadowPart(received, part) {
+    if (typeof part !== 'string') {
+      throw new Error('expected toHaveShadowPart to be called with a string of the CSS shadow part name');
+    }
+
+    if (received.shadowRoot === null) {
+      throw new Error('expected toHaveShadowPart to be called on an element with a shadow root');
+    }
+
+    const shadowPart = received.shadowRoot.querySelector(`[part="${part}"]`);
+    const pass = shadowPart !== null;
+
+    const message = `expected ${received.tagName.toLowerCase()} to have shadow part "${part}"`;
+
+    return {
+      pass,
+      message: () => message,
+    };
+  },
+});
diff --git a/core/src/components/range/range.scss b/core/src/components/range/range.scss
index 20b2f30a7b..404fa5d77b 100644
--- a/core/src/components/range/range.scss
+++ b/core/src/components/range/range.scss
@@ -216,13 +216,6 @@
    */
   max-width: 200px;
 
-  /**
-   * This ensures that double tapping this text
-   * clicks the <label> and focuses the range
-   * when a screen reader is enabled.
-   */
-  pointer-events: none;
-
   text-overflow: ellipsis;
 
   white-space: nowrap;
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index d105b69506..5b017cf464 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -37,6 +37,7 @@ import type {
  * @part knob - The handle that is used to drag the range.
  * @part bar - The inactive part of the bar.
  * @part bar-active - The active part of the bar.
+ * @part label - The label text describing the range.
  */
 @Component({
   tag: 'ion-range',
@@ -675,6 +676,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop
               'label-text-wrapper': true,
               'label-text-wrapper-hidden': !hasLabel,
             }}
+            part="label"
           >
             {label !== undefined ? <div class="label-text">{label}</div> : <slot name="label"></slot>}
           </div>
diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts
index 65a09695b9..0307b45438 100644
--- a/core/src/components/range/test/range.spec.ts
+++ b/core/src/components/range/test/range.spec.ts
@@ -229,4 +229,22 @@ describe('range: item adjustments', () => {
     expect(range.classList.contains('range-item-start-adjustment')).toBe(false);
     expect(range.classList.contains('range-item-end-adjustment')).toBe(false);
   });
+
+  describe('shadow parts', () => {
+    it('should have shadow parts', async () => {
+      const page = await newSpecPage({
+        components: [Range],
+        html: `<ion-range pin="true" snaps="true" value="50" label="Label"></ion-range>`,
+      });
+      const range = page.body.querySelector('ion-range')!;
+
+      expect(range).toHaveShadowPart('label');
+      expect(range).toHaveShadowPart('pin');
+      expect(range).toHaveShadowPart('knob');
+      expect(range).toHaveShadowPart('bar');
+      expect(range).toHaveShadowPart('bar-active');
+      expect(range).toHaveShadowPart('tick');
+      expect(range).toHaveShadowPart('tick-active');
+    });
+  });
 });
diff --git a/core/src/jest.d.ts b/core/src/jest.d.ts
new file mode 100644
index 0000000000..041561e5d8
--- /dev/null
+++ b/core/src/jest.d.ts
@@ -0,0 +1,5 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toHaveShadowPart(part: string): R;
+  }
+}
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index f47eb4d98b..9340c12d86 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -252,6 +252,7 @@ export const config: Config = {
       "@utils/test": ["<rootDir>/src/utils/test/utils"],
       "@utils/logging": ["<rootDir>/src/utils/logging"],
     },
+    setupFilesAfterEnv: ['./setupJest.js']
   },
   preamble: '(C) Ionic http://ionicframework.com - MIT License',
   globalScript: 'src/global/ionic-global.ts',