@ionic/core 8.7.3-dev.11755006024.11261c64 → 8.7.3-dev.11755190119.16c6a375

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/components/ion-datetime.js +3 -4
  2. package/components/ion-input.js +4 -4
  3. package/components/overlays.js +97 -1
  4. package/components/picker-column-option.js +3 -3
  5. package/components/picker-column.js +39 -3
  6. package/dist/cjs/index.cjs.js +1 -1
  7. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  8. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  9. package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
  10. package/dist/cjs/ion-input.cjs.entry.js +4 -4
  11. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  12. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  13. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  14. package/dist/cjs/ion-picker-column-option.cjs.entry.js +3 -3
  15. package/dist/cjs/ion-picker-column.cjs.entry.js +39 -3
  16. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  17. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  20. package/dist/cjs/{overlays-DsQx1liJ.js → overlays-CglR7j-u.js} +96 -0
  21. package/dist/collection/components/datetime/datetime.js +3 -4
  22. package/dist/collection/components/input/input.js +4 -4
  23. package/dist/collection/components/picker-column/picker-column.js +39 -3
  24. package/dist/collection/components/picker-column-option/picker-column-option.ios.css +2 -2
  25. package/dist/collection/components/picker-column-option/picker-column-option.js +1 -1
  26. package/dist/collection/components/picker-column-option/picker-column-option.md.css +2 -2
  27. package/dist/collection/utils/overlays.js +97 -0
  28. package/dist/docs.json +1 -1
  29. package/dist/esm/index.js +1 -1
  30. package/dist/esm/ion-action-sheet.entry.js +1 -1
  31. package/dist/esm/ion-alert.entry.js +1 -1
  32. package/dist/esm/ion-datetime_3.entry.js +4 -4
  33. package/dist/esm/ion-input.entry.js +4 -4
  34. package/dist/esm/ion-loading.entry.js +1 -1
  35. package/dist/esm/ion-menu_3.entry.js +1 -1
  36. package/dist/esm/ion-modal.entry.js +1 -1
  37. package/dist/esm/ion-picker-column-option.entry.js +3 -3
  38. package/dist/esm/ion-picker-column.entry.js +39 -3
  39. package/dist/esm/ion-popover.entry.js +1 -1
  40. package/dist/esm/ion-select-modal.entry.js +1 -1
  41. package/dist/esm/ion-select_3.entry.js +1 -1
  42. package/dist/esm/ion-toast.entry.js +1 -1
  43. package/dist/esm/{overlays-NqBaHPvD.js → overlays-ZX_4-t_r.js} +97 -1
  44. package/dist/ionic/index.esm.js +1 -1
  45. package/dist/ionic/ionic.esm.js +1 -1
  46. package/dist/ionic/p-1d5b934a.entry.js +4 -0
  47. package/dist/ionic/p-29032e49.entry.js +4 -0
  48. package/dist/ionic/{p-abdfa903.entry.js → p-7bac2c5f.entry.js} +1 -1
  49. package/dist/ionic/{p-6979d2fe.entry.js → p-8d96a0cd.entry.js} +1 -1
  50. package/dist/ionic/{p-ea415755.entry.js → p-91d6ccb0.entry.js} +1 -1
  51. package/dist/ionic/{p-25f16425.entry.js → p-92e8f208.entry.js} +1 -1
  52. package/dist/ionic/{p-4be3f593.entry.js → p-982fe1c4.entry.js} +1 -1
  53. package/dist/ionic/p-9f36c56a.entry.js +4 -0
  54. package/dist/ionic/p-CSwZyt05.js +4 -0
  55. package/dist/ionic/{p-bbea41a8.entry.js → p-ab33ef20.entry.js} +1 -1
  56. package/dist/ionic/{p-82f92e81.entry.js → p-ac434970.entry.js} +1 -1
  57. package/dist/ionic/{p-cb155366.entry.js → p-c575e7ce.entry.js} +1 -1
  58. package/dist/ionic/{p-2b9eb6e6.entry.js → p-f2884bc2.entry.js} +1 -1
  59. package/dist/ionic/p-f456d176.entry.js +4 -0
  60. package/dist/types/components/picker-column/picker-column.d.ts +7 -0
  61. package/hydrate/index.js +145 -13
  62. package/hydrate/index.mjs +145 -13
  63. package/package.json +1 -1
  64. package/dist/ionic/p-1488b7cc.entry.js +0 -4
  65. package/dist/ionic/p-61646e84.entry.js +0 -4
  66. package/dist/ionic/p-8888efe4.entry.js +0 -4
  67. package/dist/ionic/p-Dks1yZU6.js +0 -4
  68. package/dist/ionic/p-b292804d.entry.js +0 -4
@@ -5,7 +5,6 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
5
5
  import { startFocusVisible } from './focus-visible.js';
6
6
  import { r as raf, g as getElementRoot, e as renderHiddenInput } from './helpers.js';
7
7
  import { a as printIonError, p as printIonWarning } from './index4.js';
8
- import { F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
9
8
  import { i as isRTL } from './dir.js';
10
9
  import { c as createColorClasses } from './theme.js';
11
10
  import { c as chevronDown, f as caretUpSharp, g as chevronForward, h as caretDownSharp, a as chevronBack } from './index6.js';
@@ -1303,7 +1302,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1303
1302
  const renderArray = forcePresentation === 'time-date'
1304
1303
  ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
1305
1304
  : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
1306
- return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
1305
+ return h("ion-picker", null, renderArray);
1307
1306
  }
1308
1307
  renderDatePickerColumns(forcePresentation) {
1309
1308
  return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1860,7 +1859,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1860
1859
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1861
1860
  const hasWheelVariant = hasDatePresentation && preferWheel;
1862
1861
  renderHiddenInput(true, el, name, formatValue(value), disabled);
1863
- return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1862
+ return (h(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1864
1863
  [mode]: true,
1865
1864
  ['datetime-readonly']: readonly,
1866
1865
  ['datetime-disabled']: disabled,
@@ -1870,7 +1869,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1870
1869
  [`datetime-size-${size}`]: true,
1871
1870
  [`datetime-prefer-wheel`]: hasWheelVariant,
1872
1871
  [`datetime-grid`]: isGridStyle,
1873
- })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1872
+ })) }, h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1874
1873
  }
1875
1874
  get el() { return this; }
1876
1875
  static get watchers() { return {
@@ -371,7 +371,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
371
371
  const { helperText, errorText, helperTextId, errorTextId } = this;
372
372
  return [
373
373
  h("div", { id: helperTextId, class: "helper-text" }, helperText),
374
- h("div", { id: errorTextId, class: "error-text" }, errorText),
374
+ h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true" }, errorText),
375
375
  ];
376
376
  }
377
377
  getHintTextID() {
@@ -489,7 +489,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
489
489
  * TODO(FW-5592): Remove hasStartEndSlots condition
490
490
  */
491
491
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
492
- return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
492
+ return (h(Host, { key: 'f00c1c1d3f57e98dd0c5a88c5bfef156a265e742', class: createColorClasses(this.color, {
493
493
  [mode]: true,
494
494
  'has-value': hasValue,
495
495
  'has-focus': hasFocus,
@@ -500,14 +500,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
500
500
  'in-item': inItem,
501
501
  'in-item-color': hostContext('ion-item.ion-color', this.el),
502
502
  'input-disabled': disabled,
503
- }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
503
+ }) }, h("label", { key: '95de0c0153ddd94c39e15d779ea0e1b3a991a3d9', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '55d22ffcac1f8c07c5b86df1ae36ff39643143cd', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '59341c66cace2c718219d1023bd9190dbd41b000', name: "start" }), h("input", Object.assign({ key: 'ab675664758bee4b2717c3914438c85b8b1ebb44', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'fec4fa631b33151bc31ed9fc4f34970f72fd36f5', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
504
504
  /**
505
505
  * This prevents mobile browsers from
506
506
  * blurring the input when the clear
507
507
  * button is activated.
508
508
  */
509
509
  ev.preventDefault();
510
- }, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
510
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '47bc105137bfad30a5d3c05b11eda552bc643d9a', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '6d93afaf67d147dff45e17825d5d8c7a82d7be18', name: "end" })), shouldRenderHighlight && h("div", { key: '7ea437e065d66ba7d143e1c9ad72f4bcdb1e5f01', class: "input-highlight" })), this.renderBottomContent()));
511
511
  }
512
512
  get el() { return this; }
513
513
  static get watchers() { return {
@@ -5,7 +5,7 @@ import { d as doc } from './index9.js';
5
5
  import { h as focusVisibleElement, c as componentOnReady, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';
6
6
  import { OVERLAY_BACK_BUTTON_PRIORITY, shouldUseCloseWatcher } from './hardware-back-button.js';
7
7
  import { c as config, a as printIonError, p as printIonWarning } from './index4.js';
8
- import { b as getIonMode } from './ionic-global.js';
8
+ import { b as getIonMode, a as isPlatform } from './ionic-global.js';
9
9
  import { C as CoreDelegate } from './framework-delegate.js';
10
10
  import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
11
11
 
@@ -517,6 +517,8 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
517
517
  setRootAriaHidden(true);
518
518
  document.body.classList.add(BACKDROP_NO_SCROLL);
519
519
  }
520
+ hideUnderlyingOverlaysFromScreenReaders(overlay.el);
521
+ hideAnimatingOverlayFromScreenReaders(overlay.el);
520
522
  overlay.presented = true;
521
523
  overlay.willPresent.emit();
522
524
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -642,6 +644,12 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
642
644
  }
643
645
  overlay.presented = false;
644
646
  try {
647
+ /**
648
+ * There is no need to show the overlay to screen readers during
649
+ * the dismiss animation. This is because the overlay will be removed
650
+ * from the DOM after the animation is complete.
651
+ */
652
+ hideAnimatingOverlayFromScreenReaders(overlay.el);
645
653
  // Overlay contents should not be clickable during dismiss
646
654
  overlay.el.style.setProperty('pointer-events', 'none');
647
655
  overlay.willDismiss.emit({ data, role });
@@ -680,6 +688,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
680
688
  printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
681
689
  }
682
690
  overlay.el.remove();
691
+ revealOverlaysToScreenReaders();
683
692
  return true;
684
693
  };
685
694
  const getAppRoot = (doc) => {
@@ -875,6 +884,93 @@ const createTriggerController = () => {
875
884
  removeClickListener,
876
885
  };
877
886
  };
887
+ /**
888
+ * The overlay that is being animated also needs to hide from screen
889
+ * readers during its animation. This ensures that assistive technologies
890
+ * like TalkBack do not announce or interact with the content until the
891
+ * animation is complete, avoiding confusion for users.
892
+ *
893
+ * When the overlay is presented on an Android device, TalkBack's focus rings
894
+ * may appear in the wrong position due to the transition (specifically
895
+ * `transform` styles). This occurs because the focus rings are initially
896
+ * displayed at the starting position of the elements before the transition
897
+ * begins. This workaround ensures the focus rings do not appear in the
898
+ * incorrect location.
899
+ *
900
+ * If this solution is applied to iOS devices, then it leads to a bug where
901
+ * the overlays cannot be accessed by screen readers. This is due to
902
+ * VoiceOver not being able to update the accessibility tree when the
903
+ * `aria-hidden` is removed.
904
+ *
905
+ * @param overlay - The overlay that is being animated.
906
+ */
907
+ const hideAnimatingOverlayFromScreenReaders = (overlay) => {
908
+ if (doc === undefined)
909
+ return;
910
+ if (isPlatform('android')) {
911
+ /**
912
+ * Once the animation is complete, this attribute will be removed.
913
+ * This is done at the end of the `present` method.
914
+ */
915
+ overlay.setAttribute('aria-hidden', 'true');
916
+ }
917
+ };
918
+ /**
919
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
920
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
921
+ * events here because those events do not fire when the screen readers moves to a non-focusable
922
+ * element such as text.
923
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
924
+ *
925
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
926
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
927
+ */
928
+ const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
929
+ var _a;
930
+ if (doc === undefined)
931
+ return;
932
+ const overlays = getPresentedOverlays(doc);
933
+ for (let i = overlays.length - 1; i >= 0; i--) {
934
+ const presentedOverlay = overlays[i];
935
+ const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
936
+ /**
937
+ * If next overlay has aria-hidden then all remaining overlays will have it too.
938
+ * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
939
+ * should not have aria-hidden either so focus can remain in the current overlay.
940
+ */
941
+ if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
942
+ presentedOverlay.setAttribute('aria-hidden', 'true');
943
+ }
944
+ }
945
+ };
946
+ /**
947
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
948
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
949
+ * focus is never automatically moved to the Toast.
950
+ */
951
+ const revealOverlaysToScreenReaders = () => {
952
+ if (doc === undefined)
953
+ return;
954
+ const overlays = getPresentedOverlays(doc);
955
+ for (let i = overlays.length - 1; i >= 0; i--) {
956
+ const currentOverlay = overlays[i];
957
+ /**
958
+ * If the current we are looking at is a Toast then we can remove aria-hidden.
959
+ * However, we potentially need to keep looking at the overlay stack because there
960
+ * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
961
+ * overlay too so focus can move there since focus is never automatically moved to the Toast.
962
+ */
963
+ currentOverlay.removeAttribute('aria-hidden');
964
+ /**
965
+ * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
966
+ * since this overlay should always receive focus. As a result, all underlying overlays should still
967
+ * be hidden from screen readers.
968
+ */
969
+ if (currentOverlay.tagName !== 'ION-TOAST') {
970
+ break;
971
+ }
972
+ }
973
+ };
878
974
  const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
879
975
 
880
976
  export { BACKDROP as B, FOCUS_TRAP_DISABLE_CLASS as F, GESTURE as G, OVERLAY_GESTURE_PRIORITY as O, alertController as a, actionSheetController as b, popoverController as c, createDelegateController as d, createTriggerController as e, present as f, dismiss as g, eventMethod as h, isCancel as i, prepareOverlay as j, setOverlayId as k, loadingController as l, modalController as m, focusFirstDescendant as n, getPresentedOverlay as o, pickerController as p, focusLastDescendant as q, safeCall as s, toastController as t };
@@ -6,9 +6,9 @@ import { d as inheritAttributes } from './helpers.js';
6
6
  import { c as createColorClasses } from './theme.js';
7
7
  import { b as getIonMode } from './ionic-global.js';
8
8
 
9
- const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
9
+ const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
10
10
 
11
- const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
11
+ const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
12
12
 
13
13
  const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOption extends HTMLElement {
14
14
  constructor() {
@@ -102,7 +102,7 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
102
102
  return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
103
103
  [mode]: true,
104
104
  ['option-disabled']: disabled,
105
- }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
105
+ }) }, h("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
106
106
  }
107
107
  get el() { return this; }
108
108
  static get watchers() { return {
@@ -409,6 +409,23 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
409
409
  var _a;
410
410
  return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
411
411
  };
412
+ /**
413
+ * Render an element that overlays the column. This element is for assistive
414
+ * tech to allow users to navigate the column up/down. This element should receive
415
+ * focus as it listens for synthesized keyboard events as required by the
416
+ * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
417
+ */
418
+ this.renderAssistiveFocusable = () => {
419
+ const { activeItem } = this;
420
+ const valueText = this.getOptionValueText(activeItem);
421
+ /**
422
+ * When using the picker, the valuetext provides important context that valuenow
423
+ * does not. Additionally, using non-zero valuemin/valuemax values can cause
424
+ * WebKit to incorrectly announce numeric valuetext values (such as a year
425
+ * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
426
+ */
427
+ return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
428
+ };
412
429
  }
413
430
  ariaLabelChanged(newValue) {
414
431
  this.ariaLabel = newValue;
@@ -549,14 +566,33 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
549
566
  render() {
550
567
  const { color, disabled, isActive, numericInput } = this;
551
568
  const mode = getIonMode(this);
552
- return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
569
+ return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
553
570
  [mode]: true,
554
571
  ['picker-column-active']: isActive,
555
572
  ['picker-column-numeric-input']: numericInput,
556
573
  ['picker-column-disabled']: disabled,
557
- }) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
574
+ }) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
558
575
  this.scrollEl = el;
559
- }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
576
+ },
577
+ /**
578
+ * When an element has an overlay scroll style and
579
+ * a fixed height, Firefox will focus the scrollable
580
+ * container if the content exceeds the container's
581
+ * dimensions.
582
+ *
583
+ * This causes keyboard navigation to focus to this
584
+ * element instead of going to the next element in
585
+ * the tab order.
586
+ *
587
+ * The desired behavior is for the user to be able to
588
+ * focus the assistive focusable element and tab to
589
+ * the next element in the tab order. Instead of tabbing
590
+ * to this element.
591
+ *
592
+ * To prevent this, we set the tabIndex to -1. This
593
+ * will match the behavior of the other browsers.
594
+ */
595
+ tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
560
596
  }
561
597
  get el() { return this; }
562
598
  static get watchers() { return {
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
15
15
  var config = require('./config-CKhELRRu.js');
16
16
  var theme = require('./theme-CeDs6Hcv.js');
17
17
  var index$3 = require('./index-D24wggHR.js');
18
- var overlays = require('./overlays-DsQx1liJ.js');
18
+ var overlays = require('./overlays-CglR7j-u.js');
19
19
  require('./index-DkNv4J_i.js');
20
20
  require('./gesture-controller-dtqlP_q4.js');
21
21
  require('./hardware-back-button-BxdNu76F.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var buttonActive = require('./button-active-BzZenWWH.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-DsQx1liJ.js');
10
+ var overlays = require('./overlays-CglR7j-u.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
8
8
  var buttonActive = require('./button-active-BzZenWWH.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
- var overlays = require('./overlays-DsQx1liJ.js');
11
+ var overlays = require('./overlays-CglR7j-u.js');
12
12
  var theme = require('./theme-CeDs6Hcv.js');
13
13
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
14
14
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -6,13 +6,13 @@
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var focusVisible = require('./focus-visible-CCvKiLh3.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
- var overlays = require('./overlays-DsQx1liJ.js');
10
9
  var dir = require('./dir-Cn0z1rJH.js');
11
10
  var theme = require('./theme-CeDs6Hcv.js');
12
11
  var index$1 = require('./index-DqmRDbxg.js');
13
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
14
13
  var data = require('./data-DW6ofvJ8.js');
15
14
  var lockController = require('./lock-controller-aDB9wrEf.js');
15
+ var overlays = require('./overlays-CglR7j-u.js');
16
16
  var animation = require('./animation-ZJ1lAkZD.js');
17
17
  var haptic = require('./haptic-ClPPQ_PS.js');
18
18
  require('./index-DkNv4J_i.js');
@@ -1301,7 +1301,7 @@ const Datetime = class {
1301
1301
  const renderArray = forcePresentation === 'time-date'
1302
1302
  ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
1303
1303
  : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
1304
- return index.h("ion-picker", { class: overlays.FOCUS_TRAP_DISABLE_CLASS }, renderArray);
1304
+ return index.h("ion-picker", null, renderArray);
1305
1305
  }
1306
1306
  renderDatePickerColumns(forcePresentation) {
1307
1307
  return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1858,7 +1858,7 @@ const Datetime = class {
1858
1858
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1859
1859
  const hasWheelVariant = hasDatePresentation && preferWheel;
1860
1860
  helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
1861
- return (index.h(index.Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
1861
+ return (index.h(index.Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
1862
1862
  [mode]: true,
1863
1863
  ['datetime-readonly']: readonly,
1864
1864
  ['datetime-disabled']: disabled,
@@ -1868,7 +1868,7 @@ const Datetime = class {
1868
1868
  [`datetime-size-${size}`]: true,
1869
1869
  [`datetime-prefer-wheel`]: hasWheelVariant,
1870
1870
  [`datetime-grid`]: isGridStyle,
1871
- })) }, index.h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1871
+ })) }, index.h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1872
1872
  }
1873
1873
  get el() { return index.getElement(this); }
1874
1874
  static get watchers() { return {
@@ -372,7 +372,7 @@ const Input = class {
372
372
  const { helperText, errorText, helperTextId, errorTextId } = this;
373
373
  return [
374
374
  index.h("div", { id: helperTextId, class: "helper-text" }, helperText),
375
- index.h("div", { id: errorTextId, class: "error-text" }, errorText),
375
+ index.h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true" }, errorText),
376
376
  ];
377
377
  }
378
378
  getHintTextID() {
@@ -490,7 +490,7 @@ const Input = class {
490
490
  * TODO(FW-5592): Remove hasStartEndSlots condition
491
491
  */
492
492
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
493
- return (index.h(index.Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: theme.createColorClasses(this.color, {
493
+ return (index.h(index.Host, { key: 'f00c1c1d3f57e98dd0c5a88c5bfef156a265e742', class: theme.createColorClasses(this.color, {
494
494
  [mode]: true,
495
495
  'has-value': hasValue,
496
496
  'has-focus': hasFocus,
@@ -501,14 +501,14 @@ const Input = class {
501
501
  'in-item': inItem,
502
502
  'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
503
503
  'input-disabled': disabled,
504
- }) }, index.h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), index.h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
504
+ }) }, index.h("label", { key: '95de0c0153ddd94c39e15d779ea0e1b3a991a3d9', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '55d22ffcac1f8c07c5b86df1ae36ff39643143cd', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '59341c66cace2c718219d1023bd9190dbd41b000', name: "start" }), index.h("input", Object.assign({ key: 'ab675664758bee4b2717c3914438c85b8b1ebb44', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'fec4fa631b33151bc31ed9fc4f34970f72fd36f5', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
505
505
  /**
506
506
  * This prevents mobile browsers from
507
507
  * blurring the input when the clear
508
508
  * button is activated.
509
509
  */
510
510
  ev.preventDefault();
511
- }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && index.h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
511
+ }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '47bc105137bfad30a5d3c05b11eda552bc643d9a', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '6d93afaf67d147dff45e17825d5d8c7a82d7be18', name: "end" })), shouldRenderHighlight && index.h("div", { key: '7ea437e065d66ba7d143e1c9ad72f4bcdb1e5f01', class: "input-highlight" })), this.renderBottomContent()));
512
512
  }
513
513
  get el() { return index.getElement(this); }
514
514
  static get watchers() { return {
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var config = require('./config-CKhELRRu.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-DsQx1liJ.js');
10
+ var overlays = require('./overlays-CglR7j-u.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
8
- var overlays = require('./overlays-DsQx1liJ.js');
8
+ var overlays = require('./overlays-CglR7j-u.js');
9
9
  var gestureController = require('./gesture-controller-dtqlP_q4.js');
10
10
  var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
11
11
  var helpers = require('./helpers-DgwmcYAu.js');
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
11
  var capacitor = require('./capacitor-DmA66EwP.js');
12
- var overlays = require('./overlays-DsQx1liJ.js');
12
+ var overlays = require('./overlays-CglR7j-u.js');
13
13
  var theme = require('./theme-CeDs6Hcv.js');
14
14
  var index$4 = require('./index-BzEyuIww.js');
15
15
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
@@ -8,9 +8,9 @@ var helpers = require('./helpers-DgwmcYAu.js');
8
8
  var theme = require('./theme-CeDs6Hcv.js');
9
9
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
10
10
 
11
- const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
11
+ const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
12
12
 
13
- const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
13
+ const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
14
14
 
15
15
  const PickerColumnOption = class {
16
16
  constructor(hostRef) {
@@ -102,7 +102,7 @@ const PickerColumnOption = class {
102
102
  return (index.h(index.Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: theme.createColorClasses(color, {
103
103
  [mode]: true,
104
104
  ['option-disabled']: disabled,
105
- }) }, index.h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, index.h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
105
+ }) }, index.h("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, index.h("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
106
106
  }
107
107
  get el() { return index.getElement(this); }
108
108
  static get watchers() { return {
@@ -410,6 +410,23 @@ const PickerColumn = class {
410
410
  var _a;
411
411
  return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
412
412
  };
413
+ /**
414
+ * Render an element that overlays the column. This element is for assistive
415
+ * tech to allow users to navigate the column up/down. This element should receive
416
+ * focus as it listens for synthesized keyboard events as required by the
417
+ * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
418
+ */
419
+ this.renderAssistiveFocusable = () => {
420
+ const { activeItem } = this;
421
+ const valueText = this.getOptionValueText(activeItem);
422
+ /**
423
+ * When using the picker, the valuetext provides important context that valuenow
424
+ * does not. Additionally, using non-zero valuemin/valuemax values can cause
425
+ * WebKit to incorrectly announce numeric valuetext values (such as a year
426
+ * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
427
+ */
428
+ return (index.h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
429
+ };
413
430
  }
414
431
  ariaLabelChanged(newValue) {
415
432
  this.ariaLabel = newValue;
@@ -550,14 +567,33 @@ const PickerColumn = class {
550
567
  render() {
551
568
  const { color, disabled, isActive, numericInput } = this;
552
569
  const mode = ionicGlobal.getIonMode(this);
553
- return (index.h(index.Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: theme.createColorClasses(color, {
570
+ return (index.h(index.Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: theme.createColorClasses(color, {
554
571
  [mode]: true,
555
572
  ['picker-column-active']: isActive,
556
573
  ['picker-column-numeric-input']: numericInput,
557
574
  ['picker-column-disabled']: disabled,
558
- }) }, index.h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), index.h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
575
+ }) }, this.renderAssistiveFocusable(), index.h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), index.h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
559
576
  this.scrollEl = el;
560
- }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, index.h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), index.h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
577
+ },
578
+ /**
579
+ * When an element has an overlay scroll style and
580
+ * a fixed height, Firefox will focus the scrollable
581
+ * container if the content exceeds the container's
582
+ * dimensions.
583
+ *
584
+ * This causes keyboard navigation to focus to this
585
+ * element instead of going to the next element in
586
+ * the tab order.
587
+ *
588
+ * The desired behavior is for the user to be able to
589
+ * focus the assistive focusable element and tab to
590
+ * the next element in the tab order. Instead of tabbing
591
+ * to this element.
592
+ *
593
+ * To prevent this, we set the tabIndex to -1. This
594
+ * will match the behavior of the other browsers.
595
+ */
596
+ tabIndex: -1 }, index.h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), index.h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), index.h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), index.h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
561
597
  }
562
598
  get el() { return index.getElement(this); }
563
599
  static get watchers() { return {
@@ -4,7 +4,7 @@
4
4
  'use strict';
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
- var overlays = require('./overlays-DsQx1liJ.js');
7
+ var overlays = require('./overlays-CglR7j-u.js');
8
8
  var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
8
- var overlays = require('./overlays-DsQx1liJ.js');
8
+ var overlays = require('./overlays-CglR7j-u.js');
9
9
  var theme = require('./theme-CeDs6Hcv.js');
10
10
  require('./index-DkNv4J_i.js');
11
11
  require('./helpers-DgwmcYAu.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var notchController = require('./notch-controller-Bf5Rr4R5.js');
8
8
  var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
- var overlays = require('./overlays-DsQx1liJ.js');
10
+ var overlays = require('./overlays-CglR7j-u.js');
11
11
  var dir = require('./dir-Cn0z1rJH.js');
12
12
  var theme = require('./theme-CeDs6Hcv.js');
13
13
  var watchOptions = require('./watch-options-CviOsrTS.js');
@@ -7,7 +7,7 @@ var index$1 = require('./index-DNh170BW.js');
7
7
  var config = require('./config-CKhELRRu.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-DsQx1liJ.js');
10
+ var overlays = require('./overlays-CglR7j-u.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');