feat(range): expose label wrapper as shadow part (#28601)

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;

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>

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');
+    });
+  });
 });