@ionic/core 8.4.1-dev.11732235436.1dec59cf → 8.4.1-dev.11732305980.19d90e1c
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.
- package/components/header.js +21 -2
- package/components/ion-menu.js +29 -7
- package/components/overlays.js +27 -12
- package/components/radio-group.js +8 -2
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +21 -2
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +30 -8
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-radio_2.cjs.entry.js +6 -1
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-ba0f6986.js → overlays-aa669eb8.js} +26 -11
- package/dist/collection/components/header/header.utils.js +21 -2
- package/dist/collection/components/menu/menu.js +29 -6
- package/dist/collection/components/radio-group/radio-group.js +30 -1
- package/dist/collection/utils/focus-trap.js +8 -2
- package/dist/collection/utils/overlays.js +19 -9
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-app_8.entry.js +21 -2
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +30 -8
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-radio_2.entry.js +6 -1
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-ae10d43d.js → overlays-e7b9d6d9.js} +27 -12
- package/dist/esm-es5/index.js +1 -1
- package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
- package/dist/esm-es5/ion-alert.entry.js +1 -1
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-loading.entry.js +1 -1
- package/dist/esm-es5/ion-menu_3.entry.js +1 -1
- package/dist/esm-es5/ion-modal.entry.js +1 -1
- package/dist/esm-es5/ion-popover.entry.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-select-modal.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/esm-es5/ion-toast.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/overlays-e7b9d6d9.js +4 -0
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0aa833fb.system.js +4 -0
- package/dist/ionic/{p-5393e8bb.system.entry.js → p-1046866e.system.entry.js} +1 -1
- package/dist/ionic/p-12a722b8.system.entry.js +4 -0
- package/dist/ionic/{p-5b5c1505.system.entry.js → p-14e159ea.system.entry.js} +1 -1
- package/dist/ionic/p-19a5be0a.entry.js +4 -0
- package/dist/ionic/{p-0161caf9.system.entry.js → p-1fe02220.system.entry.js} +1 -1
- package/dist/ionic/{p-f10b70a1.entry.js → p-2b9b78c7.entry.js} +1 -1
- package/dist/ionic/{p-2ae283ce.system.entry.js → p-2bd0ae94.system.entry.js} +2 -2
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/p-508d024a.entry.js +4 -0
- package/dist/ionic/{p-6734db42.system.entry.js → p-626fd66d.system.entry.js} +1 -1
- package/dist/ionic/{p-857ca696.system.entry.js → p-6499df44.system.entry.js} +1 -1
- package/dist/ionic/{p-a1dee17f.entry.js → p-6b280620.entry.js} +1 -1
- package/dist/ionic/{p-1c1b8e1f.entry.js → p-6d6cedc5.entry.js} +1 -1
- package/dist/ionic/{p-1ebd1e27.system.entry.js → p-7ddc46c3.system.entry.js} +1 -1
- package/dist/ionic/{p-ee7ba749.entry.js → p-8b8be2fd.entry.js} +1 -1
- package/dist/ionic/{p-a34b4d94.entry.js → p-942b5e13.entry.js} +1 -1
- package/dist/ionic/{p-a1b9a163.entry.js → p-982315a6.entry.js} +1 -1
- package/dist/ionic/{p-a1051806.entry.js → p-9e33104d.entry.js} +1 -1
- package/dist/ionic/{p-9910f786.entry.js → p-a43467d8.entry.js} +1 -1
- package/dist/ionic/{p-1b7605a7.system.entry.js → p-b2272f51.system.entry.js} +1 -1
- package/dist/ionic/{p-4a274c89.entry.js → p-b79ba17c.entry.js} +1 -1
- package/dist/ionic/{p-8f05ba3b.system.js → p-c449820c.system.js} +1 -1
- package/dist/ionic/{p-5972efea.system.entry.js → p-ddaa748a.system.entry.js} +1 -1
- package/dist/ionic/{p-1e41f2aa.system.entry.js → p-e4f69534.system.entry.js} +1 -1
- package/dist/ionic/p-e6635685.js +4 -0
- package/dist/ionic/{p-d7e982e7.system.entry.js → p-e85d901b.system.entry.js} +1 -1
- package/dist/ionic/{p-e2252ad6.entry.js → p-fec61c32.entry.js} +1 -1
- package/dist/types/components/radio-group/radio-group.d.ts +2 -0
- package/dist/types/components.d.ts +1 -0
- package/dist/types/utils/focus-trap.d.ts +1 -1
- package/hydrate/index.js +83 -21
- package/hydrate/index.mjs +83 -21
- package/package.json +1 -1
- package/dist/esm-es5/overlays-ae10d43d.js +0 -4
- package/dist/ionic/p-04fc24ee.system.js +0 -4
- package/dist/ionic/p-5c831f49.js +0 -4
- package/dist/ionic/p-5f76120c.entry.js +0 -4
- package/dist/ionic/p-7d3a5580.system.entry.js +0 -4
- package/dist/ionic/p-e9a173ed.entry.js +0 -4
package/components/header.js
CHANGED
|
@@ -131,13 +131,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
|
|
|
131
131
|
};
|
|
132
132
|
const setHeaderActive = (headerIndex, active = true) => {
|
|
133
133
|
const headerEl = headerIndex.el;
|
|
134
|
+
const toolbars = headerIndex.toolbars;
|
|
135
|
+
const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
|
|
134
136
|
if (active) {
|
|
135
137
|
headerEl.classList.remove('header-collapse-condense-inactive');
|
|
136
|
-
|
|
138
|
+
ionTitles.forEach((ionTitle) => {
|
|
139
|
+
if (ionTitle) {
|
|
140
|
+
ionTitle.removeAttribute('aria-hidden');
|
|
141
|
+
}
|
|
142
|
+
});
|
|
137
143
|
}
|
|
138
144
|
else {
|
|
139
145
|
headerEl.classList.add('header-collapse-condense-inactive');
|
|
140
|
-
|
|
146
|
+
/**
|
|
147
|
+
* The small title should only be accessed by screen readers
|
|
148
|
+
* when the large title collapses into the small title due
|
|
149
|
+
* to scrolling.
|
|
150
|
+
*
|
|
151
|
+
* Originally, the header was given `aria-hidden="true"`
|
|
152
|
+
* but this caused issues with screen readers not being
|
|
153
|
+
* able to access any focusable elements within the header.
|
|
154
|
+
*/
|
|
155
|
+
ionTitles.forEach((ionTitle) => {
|
|
156
|
+
if (ionTitle) {
|
|
157
|
+
ionTitle.setAttribute('aria-hidden', 'true');
|
|
158
|
+
}
|
|
159
|
+
});
|
|
141
160
|
}
|
|
142
161
|
};
|
|
143
162
|
const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
package/components/ion-menu.js
CHANGED
|
@@ -8,8 +8,8 @@ import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
|
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button.js';
|
|
9
9
|
import { m as isEndSide, i as inheritAriaAttributes, n as assert, k as clamp } from './helpers.js';
|
|
10
10
|
import { m as menuController } from './index4.js';
|
|
11
|
+
import { c as config, b as getIonMode, a as isPlatform } from './ionic-global.js';
|
|
11
12
|
import { h as hostContext } from './theme.js';
|
|
12
|
-
import { c as config, b as getIonMode } from './ionic-global.js';
|
|
13
13
|
import { d as defineCustomElement$2 } from './backdrop.js';
|
|
14
14
|
|
|
15
15
|
const menuIosCss = ":host{--width:304px;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--background:var(--ion-background-color, #fff);left:0;right:0;top:0;bottom:0;display:none;position:absolute;contain:strict}:host(.show-menu){display:block}.menu-inner{-webkit-transform:translateX(-9999px);transform:translateX(-9999px);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);contain:strict}:host(.menu-side-start) .menu-inner{--ion-safe-area-right:0px;top:0;bottom:0}:host(.menu-side-start) .menu-inner{inset-inline-start:0;inset-inline-end:auto}:host-context([dir=rtl]):host(.menu-side-start) .menu-inner,:host-context([dir=rtl]).menu-side-start .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}@supports selector(:dir(rtl)){:host(.menu-side-start:dir(rtl)) .menu-inner{--ion-safe-area-right:unset;--ion-safe-area-left:0px}}:host(.menu-side-end) .menu-inner{--ion-safe-area-left:0px;top:0;bottom:0}:host(.menu-side-end) .menu-inner{inset-inline-start:auto;inset-inline-end:0}:host-context([dir=rtl]):host(.menu-side-end) .menu-inner,:host-context([dir=rtl]).menu-side-end .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}@supports selector(:dir(rtl)){:host(.menu-side-end:dir(rtl)) .menu-inner{--ion-safe-area-left:unset;--ion-safe-area-right:0px}}ion-backdrop{display:none;opacity:0.01;z-index:-1}@media (max-width: 340px){.menu-inner{--width:264px}}:host(.menu-type-reveal){z-index:0}:host(.menu-type-reveal.show-menu) .menu-inner{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host(.menu-type-overlay){z-index:1000}:host(.menu-type-overlay) .show-backdrop{display:block;cursor:pointer}:host(.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width, var(--width));min-width:var(--side-min-width, var(--min-width));max-width:var(--side-max-width, var(--max-width))}:host(.menu-pane-visible.split-pane-side){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none;box-shadow:none;z-index:0}:host(.menu-pane-visible.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}:host(.menu-pane-visible.split-pane-side){-ms-flex-order:-1;order:-1}:host(.menu-pane-visible.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host(.menu-pane-visible) .menu-inner{left:0;right:0;width:auto;-webkit-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}:host(.menu-pane-visible) ion-backdrop{display:hidden !important}:host(.menu-pane-visible.split-pane-side){-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-pane-visible.split-pane-side[side=end]){-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.menu-type-push){z-index:1000}:host(.menu-type-push) .show-backdrop{display:block}";
|
|
@@ -463,8 +463,22 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
463
463
|
}
|
|
464
464
|
beforeAnimation(shouldOpen, role) {
|
|
465
465
|
assert(!this.isAnimating, '_before() should not be called while animating');
|
|
466
|
-
|
|
467
|
-
|
|
466
|
+
/**
|
|
467
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
468
|
+
* may appear in the wrong position due to the transition (specifically
|
|
469
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
470
|
+
* displayed at the starting position of the elements before the transition
|
|
471
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
472
|
+
* incorrect location.
|
|
473
|
+
*
|
|
474
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
475
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
476
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
477
|
+
* `aria-hidden` is removed.
|
|
478
|
+
*/
|
|
479
|
+
if (isPlatform('android')) {
|
|
480
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
481
|
+
}
|
|
468
482
|
// this places the menu into the correct location before it animates in
|
|
469
483
|
// this css class doesn't actually kick off any animations
|
|
470
484
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -517,10 +531,18 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
517
531
|
this.blocker.unblock();
|
|
518
532
|
}
|
|
519
533
|
if (isOpen) {
|
|
534
|
+
/**
|
|
535
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
536
|
+
* may appear in the wrong position due to the transition (specifically
|
|
537
|
+
* `transform` styles). The menu is hidden from screen readers during the
|
|
538
|
+
* transition to prevent this. Once the transition is complete, the menu
|
|
539
|
+
* is shown again.
|
|
540
|
+
*/
|
|
541
|
+
if (isPlatform('android')) {
|
|
542
|
+
this.el.removeAttribute('aria-hidden');
|
|
543
|
+
}
|
|
520
544
|
// emit open event
|
|
521
545
|
this.ionDidOpen.emit();
|
|
522
|
-
// remove aria-hidden from menu
|
|
523
|
-
this.el.removeAttribute('aria-hidden');
|
|
524
546
|
/**
|
|
525
547
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
526
548
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -601,14 +623,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
|
|
|
601
623
|
* the ionBackButton listener in the menu controller
|
|
602
624
|
* will handle closing the menu when Escape is pressed.
|
|
603
625
|
*/
|
|
604
|
-
return (h(Host, { key: '
|
|
626
|
+
return (h(Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
605
627
|
[mode]: true,
|
|
606
628
|
[`menu-type-${type}`]: true,
|
|
607
629
|
'menu-enabled': !disabled,
|
|
608
630
|
[`menu-side-${side}`]: true,
|
|
609
631
|
'menu-pane-visible': isPaneVisible,
|
|
610
632
|
'split-pane-side': hostContext('ion-split-pane', el),
|
|
611
|
-
} }, h("div", { key: '
|
|
633
|
+
} }, h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
612
634
|
}
|
|
613
635
|
get el() { return this; }
|
|
614
636
|
static get watchers() { return {
|
package/components/overlays.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { d as doc } from './index5.js';
|
|
5
5
|
import { f 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
|
-
import { b as getIonMode, c as config } from './ionic-global.js';
|
|
7
|
+
import { b as getIonMode, c as config, a as isPlatform } from './ionic-global.js';
|
|
8
8
|
import { C as CoreDelegate } from './framework-delegate.js';
|
|
9
9
|
import { B as BACKDROP_NO_SCROLL } from './gesture-controller.js';
|
|
10
10
|
import { p as printIonWarning } from './index6.js';
|
|
@@ -21,7 +21,7 @@ import { p as printIonWarning } from './index6.js';
|
|
|
21
21
|
* Note: We need this distinction because `disabled="false"` is
|
|
22
22
|
* valid usage for the disabled property on ion-button.
|
|
23
23
|
*/
|
|
24
|
-
const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
|
|
24
|
+
const focusableQueryString = '[tabindex]:not([tabindex^="-"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^="-"]):not([hidden]):not([disabled]), textarea:not([tabindex^="-"]):not([hidden]):not([disabled]), button:not([tabindex^="-"]):not([hidden]):not([disabled]), select:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^="-"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^="-"]):not([hidden]):not([disabled]), .ion-focusable[disabled="false"]:not([tabindex^="-"]):not([hidden])';
|
|
25
25
|
/**
|
|
26
26
|
* Focuses the first descendant in a context
|
|
27
27
|
* that can receive focus. If none exists,
|
|
@@ -76,7 +76,13 @@ const focusElementInContext = (hostToFocus, fallbackElement) => {
|
|
|
76
76
|
elementToFocus = shadowRoot.querySelector(focusableQueryString) || hostToFocus;
|
|
77
77
|
}
|
|
78
78
|
if (elementToFocus) {
|
|
79
|
-
|
|
79
|
+
const radioGroup = elementToFocus.closest('ion-radio-group');
|
|
80
|
+
if (radioGroup) {
|
|
81
|
+
radioGroup.setFocus();
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
focusVisibleElement(elementToFocus);
|
|
85
|
+
}
|
|
80
86
|
}
|
|
81
87
|
else {
|
|
82
88
|
// Focus fallback element instead of letting focus escape
|
|
@@ -883,21 +889,30 @@ const createTriggerController = () => {
|
|
|
883
889
|
* like TalkBack do not announce or interact with the content until the
|
|
884
890
|
* animation is complete, avoiding confusion for users.
|
|
885
891
|
*
|
|
886
|
-
*
|
|
887
|
-
* in
|
|
888
|
-
* styles)
|
|
889
|
-
*
|
|
892
|
+
* When the overlay is presented on an Android device, TalkBack's focus rings
|
|
893
|
+
* may appear in the wrong position due to the transition (specifically
|
|
894
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
895
|
+
* displayed at the starting position of the elements before the transition
|
|
896
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
897
|
+
* incorrect location.
|
|
898
|
+
*
|
|
899
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
900
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
901
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
902
|
+
* `aria-hidden` is removed.
|
|
890
903
|
*
|
|
891
904
|
* @param overlay - The overlay that is being animated.
|
|
892
905
|
*/
|
|
893
906
|
const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
894
907
|
if (doc === undefined)
|
|
895
908
|
return;
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
909
|
+
if (isPlatform('android')) {
|
|
910
|
+
/**
|
|
911
|
+
* Once the animation is complete, this attribute will be removed.
|
|
912
|
+
* This is done at the end of the `present` method.
|
|
913
|
+
*/
|
|
914
|
+
overlay.setAttribute('aria-hidden', 'true');
|
|
915
|
+
}
|
|
901
916
|
};
|
|
902
917
|
/**
|
|
903
918
|
* Ensure that underlying overlays have aria-hidden if necessary so that screen readers
|
|
@@ -156,11 +156,16 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
156
156
|
}
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
|
+
/** @internal */
|
|
160
|
+
async setFocus() {
|
|
161
|
+
const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
|
|
162
|
+
radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
|
|
163
|
+
}
|
|
159
164
|
render() {
|
|
160
165
|
const { label, labelId, el, name, value } = this;
|
|
161
166
|
const mode = getIonMode(this);
|
|
162
167
|
renderHiddenInput(true, el, name, value, false);
|
|
163
|
-
return h(Host, { key: '
|
|
168
|
+
return h(Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
|
|
164
169
|
}
|
|
165
170
|
get el() { return this; }
|
|
166
171
|
static get watchers() { return {
|
|
@@ -170,7 +175,8 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
|
|
|
170
175
|
"allowEmptySelection": [4, "allow-empty-selection"],
|
|
171
176
|
"compareWith": [1, "compare-with"],
|
|
172
177
|
"name": [1],
|
|
173
|
-
"value": [1032]
|
|
178
|
+
"value": [1032],
|
|
179
|
+
"setFocus": [64]
|
|
174
180
|
}, [[4, "keydown", "onKeydown"]], {
|
|
175
181
|
"value": ["valueChanged"]
|
|
176
182
|
}]);
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -16,7 +16,7 @@ const helpers = require('./helpers-afaa9001.js');
|
|
|
16
16
|
const config = require('./config-4f60b98a.js');
|
|
17
17
|
const theme = require('./theme-d1c573d2.js');
|
|
18
18
|
const index$2 = require('./index-8e789962.js');
|
|
19
|
-
const overlays = require('./overlays-
|
|
19
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
20
20
|
require('./index-c8d52405.js');
|
|
21
21
|
require('./index-73f75efb.js');
|
|
22
22
|
require('./index-5915f9b3.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const buttonActive = require('./button-active-3f2f60b4.js');
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const theme = require('./theme-d1c573d2.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
15
15
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
|
|
|
10
10
|
const buttonActive = require('./button-active-3f2f60b4.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -801,13 +801,32 @@ mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
|
|
|
801
801
|
};
|
|
802
802
|
const setHeaderActive = (headerIndex, active = true) => {
|
|
803
803
|
const headerEl = headerIndex.el;
|
|
804
|
+
const toolbars = headerIndex.toolbars;
|
|
805
|
+
const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
|
|
804
806
|
if (active) {
|
|
805
807
|
headerEl.classList.remove('header-collapse-condense-inactive');
|
|
806
|
-
|
|
808
|
+
ionTitles.forEach((ionTitle) => {
|
|
809
|
+
if (ionTitle) {
|
|
810
|
+
ionTitle.removeAttribute('aria-hidden');
|
|
811
|
+
}
|
|
812
|
+
});
|
|
807
813
|
}
|
|
808
814
|
else {
|
|
809
815
|
headerEl.classList.add('header-collapse-condense-inactive');
|
|
810
|
-
|
|
816
|
+
/**
|
|
817
|
+
* The small title should only be accessed by screen readers
|
|
818
|
+
* when the large title collapses into the small title due
|
|
819
|
+
* to scrolling.
|
|
820
|
+
*
|
|
821
|
+
* Originally, the header was given `aria-hidden="true"`
|
|
822
|
+
* but this caused issues with screen readers not being
|
|
823
|
+
* able to access any focusable elements within the header.
|
|
824
|
+
*/
|
|
825
|
+
ionTitles.forEach((ionTitle) => {
|
|
826
|
+
if (ionTitle) {
|
|
827
|
+
ionTitle.setAttribute('aria-hidden', 'true');
|
|
828
|
+
}
|
|
829
|
+
});
|
|
811
830
|
}
|
|
812
831
|
};
|
|
813
832
|
const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
|
|
@@ -15,7 +15,7 @@ const index$2 = require('./index-073c7cdc.js');
|
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const data = require('./data-21dc0f81.js');
|
|
17
17
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
18
|
-
const overlays = require('./overlays-
|
|
18
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
19
19
|
const animation = require('./animation-b4fdf128.js');
|
|
20
20
|
const haptic = require('./haptic-f6b37aa3.js');
|
|
21
21
|
require('./index-c8d52405.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const config = require('./config-4f60b98a.js');
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const theme = require('./theme-d1c573d2.js');
|
|
14
14
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
15
15
|
const animation = require('./animation-b4fdf128.js');
|
|
@@ -7,13 +7,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
9
|
const cubicBezier = require('./cubic-bezier-f2dccc53.js');
|
|
10
|
-
const overlays = require('./overlays-
|
|
10
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
11
11
|
const gestureController = require('./gesture-controller-9436f482.js');
|
|
12
12
|
const hardwareBackButton = require('./hardware-back-button-9e8a2c4f.js');
|
|
13
13
|
const helpers = require('./helpers-afaa9001.js');
|
|
14
14
|
const index$1 = require('./index-8e789962.js');
|
|
15
|
-
const theme = require('./theme-d1c573d2.js');
|
|
16
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
|
+
const theme = require('./theme-d1c573d2.js');
|
|
17
17
|
const index$2 = require('./index-073c7cdc.js');
|
|
18
18
|
require('./index-c8d52405.js');
|
|
19
19
|
require('./framework-delegate-55f5683a.js');
|
|
@@ -466,8 +466,22 @@ const Menu = class {
|
|
|
466
466
|
}
|
|
467
467
|
beforeAnimation(shouldOpen, role) {
|
|
468
468
|
helpers.assert(!this.isAnimating, '_before() should not be called while animating');
|
|
469
|
-
|
|
470
|
-
|
|
469
|
+
/**
|
|
470
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
471
|
+
* may appear in the wrong position due to the transition (specifically
|
|
472
|
+
* `transform` styles). This occurs because the focus rings are initially
|
|
473
|
+
* displayed at the starting position of the elements before the transition
|
|
474
|
+
* begins. This workaround ensures the focus rings do not appear in the
|
|
475
|
+
* incorrect location.
|
|
476
|
+
*
|
|
477
|
+
* If this solution is applied to iOS devices, then it leads to a bug where
|
|
478
|
+
* the overlays cannot be accessed by screen readers. This is due to
|
|
479
|
+
* VoiceOver not being able to update the accessibility tree when the
|
|
480
|
+
* `aria-hidden` is removed.
|
|
481
|
+
*/
|
|
482
|
+
if (ionicGlobal.isPlatform('android')) {
|
|
483
|
+
this.el.setAttribute('aria-hidden', 'true');
|
|
484
|
+
}
|
|
471
485
|
// this places the menu into the correct location before it animates in
|
|
472
486
|
// this css class doesn't actually kick off any animations
|
|
473
487
|
this.el.classList.add(SHOW_MENU);
|
|
@@ -520,10 +534,18 @@ const Menu = class {
|
|
|
520
534
|
this.blocker.unblock();
|
|
521
535
|
}
|
|
522
536
|
if (isOpen) {
|
|
537
|
+
/**
|
|
538
|
+
* When the menu is presented on an Android device, TalkBack's focus rings
|
|
539
|
+
* may appear in the wrong position due to the transition (specifically
|
|
540
|
+
* `transform` styles). The menu is hidden from screen readers during the
|
|
541
|
+
* transition to prevent this. Once the transition is complete, the menu
|
|
542
|
+
* is shown again.
|
|
543
|
+
*/
|
|
544
|
+
if (ionicGlobal.isPlatform('android')) {
|
|
545
|
+
this.el.removeAttribute('aria-hidden');
|
|
546
|
+
}
|
|
523
547
|
// emit open event
|
|
524
548
|
this.ionDidOpen.emit();
|
|
525
|
-
// remove aria-hidden from menu
|
|
526
|
-
this.el.removeAttribute('aria-hidden');
|
|
527
549
|
/**
|
|
528
550
|
* Move focus to the menu to prepare focus trapping, as long as
|
|
529
551
|
* it isn't already focused. Use the host element instead of the
|
|
@@ -604,14 +626,14 @@ const Menu = class {
|
|
|
604
626
|
* the ionBackButton listener in the menu controller
|
|
605
627
|
* will handle closing the menu when Escape is pressed.
|
|
606
628
|
*/
|
|
607
|
-
return (index.h(index.Host, { key: '
|
|
629
|
+
return (index.h(index.Host, { key: 'da96fdb4c5ddf60e615cc4cdda7ccdb3fd7e089b', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
|
|
608
630
|
[mode]: true,
|
|
609
631
|
[`menu-type-${type}`]: true,
|
|
610
632
|
'menu-enabled': !disabled,
|
|
611
633
|
[`menu-side-${side}`]: true,
|
|
612
634
|
'menu-pane-visible': isPaneVisible,
|
|
613
635
|
'split-pane-side': theme.hostContext('ion-split-pane', el),
|
|
614
|
-
} }, index.h("div", { key: '
|
|
636
|
+
} }, index.h("div", { key: '894e680fe227534711128c7aca980964ddb5a08a', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: 'e9f5934518dc0cceaeadf1f2820614595fec6bc9' })), index.h("ion-backdrop", { key: '7282077817657b1bb6c155f1404c0a519fece993', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
|
|
615
637
|
}
|
|
616
638
|
get el() { return index.getElement(this); }
|
|
617
639
|
static get watchers() { return {
|
|
@@ -12,7 +12,7 @@ const helpers = require('./helpers-afaa9001.js');
|
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
13
13
|
const index$4 = require('./index-5915f9b3.js');
|
|
14
14
|
const capacitor = require('./capacitor-c04564bf.js');
|
|
15
|
-
const overlays = require('./overlays-
|
|
15
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
16
16
|
const theme = require('./theme-d1c573d2.js');
|
|
17
17
|
const index$5 = require('./index-f05acd21.js');
|
|
18
18
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
|
-
const overlays = require('./overlays-
|
|
9
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
10
10
|
const frameworkDelegate = require('./framework-delegate-55f5683a.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
12
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
@@ -302,11 +302,16 @@ const RadioGroup = class {
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
}
|
|
305
|
+
/** @internal */
|
|
306
|
+
async setFocus() {
|
|
307
|
+
const radioToFocus = this.getRadios().find((r) => r.tabIndex !== -1);
|
|
308
|
+
radioToFocus === null || radioToFocus === void 0 ? void 0 : radioToFocus.setFocus();
|
|
309
|
+
}
|
|
305
310
|
render() {
|
|
306
311
|
const { label, labelId, el, name, value } = this;
|
|
307
312
|
const mode = ionicGlobal.getIonMode(this);
|
|
308
313
|
helpers.renderHiddenInput(true, el, name, value, false);
|
|
309
|
-
return index.h(index.Host, { key: '
|
|
314
|
+
return index.h(index.Host, { key: 'a853e38901f0f4ba17bbf21ebb5da5b5c20b327e', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
|
|
310
315
|
}
|
|
311
316
|
get el() { return index.getElement(this); }
|
|
312
317
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
7
7
|
|
|
8
8
|
const index = require('./index-73f75efb.js');
|
|
9
9
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
10
|
-
const overlays = require('./overlays-
|
|
10
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
11
11
|
const theme = require('./theme-d1c573d2.js');
|
|
12
12
|
require('./index-c8d52405.js');
|
|
13
13
|
require('./helpers-afaa9001.js');
|
|
@@ -9,7 +9,7 @@ const index = require('./index-73f75efb.js');
|
|
|
9
9
|
const notchController = require('./notch-controller-d69150f5.js');
|
|
10
10
|
const compareWithUtils = require('./compare-with-utils-df1001d7.js');
|
|
11
11
|
const helpers = require('./helpers-afaa9001.js');
|
|
12
|
-
const overlays = require('./overlays-
|
|
12
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
13
13
|
const dir = require('./dir-94c21456.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const watchOptions = require('./watch-options-f5f3e158.js');
|
|
@@ -10,7 +10,7 @@ const config = require('./config-4f60b98a.js');
|
|
|
10
10
|
const helpers = require('./helpers-afaa9001.js');
|
|
11
11
|
const lockController = require('./lock-controller-6585a42a.js');
|
|
12
12
|
const index$1 = require('./index-5915f9b3.js');
|
|
13
|
-
const overlays = require('./overlays-
|
|
13
|
+
const overlays = require('./overlays-aa669eb8.js');
|
|
14
14
|
const theme = require('./theme-d1c573d2.js');
|
|
15
15
|
const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
|
|
16
16
|
const animation = require('./animation-b4fdf128.js');
|