voyager-ionic-core 8.0.0-beta.2 → 8.0.0-beta.3

package/dist/collection/components/range/range.js

@@ -3,7 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../utils/content/index";
-import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from "../../utils/helpers";
+import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -421,16 +421,7 @@ export class Range {
     }
     renderRangeSlider() {
         var _a;
-        const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter, } = this;
-        /**
-         * Look for external label, ion-label, or aria-labelledby.
-         * If none, see if user placed an aria-label on the host
-         * and use that instead.
-         */
-        let { labelText } = getAriaLabel(el, rangeId);
-        if (labelText === undefined || labelText === null) {
-            labelText = inheritedAttributes['aria-label'];
-        }
+        const { min, max, step, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, pinFormatter, inheritedAttributes, } = this;
         let barStart = `${ratioLower * 100}%`;
         let barEnd = `${100 - ratioUpper * 100}%`;
         const rtl = isRTL(this.el);
@@ -490,10 +481,6 @@ export class Range {
                 ticks.push(tick);
             }
         }
-        let labelledBy;
-        if (this.hasLabel) {
-            labelledBy = 'range-label';
-        }
         return (h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl),
             /**
              * Since the gesture has a threshold, the value
@@ -541,8 +528,7 @@ export class Range {
             handleKeyboard,
             min,
             max,
-            labelText,
-            labelledBy,
+            inheritedAttributes,
         }), this.dualKnobs &&
             renderKnob(rtl, {
                 knob: 'B',
@@ -555,8 +541,7 @@ export class Range {
                 handleKeyboard,
                 min,
                 max,
-                labelText,
-                labelledBy,
+                inheritedAttributes,
             })));
     }
     render() {
@@ -576,7 +561,7 @@ export class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '576015afd256abb6faa88630dc482b75333c69e0', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+        return (h(Host, { key: '2ddcec5645566b2581a9c45891926722e903487e', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -585,10 +570,10 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '45619166eaf5015154ca24aeac8d088fed9606ec', class: "range-wrapper", id: "range-label" }, h("div", { key: 'e5ce095b0b1545dd9d39a04bc0d81fa643ec3739', class: {
+            }) }, h("label", { key: '87ca3578203144d6543f4b7cb4145e99a2a56445', class: "range-wrapper", id: "range-label" }, h("div", { key: '9acb1a0778f816d6054443f58fedca219b6fef41', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '9bff70bac89c8439b3a8933c2d4dbf0851a49165', class: "native-wrapper" }, h("slot", { key: '5c62813869cad97aa70a1c766c5df7a8fd279258', name: "start" }), this.renderRangeSlider(), h("slot", { key: '888d5665c12debcda85af5024842f5468b086c70', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '0c0ca9e634ff1ff257e077630ed46aab599c4087', class: "native-wrapper" }, h("slot", { key: '99f5f6c4e3323cbe0d09b7d18fcda2fcf29951e1', name: "start" }), this.renderRangeSlider(), h("slot", { key: 'f525b2c755c1287e23d9e1920617518fa2d08e05', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
@@ -1055,13 +1040,15 @@ export class Range {
             }];
     }
 }
-const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText, labelledBy, pinFormatter, }) => {
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }) => {
     const start = rtl ? 'right' : 'left';
     const knobStyle = () => {
         const style = {};
         style[start] = `${ratio * 100}%`;
         return style;
     };
+    // The aria label should be preferred over visible text if both are specified
+    const ariaLabel = inheritedAttributes['aria-label'];
     return (h("div", { onKeyDown: (ev) => {
             const key = ev.key;
             if (key === 'ArrowLeft' || key === 'ArrowDown') {
@@ -1083,7 +1070,7 @@ const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin,
             'range-knob-max': value === max,
             'ion-activatable': true,
             'ion-focusable': true,
-        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": labelledBy === undefined ? labelText : null, "aria-labelledby": labelledBy !== undefined ? labelledBy : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
+        }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": ariaLabel !== undefined ? ariaLabel : null, "aria-labelledby": ariaLabel === undefined ? 'range-label' : null, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
 };
 const ratioToValue = (ratio, min, max, step) => {
     let value = (max - min) * ratio;

package/dist/collection/components/range/test/a11y/range.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('range: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/range/test/label/range.spec.js

@@ -20,4 +20,28 @@ describe('range: label', () => {
         expect(propEl).not.toBeNull();
         expect(slotEl).toBeNull();
     });
+    it('should prefer aria label if both attribute and visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Range],
+            html: `
+        <ion-range aria-label="Aria Label Text" label="Label Prop Text"></ion-range>
+      `,
+        });
+        const range = page.body.querySelector('ion-range');
+        const nativeSlider = range.shadowRoot.querySelector('.range-knob-handle');
+        expect(nativeSlider.getAttribute('aria-label')).toBe('Aria Label Text');
+        expect(nativeSlider.getAttribute('aria-labelledby')).toBe(null);
+    });
+    it('should prefer visible label if only visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Range],
+            html: `
+        <ion-range label="Label Prop Text"></ion-range>
+      `,
+        });
+        const range = page.body.querySelector('ion-range');
+        const nativeSlider = range.shadowRoot.querySelector('.range-knob-handle');
+        expect(nativeSlider.getAttribute('aria-label')).toBe(null);
+        expect(nativeSlider.getAttribute('aria-labelledby')).toBe('range-label');
+    });
 });

package/dist/collection/components/refresher/refresher.js

@@ -594,7 +594,7 @@ export class Refresher {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'b5f7ccfe964f0f970c46ae813649c36625d82a1d', slot: "fixed", class: {
+        return (h(Host, { key: 'a0de60286257949f47ce80fccc7d35477a0cbfa1', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,

package/dist/collection/components/refresher/test/a11y/refresher.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
     test.describe(title('refresher: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/refresher-content/refresher-content.js

@@ -52,7 +52,7 @@ export class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode(this);
-        return (h(Host, { key: '14a4ef75a0f56d499ee0e0bb6ba23565626ad442', class: mode }, h("div", { key: 'b738ea69256548d66512744ecaa5cbf651c1f6dd', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '6cbcc1f90df56b53c51a99c5a63e185dba00e9b2', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (h(Host, { key: '09b538ace5a850e4cfd206e13a3c04ecb6c383e1', class: mode }, h("div", { key: '13c564d2970939f250ff8d2ec6bab2c6ad20ea88', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (h("div", { class: "arrow-container" }, h("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '21e7d4014f5779238ecf9fee4b9d492232835753', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     static get is() { return "ion-refresher-content"; }
     static get properties() {

package/dist/collection/components/reorder/reorder.js

@@ -20,7 +20,7 @@ export class Reorder {
     render() {
         const mode = getIonMode(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (h(Host, { key: '068457526894b0f557537d5b85f5596781988bbd', class: mode }, h("slot", { key: '006afcb58b0c8c0e4988e58d2c1441a7f4472de1' }, h("ion-icon", { key: '25e63dd8a8eeee62e6c5095bb39f887af2c82124', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (h(Host, { key: '0a7ac59a7c42bce0b76a13a5e03a0e2f13539cea', class: mode }, h("slot", { key: 'cd9c737ec8dfd0afe0bd558141f9f7b66bca66cf' }, h("ion-icon", { key: '3dc8fb3478bd2be7f99c1e15b51a41f18b421dbb', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     static get is() { return "ion-reorder"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/reorder-group/reorder-group.js

@@ -238,7 +238,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '868762829627e101926293f5e7e9f4bcf54490b1', class: {
+        return (h(Host, { key: '1fe29e61375e3c7fa810b49cf55fb17fd6d9ec82', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -59,7 +59,7 @@ export class RippleEffect {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '97bc96ca8dc4bf162302d0cf6980f45534495a3d', role: "presentation", class: {
+        return (h(Host, { key: '2bf24209bf2e1f0ba43e2c38357a54a2a17a4565', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));

package/dist/collection/components/router-link/router-link.js

@@ -23,10 +23,10 @@ export class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '9dac58d3edaa6b5278c3636e0e245c7ddc2cb888', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '95f4eb3b6292a5525db6d3ed6111d4fbce48fd8b', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, h("a", Object.assign({ key: '81d2ffd44f798703da2cd6f926576c6e96a7c41f' }, attrs), h("slot", { key: '26853d510e4cdb93b436cdf70ebb5a7dca288bfb' }))));
+            }) }, h("a", Object.assign({ key: '19178223d3927ed9cc6ef423050691f80e01e115' }, attrs), h("slot", { key: '0e046007427a5bc096c89c4d1a596d19cd8f89ab' }))));
     }
     static get is() { return "ion-router-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/router-link/test/a11y/router-link.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('router-link: a11y'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             /**

package/dist/collection/components/router-outlet/router-outlet.js

@@ -178,7 +178,7 @@ export class RouterOutlet {
         return true;
     }
     render() {
-        return h("slot", { key: '3425cdea6102946b2a7f4dcb3bb0133b2c7c561c' });
+        return h("slot", { key: '87dd3d8fb9a9a2cbf8564c56daf317cb94329186' });
     }
     static get is() { return "ion-router-outlet"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/row/row.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Row {
     render() {
-        return (h(Host, { key: '8b54835ea837e25c278ffa3e298238e92b095ccc', class: getIonMode(this) }, h("slot", { key: 'cb77d85c8d02fdee29a72b58f3091db8daeaf3b2' })));
+        return (h(Host, { key: 'd4895f57cf37c2669ed5f6dbe422854afb84284f', class: getIonMode(this) }, h("slot", { key: 'd9899b3c0402a8bc6388ed45132c41c9b3959c20' })));
     }
     static get is() { return "ion-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchbar/searchbar.js

@@ -378,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '66091918b5b97012b4105238b9aa1e0bc2133885', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'bfe5602ce36cd82dae870b632de767bde3de2f8a', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '8604e83a9e11f5c561c470ce4630bdc5a38f1098', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '5b5b1f76c164a3d06c24cc4e8caf831355063a3d', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '8dbe0a644441d7c02053183f214847766ac0ef2b', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '2741c301a182cc20cb0c828b75b3dca9c9e3a3f5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -389,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '4d94b664e0bb7c47f094a25f26fc92b210b96ae3', class: "searchbar-input-container" }, h("input", Object.assign({ key: '78a82dcd609fdb0327ff153a49b5904a0290663d', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '4da87bc57573758ed758332789bac63f253b1678', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '410d65bac177b3534c0ef7a6ecc1fe6381b46efd', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '380ad3d3ce925d0fe826318aad1f73892f7817a8', class: "searchbar-input-container" }, h("input", Object.assign({ key: '50f51e3c3d71cbbceeee2196c3ac033ef77e8a77', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '6eb4cfbbad36cf31d134fc3d8221111dc10a35ae', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'b0ac8e45b69c4337dfc86d24c7e953f9d4b428c2', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'feb89ebe3b4df01402762b9d65c56d26852ca1a6', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'f41efbb052f98c3c67e926d95e4b299794d3d012', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/segment/segment.js

@@ -420,14 +420,14 @@ export class Segment {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'a5268f36524465945e66f838c1fcb7b2ca4980b5', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '78c3072c35c9f62f62cd88e6a9d8eba52a09b030', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, h("slot", { key: 'b399f99ec57ab319cdb0635d2bb1efcd74b709bc' })));
+            }) }, h("slot", { key: '11985d112b9a0d3a973d8b94408c793269f88225' })));
     }
     static get is() { return "ion-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segment/test/a11y/segment.e2e.js

@@ -7,7 +7,7 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 /**
  * Only md mode uses ion-color() for the segment button
  */
-configs({ directions: ['ltr'], modes: ['md'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], modes: ['md'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('segment: a11y for ion-color()'), () => {
         test('should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/segment-button/segment-button.js

@@ -78,7 +78,7 @@ export class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (h(Host, { key: 'b2c9b735e7c578e50d7a41cb0c47cf661b83aa49', class: {
+        return (h(Host, { key: 'b81255f116704fa84b0a3a57b16c6ab65ae07476', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -94,10 +94,10 @@ export class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, h("button", Object.assign({ key: '1b6e56709f281be94c754a52dd80d9968d1e6bb1', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: '3a0508e0d859dffd78dc54dc574cf3ed5c03f110', class: "button-inner" }, h("slot", { key: '05f0eb4f773d2cbd929035087af4550a0f4ab038' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '75370e50f989a5db5d6b8ffa80894acba1797d85', part: "indicator", class: {
+            } }, h("button", Object.assign({ key: '3d1a946472d5be4ec2d3ae897e795fdc8de18317', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), h("span", { key: 'e4ea2923bde903c79deb7f4f9608a37f05f62941', class: "button-inner" }, h("slot", { key: '2df19fbc41e1fb03ca2416ff2050c8225b0a5ce5' })), mode === 'md' && h("ion-ripple-effect", null)), h("div", { key: '4cb31e2f3d78086d489f31ec072dad91bbfaae0e', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, h("div", { key: '8123d414c166d97c5e3dae707b89d4e94f2c6f92', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, h("div", { key: '6444409904e159e32c3901c1a0857a5558a6af55', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     static get is() { return "ion-segment-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.ios.css

@@ -563,12 +563,12 @@ button {
   flex-shrink: 0;
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }

package/dist/collection/components/select/select.js

@@ -3,7 +3,7 @@
  */
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
-import { focusVisibleElement, getAriaLabel, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
+import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -551,11 +551,11 @@ export class Select {
         return h("ion-icon", { class: "select-icon", part: "icon", "aria-hidden": "true", icon: icon });
     }
     get ariaLabel() {
-        var _a, _b;
-        const { placeholder, el, inputId, inheritedAttributes } = this;
+        var _a;
+        const { placeholder, inheritedAttributes } = this;
         const displayValue = this.getText();
-        const { labelText } = getAriaLabel(el, inputId);
-        const definedLabel = (_b = (_a = this.labelText) !== null && _a !== void 0 ? _a : inheritedAttributes['aria-label']) !== null && _b !== void 0 ? _b : labelText;
+        // The aria label should be preferred over visible text if both are specified
+        const definedLabel = (_a = inheritedAttributes['aria-label']) !== null && _a !== void 0 ? _a : this.labelText;
         /**
          * If developer has specified a placeholder
          * and there is nothing selected, the selectText
@@ -610,7 +610,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '00e3a22ca92044556f50b029d5d52178eedd00ca', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '289b0bc809a87a8f66e2578f7b0155f4a8525637', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -626,7 +626,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'b286c77110501d17e7defa9b3c4f02a1aba620f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'e2de491d3cb57678d30c0383a0782cfdd28abba0', class: "select-wrapper-inner" }, h("slot", { key: '7b9054dbcdab00505a9195eb1674d96322741614', name: "start" }), h("div", { key: '874e4da16c1140be0b5043330e0538936d13ac56', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '64256b876c88e02852c8745f14c10636c48a6a72', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
+            }) }, h("label", { key: '37267c3b9e9171ff5467b9ed8f5052e9a93cbbea', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: 'd783e3394fa1219f858f1ff33ad982cb6732ae6d', class: "select-wrapper-inner" }, h("slot", { key: '8e274d4c6ad8d0ad876c35d3ecbeec56fa32c8b2', name: "start" }), h("div", { key: 'ed2259dfb409a45cee5ac674867699a27205d159', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '30ed3b3e19e6e9fdddbcb61dc4c84d60f90164ac', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.md.css

@@ -563,12 +563,12 @@ button {
   flex-shrink: 0;
 }
 
-::slotted([slot=start]) {
+::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
   margin-inline-start: 0;
 }
 
-::slotted([slot=end]) {
+::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
   margin-inline-end: 0;
 }

package/dist/collection/components/select/test/a11y/select.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['light', 'dark'] }).forEach(({ title, config }) => {
+configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, config }) => {
     test.describe(title('textarea: a11y'), () => {
         test('default layout should not have accessibility violations', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/select/test/select.spec.js

@@ -56,6 +56,28 @@ describe('ion-select', () => {
         expect(propEl).not.toBe(null);
         expect(slotEl).toBe(null);
     });
+    it('should prefer aria label if both attribute and visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Select],
+            html: `
+        <ion-select aria-label="Aria Label Text" label="Label Prop Text"></ion-select>
+      `,
+        });
+        const select = page.body.querySelector('ion-select');
+        const nativeButton = select.shadowRoot.querySelector('button');
+        expect(nativeButton.getAttribute('aria-label')).toBe('Aria Label Text');
+    });
+    it('should prefer visible label if only visible text provided', async () => {
+        const page = await newSpecPage({
+            components: [Select],
+            html: `
+        <ion-select label="Label Prop Text"></ion-select>
+      `,
+        });
+        const select = page.body.querySelector('ion-select');
+        const nativeButton = select.shadowRoot.querySelector('button');
+        expect(nativeButton.getAttribute('aria-label')).toBe('Label Prop Text');
+    });
 });
 describe('select: slot interactivity', () => {
     test('should not prevent click handlers from firing', async () => {

package/dist/collection/components/select/test/slot/select.e2e.js

@@ -9,9 +9,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');
@@ -21,9 +25,13 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
+            <ion-icon slot="start" name="heart" aria-hidden="true"></ion-icon>
             <ion-button slot="end" aria-label="Show/hide password">
               <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
             </ion-button>
+            <ion-button slot="end">
+              <ion-icon slot="icon-only" name="trash" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `, config);
             const select = page.locator('ion-select');

package/dist/collection/components/select-option/select-option.js

@@ -10,7 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        return h(Host, { key: 'd26050569d40011a686a66ab7bc59ffa7163d264', role: "option", id: this.inputId, class: getIonMode(this) });
+        return h(Host, { key: '808e4cf8c5778604cfecc6f218d1d24ba06f0a87', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select-popover/select-popover.js

@@ -102,7 +102,7 @@ export class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (h(Host, { key: '7b93c55895f66fc6431862b7b47eeb60eaa8c292', class: getIonMode(this) }, h("ion-list", { key: '3a74ec35ec9b627a192d8ad3a206f81df838342b' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
+        return (h(Host, { key: 'cc49bc02396957ee92f8cf63b363ad491d05c8d9', class: getIonMode(this) }, h("ion-list", { key: '99ef366c7a8211b7ccf8847259ed113544db6a31' }, header !== undefined && h("ion-list-header", null, header), hasSubHeaderOrMessage && (h("ion-item", null, h("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && h("h3", null, subHeader), message !== undefined && h("p", null, message)))), this.renderOptions(options))));
     }
     static get is() { return "ion-select-popover"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/select-popover/test/a11y/select-popover.e2e.js

@@ -4,7 +4,7 @@
 import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-configs({ directions: ['ltr'], themes: ['dark', 'light'] }).forEach(({ config, title }) => {
+configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ config, title }) => {
     test.describe(title('select-popover: a11y'), () => {
         test('should not have accessibility violations when header is defined', async ({ page }) => {
             await page.setContent(`

package/dist/collection/components/skeleton-text/skeleton-text.js

@@ -25,11 +25,11 @@ export class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f6b1a1888a3cac52acbeb4957ca32befd6bc52f8', class: {
+        return (h(Host, { key: '57a8669d26c07a5200c221be455c38d7463077ad', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, h("span", { key: '1e61b9d249f8e3bcb55c06de8311c224866b9632' }, "\u00A0")));
+            } }, h("span", { key: 'a3c5ba1d02f32b81c3427c38908c0527d07edaff' }, "\u00A0")));
     }
     static get is() { return "ion-skeleton-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spinner/spinner.js

@@ -39,7 +39,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: 'd33d08486ee9d9069abbe37b17e58fc2c321a414', class: createColorClasses(self.color, {
+        return (h(Host, { key: '794ae74de8e94b2d8877712362c0a24ccb7e87f2', class: createColorClasses(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/split-pane/split-pane.js

@@ -118,12 +118,12 @@ export class SplitPane {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '0f83e45ded140540bf43da4c5ff2c3540cc3b74b', class: {
+        return (h(Host, { key: 'ba9cf1cd2963611627c841ccfbbf396bbf677de5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, h("slot", { key: '77ff2487fa265f9f5e96fdffad80dc9c417f896a' })));
+            } }, h("slot", { key: '0f4cf2471e100df2f35dc429fabba1cd264db480' })));
     }
     static get is() { return "ion-split-pane"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab/tab.js

@@ -48,10 +48,10 @@ export class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (h(Host, { key: '4892bdb4aab5f2e2bb08e78fd7f67b3902ada693', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (h(Host, { key: '84b23a0a736aa6d060c2a7756bbc96b72ef53984', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, h("slot", { key: 'd919df91de8fd547581329e566bddacac64509a0' })));
+            } }, h("slot", { key: '102092dedc7cd1eabc7f1fe0ac5d8880a6cda85f' })));
     }
     static get is() { return "ion-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -51,11 +51,11 @@ export class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: 'cbebdd59017a50a71e4e9e6ae831f4ca6eb64884', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '7939a97d199bf8298684e87be6a8340b4e8d63df', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'b58c66562e91f3584a270c4c755c6bd8c165e634' })));
+            }) }, h("slot", { key: '275e4051d3c58904fb0870e3feb918d3777b1288' })));
     }
     static get is() { return "ion-tab-bar"; }
     static get encapsulation() { return "shadow"; }