@astryxdesign/core 0.7.4-canary.f32572e → 0.7.4
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/CHANGELOG.md +40 -0
- package/dist/Chat/ChatMessageList.d.ts.map +1 -1
- package/dist/Chat/ChatMessageList.js +8 -1
- package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/CheckboxInput/CheckboxInput.js +6 -0
- package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPalette.js +6 -11
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +7 -1
- package/dist/CommandPalette/CommandPaletteItem.d.ts +1 -0
- package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteItem.js +5 -1
- package/dist/DateInput/DateInput.d.ts +6 -4
- package/dist/DateInput/DateInput.d.ts.map +1 -1
- package/dist/DateInput/DateInput.js +5 -1
- package/dist/DateInput/NativeDateField.d.ts.map +1 -1
- package/dist/DateInput/NativeDateField.js +5 -1
- package/dist/DateInput/TouchDateField.d.ts.map +1 -1
- package/dist/DateInput/TouchDateField.js +5 -1
- package/dist/DateInput/tokens.stylex.d.ts.map +1 -1
- package/dist/DateInput/tokens.stylex.js +3 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +7 -1
- package/dist/FileInput/FileInput.d.ts.map +1 -1
- package/dist/FileInput/FileInput.js +16 -2
- package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
- package/dist/Thumbnail/Thumbnail.js +9 -2
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheet.spec.md +1 -0
- package/src/BottomSheet/BottomSheetEdgeTint.test.tsx +25 -2
- package/src/BottomSheet/BottomSheetSwitcher.spec.md +7 -6
- package/src/BottomSheet/BottomSheetSwitcher.test.tsx +221 -1
- package/src/BottomSheet/__tests__/BottomSheetNativeModal.a11y.browser.spec.ts +461 -0
- package/src/Chat/ChatMessageList.test.tsx +6 -2
- package/src/Chat/ChatMessageList.tsx +7 -1
- package/src/Chat/__tests__/ChatMessageList.a11y.chromium.spec.ts +20 -12
- package/src/CheckboxInput/CheckboxInput.tsx +6 -0
- package/src/CommandPalette/CommandPalette.doc.mjs +4 -1
- package/src/CommandPalette/CommandPalette.test.tsx +4 -2
- package/src/CommandPalette/CommandPalette.tsx +6 -11
- package/src/CommandPalette/CommandPaletteInput.test.tsx +3 -1
- package/src/CommandPalette/CommandPaletteInput.tsx +10 -1
- package/src/CommandPalette/CommandPaletteItem.doc.mjs +17 -5
- package/src/CommandPalette/CommandPaletteItem.test.tsx +65 -12
- package/src/CommandPalette/CommandPaletteItem.tsx +6 -1
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +250 -20
- package/src/DateInput/DateInput.doc.mjs +23 -5
- package/src/DateInput/DateInput.spec.md +52 -45
- package/src/DateInput/DateInput.tsx +13 -7
- package/src/DateInput/NativeDateField.tsx +6 -2
- package/src/DateInput/TouchDateField.tsx +6 -2
- package/src/DateInput/__tests__/DateInputAudit.a11y.chromium.spec.ts +576 -0
- package/src/DateInput/tokens.stylex.ts +3 -1
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +10 -1
- package/src/FileInput/FileInput.tsx +18 -2
- package/src/Overlay/Overlay.spec.md +304 -0
- package/src/Thumbnail/Thumbnail.test.tsx +6 -1
- package/src/Thumbnail/Thumbnail.tsx +12 -3
- package/src/__tests__/BusyOwnerAnnouncement.test.tsx +324 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,45 @@
|
|
|
1
1
|
# @xds/core
|
|
2
2
|
|
|
3
|
+
# 0.7.4
|
|
4
|
+
|
|
5
|
+
#### New Features
|
|
6
|
+
|
|
7
|
+
- `BottomSheetSwitcher` presents each step in its own native `<dialog>`. Every child `BottomSheet` owns a dialog exactly like a standalone sheet; the switcher presents the selected sheet's dialog (`showModal()` with a scrim, `show()` without), keeps the previous sheet's dialog open and inert beneath the entering one through the handoff, and closes it once its panel has faded. One backdrop paints at a time: the retained dialog keeps the scrim until it closes, then the new dialog takes it over without a fade, so the page is never dimmed twice and the previous panel is never dimmed. Focus containment is the browser's own modal-dialog containment (as for `Dialog`) instead of a script trap; the page scroll lock (the shared body lock, held once by the switcher for the whole modal flow, through a handoff and until after the exit), Escape and platform-close routing, `purpose` dismissal rules, and focus return to the opener are unchanged. Going back to a sheet whose dialog is still fading closes and re-presents that dialog so the interactive sheet is the topmost layer again. (#7720)
|
|
8
|
+
Public props, defaults, and exports are unchanged. Two observable details move with the structure: The switcher's `ref` resolves to the dialog hosting the flow — the active sheet's dialog, which changes on a handoff; the exiting sheet's through its exit; and, while the flow is closed, the dialog that hosted it last (or the first mounted sheet's) — instead of one persistent element; it is never `null` while a sheet is mounted, from the first commit on, and a callback ref's returned cleanup runs on each detach. `onCancel` and the forwarded dialog props apply to each sheet's dialog (a `role` given to the switcher included, except on a `required` step, which is an `alertdialog` as before), except `id` and `data-testid`, which render once, on the dialog the `ref` resolves to, from the first commit's synchronous re-render on; server markup of a flow that mounts closed carries them on no element (the shared dialog carried them). A non-modal flow orders its sheet dialogs inside a switcher-owned isolated wrapper that carries the one overlay value the shared dialog carried before.
|
|
9
|
+
|
|
10
|
+
#### Fixes
|
|
11
|
+
|
|
12
|
+
- `TextInput`, `TextArea`, `Selector` and `MultiSelector` announce "Loading" once, politely, through the shared announcement channel when they become busy, and the Spinner they show while busy is hidden from assistive technology. Before, the Spinner mounted as its own `role="status"` region already holding its name, which screen readers often skip, and it competed with the control's own `aria-busy` as a second owner of the same feedback. A rerender or StrictMode replay does not repeat the announcement; settling and becoming busy again announces again. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the control's `aria-busy` instead. (#7920)
|
|
13
|
+
- Carousel: when the focused edge scroll button runs out (the carousel reached that edge), focus now moves to the scroll area without scrolling it, instead of to the opposite scroll button. No API changes. (#7926)
|
|
14
|
+
- `CheckboxInput` announces its busy start ("Loading") once, politely, through the shared announcement channel. The Spinner it shows in place of the check mark while busy sits inside the decorative, hidden indicator, so before this nothing told screen-reader users that the checkbox had become busy beyond its `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. (#7948)
|
|
15
|
+
- `CommandPaletteItem` now reflects its highlighted, selected, and disabled states on the `command-palette-item` theme target as `data-highlighted="highlighted"`, `data-selected="selected"`, and `data-disabled="disabled"`. A theme can now style the active keyboard result, the chosen value, or an unavailable command, for example `.astryx-command-palette-item[data-selected]`. States derived from CommandPalette are reflected too. Rendering, semantics, and props are unchanged. (#7967)
|
|
16
|
+
- `CommandPalette` announces each busy start ("Loading"), including its load on opening or clearing the query, once from a status region inside its dialog, and its search Spinner is hidden from assistive technology. Before, the Spinner mounted as its own `role="status"` region already named "Loading", and the palette's own "Loading" went to the page-level announcement channel, which an open native modal hides from assistive technology. Result-count announcements are unchanged. Tests that found the Spinner with `getByRole('status')` should query the Spinner element instead. (#7956)
|
|
17
|
+
- A busy `DateInput` (`isLoading`, or a pending `changeAction`) no longer looks disabled. On the popover, native, and bottom-sheet surfaces the field keeps its ordinary paint and shows its Spinner while new commits are blocked; only `isDisabled` dims the field. The busy field still takes no hover ring and keeps its keyboard focus ring. Props, semantics, and announcements are unchanged. (#7968)
|
|
18
|
+
- `DateInput` (popover, native and bottom-sheet presentations) and `DateRangeInput` announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the field's `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7939)
|
|
19
|
+
- `DateTimeInput` and `TimeInput` (popover, native and bottom-sheet presentations) announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the field's `aria-busy`. A change made inside the open bottom sheet under a pending `changeAction` is announced from inside the sheet. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7942)
|
|
20
|
+
- `FileInput` announces its busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner it shows while busy is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip. A file pick keeps its single "file selected" announcement, because it is one user action, even when it starts a busy period (`changeAction`, or `isLoading` set from `onChange`). Other busy starts, such as `isLoading` on its own or a clear under `changeAction`, announce "Loading". Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the field's `aria-busy` instead. (#7954)
|
|
21
|
+
- Selector, DropdownMenu and ContextMenu: clicking an option inside a shadow root (open, closed or nested) selects it. The menus used to read the document's view of the click, which names the shadow host, so the click closed the menu without selecting anything. (#7914)
|
|
22
|
+
- `DropdownMenuSubMenu` (with `hasSpinner`), an uploading `Thumbnail`, and `ChatMessageList` while it loads older messages announce their busy start ("Loading") once, politely, through the shared announcement channel. The Spinner each one shows is hidden from assistive technology. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip; in `ChatMessageList` it was also a second live role inside the log. Tests that found these Spinners with `getByRole('status', {name: 'Loading'})` should query the Spinner element or the owner's busy state instead. (#7950)
|
|
23
|
+
- ChatComposerInput: the trigger menu's loading row no longer mounts as a `role="status"` region already holding its text, which screen readers could skip. The loading text is announced once per pending search through the shared polite channel instead, and a search that returns its results before the loading row is painted, such as `createStaticSource` or a cached result, announces nothing; the visible row and its `loadingText` are unchanged. (#7900)
|
|
24
|
+
Fixes #7859.
|
|
25
|
+
- useTypeahead clears its pending buffer reset when its component unmounts or an `<Activity>` boundary hides it, so a menu, list or selector removed within 750 ms of a typed character leaves no timer running behind it, and a hidden one comes back with an empty buffer (#7938)
|
|
26
|
+
- `ComplexSelector`, `Typeahead`, `Tokenizer` and a directly used `BaseTypeahead` announce their busy start ("Loading") once, politely, through the shared announcement channel, and the Spinner they show while busy or while a search is in flight is no longer a live region: ComplexSelector's is hidden from assistive technology, and the search Spinner of Typeahead, Tokenizer and BaseTypeahead stays named as an image ("Loading") so the search's busy feedback keeps its name. Before, that Spinner mounted as its own `role="status"` region already named "Loading", which screen readers often skip, and it was a second owner beside the control's `aria-busy`. Inside an open modal dialog the announcement goes to a status region in the dialog. Tests that found the busy Spinner with `getByRole('status', {name: 'Loading'})` should check the control's `aria-busy`, or find the search Spinner with `getByRole('img', {name: 'Loading'})`. (#7930)
|
|
27
|
+
|
|
28
|
+
#### Documentation
|
|
29
|
+
|
|
30
|
+
- `BottomSheetSwitcher` anatomy names its host part `Sheet dialogs` — one native dialog per child sheet, the one hosting the active sheet carrying the flow's ref, id, modality, and dismissal — instead of `Shared dialog`. (#7720)
|
|
31
|
+
|
|
32
|
+
#### Contributors
|
|
33
|
+
|
|
34
|
+
Thanks to everyone who contributed to this release:
|
|
35
|
+
|
|
36
|
+
- @cixzhang
|
|
37
|
+
- @HelloOjasMutreja
|
|
38
|
+
- @imdreamrunner
|
|
39
|
+
- @vjeux
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
3
43
|
# 0.7.3
|
|
4
44
|
|
|
5
45
|
#### New Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"ChatMessageList.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatMessageList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAA4C,MAAM,OAAO,CAAC;AAGhF,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,MAAM,WAAW,oBAAqB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACrE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAElB;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAEzB;;;;;;;;;;;OAWG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4FD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,OAAoB,EACpB,GAAG,EACH,KAAgB,EAChB,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAoGtB;yBAlHe,eAAe"}
|
|
@@ -31,6 +31,8 @@ import { ChatListContext, useChatLayoutContext } from "./ChatContext.js";
|
|
|
31
31
|
import { isRenderable, mergeProps } from "../utils/index.js";
|
|
32
32
|
import { Spinner } from "../Spinner/index.js";
|
|
33
33
|
import { themeProps } from "../utils/themeProps.js";
|
|
34
|
+
import { useTranslator } from "../i18n/index.js";
|
|
35
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
34
36
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
35
37
|
// =============================================================================
|
|
36
38
|
// Styles
|
|
@@ -161,6 +163,10 @@ export function ChatMessageList({
|
|
|
161
163
|
const sentinelRef = useRef(null);
|
|
162
164
|
const innerRef = useRef(null);
|
|
163
165
|
const [isLoadingTop, startTransition] = useTransition();
|
|
166
|
+
const t = useTranslator();
|
|
167
|
+
// The top loading Spinner sits inside the log and is silent; the list
|
|
168
|
+
// announces its loading through the channel (spec:AST-086 FR4, FR8).
|
|
169
|
+
useBusyAnnouncement(isLoadingTop, t('@astryx.spinner.loading'), innerRef);
|
|
164
170
|
|
|
165
171
|
// Register inner content element with the layout for height observation
|
|
166
172
|
useEffect(() => {
|
|
@@ -219,7 +225,8 @@ export function ChatMessageList({
|
|
|
219
225
|
className: "x78zum5 xl56j7k x8o8v82"
|
|
220
226
|
},
|
|
221
227
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
222
|
-
size: "md"
|
|
228
|
+
size: "md",
|
|
229
|
+
"aria-hidden": "true"
|
|
223
230
|
})
|
|
224
231
|
}), align === 'bottom' && /*#__PURE__*/_jsx("div", {
|
|
225
232
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.d.ts","sourceRoot":"","sources":["../../src/CheckboxInput/CheckboxInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,9 @@ import { mergeProps, rtlStyles } from "../utils/index.js";
|
|
|
27
27
|
import "../Indicator/indicator.markers.stylex.js";
|
|
28
28
|
import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
|
|
29
29
|
import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
|
|
30
|
+
import { useTranslator } from "../i18n/index.js";
|
|
30
31
|
import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
|
|
32
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
31
33
|
import { usePressFeedback } from "../hooks/usePressFeedback.js";
|
|
32
34
|
import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
|
|
33
35
|
import { useIndicator } from "../Indicator/index.js";
|
|
@@ -195,6 +197,10 @@ export function CheckboxInput({
|
|
|
195
197
|
// `opacity: 0`, and only the indicator's own element can shape the outline
|
|
196
198
|
// to match it. See useIndicatorFocusRing.
|
|
197
199
|
const indicatorRef = useRef(null);
|
|
200
|
+
const t = useTranslator();
|
|
201
|
+
// The busy Spinner sits in the decorative, aria-hidden indicator, so this
|
|
202
|
+
// control announces its busy start itself (spec:AST-086 FR8).
|
|
203
|
+
useBusyAnnouncement(isBusy, t('@astryx.spinner.loading'), indicatorRef);
|
|
198
204
|
const {
|
|
199
205
|
focusProps
|
|
200
206
|
} = useIndicatorFocusRing(indicatorRef);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+
|
|
1
|
+
{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAsYxB;yBAvZe,cAAc"}
|
|
@@ -205,11 +205,11 @@ export function CommandPalette({
|
|
|
205
205
|
const searchVersionRef = useRef(0);
|
|
206
206
|
const emptyStateRef = useRef(null);
|
|
207
207
|
|
|
208
|
-
// Announce search
|
|
208
|
+
// Announce search results to screen readers through the shared polite live
|
|
209
209
|
// region (comboboxes-7 announce path, mirroring Selector / BaseTypeahead).
|
|
210
|
-
// The
|
|
211
|
-
//
|
|
212
|
-
//
|
|
210
|
+
// The empty states are otherwise purely visual, so a screen-reader user
|
|
211
|
+
// typing a query would hear nothing when results disappear. The busy start
|
|
212
|
+
// is announced by CommandPaletteInput.
|
|
213
213
|
const announce = useAnnounce();
|
|
214
214
|
const value = controlledValue ?? internalValue;
|
|
215
215
|
const setValue = useCallback(newValue => {
|
|
@@ -278,13 +278,8 @@ export function CommandPalette({
|
|
|
278
278
|
startTransition(async () => {
|
|
279
279
|
const isBootstrap = query === '';
|
|
280
280
|
|
|
281
|
-
//
|
|
282
|
-
//
|
|
283
|
-
// fast sources the result-count announcement below simply replaces
|
|
284
|
-
// this instead of stacking one "Loading" per keystroke.
|
|
285
|
-
if (!isBootstrap) {
|
|
286
|
-
announce(t('@astryx.commandPalette.loading'));
|
|
287
|
-
}
|
|
281
|
+
// The busy start ("Loading") is announced by CommandPaletteInput,
|
|
282
|
+
// from a region inside the palette's dialog (spec:AST-086 FR8, FR3).
|
|
288
283
|
|
|
289
284
|
// Client-filter previous results for instant narrowing while fetch is in flight
|
|
290
285
|
if (!isBootstrap && searchResults.length > 0) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA2K1B;yBA3Le,mBAAmB"}
|
|
@@ -27,6 +27,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
|
|
|
27
27
|
import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
|
|
28
28
|
import { useTranslator } from "../i18n/index.js";
|
|
29
29
|
import { useMergedRefs } from "../hooks/useMergedRefs.js";
|
|
30
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
30
31
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
31
32
|
const styles = {
|
|
32
33
|
wrapper: {
|
|
@@ -97,6 +98,10 @@ export function CommandPaletteInput({
|
|
|
97
98
|
const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
|
|
98
99
|
const dialogContext = useDialogContext();
|
|
99
100
|
const inputRef = useRef(null);
|
|
101
|
+
// The search Spinner is decorative; the input announces each busy start,
|
|
102
|
+
// including the load on opening or clearing the query. Inside the palette's
|
|
103
|
+
// native modal it does so from a region in the dialog (spec:AST-086 FR8, FR3).
|
|
104
|
+
useBusyAnnouncement(ctx?.isBusy === true, t('@astryx.commandPalette.loading'), inputRef);
|
|
100
105
|
const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
|
|
101
106
|
|
|
102
107
|
// Text-entry controls match :focus-visible after pointer focus in Chromium.
|
|
@@ -195,7 +200,8 @@ export function CommandPaletteInput({
|
|
|
195
200
|
className: "x78zum5 x6s0dn4 x2lah0s xv1l7n4 x1hc1fzr x19991ni xjd9b36 x5h36tt x4itv7f"
|
|
196
201
|
},
|
|
197
202
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
198
|
-
size: "sm"
|
|
203
|
+
size: "sm",
|
|
204
|
+
"aria-hidden": "true"
|
|
199
205
|
})
|
|
200
206
|
}), hasEndContent && endContent]
|
|
201
207
|
})]
|
|
@@ -28,6 +28,7 @@ export interface CommandPaletteItemProps extends Omit<BaseProps<HTMLDivElement>,
|
|
|
28
28
|
isHighlighted?: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* Whether this item is currently selected (picker mode).
|
|
31
|
+
* When omitted inside CommandPalette, derived from the palette value.
|
|
31
32
|
* @default false
|
|
32
33
|
*/
|
|
33
34
|
isSelected?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqD5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB
|
|
1
|
+
{"version":3,"file":"CommandPaletteItem.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteItem.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAA0C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqD5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,GAAG,UAAU,CACxB;IACC,yCAAyC;IACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,kBAAkB,EAC9B,UAAkB,EAClB,QAAQ,EACR,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,GAAG,KAAK,EACT,EAAE,uBAAuB,+BAwFzB;yBAvGe,kBAAkB"}
|
|
@@ -148,7 +148,11 @@ export function CommandPaletteItem({
|
|
|
148
148
|
...pressable,
|
|
149
149
|
onClick: isDisabled ? undefined : composeEventHandlers(onClickProp, handleClick),
|
|
150
150
|
onMouseEnter: onMouseEnterProp,
|
|
151
|
-
...mergeProps(themeProps('command-palette-item'
|
|
151
|
+
...mergeProps(themeProps('command-palette-item', {
|
|
152
|
+
highlighted: isHighlighted ? 'highlighted' : null,
|
|
153
|
+
selected: isSelected ? 'selected' : null,
|
|
154
|
+
disabled: isDisabled ? 'disabled' : null
|
|
155
|
+
}), stylex.props(styles.item, !isDisabled && interactionOverlayStyles.backgroundColor, isHighlighted && styles.itemHighlighted, isSelected && styles.itemSelected, isDisabled && styles.itemDisabled, xstyle), className, style),
|
|
152
156
|
children: children
|
|
153
157
|
});
|
|
154
158
|
}
|
|
@@ -116,7 +116,9 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
|
|
|
116
116
|
*/
|
|
117
117
|
changeAction?: (value: ISODateString | undefined) => void | Promise<void>;
|
|
118
118
|
/**
|
|
119
|
-
* Whether the input is in a loading state.
|
|
119
|
+
* Whether the input is in a loading state. The field stays focusable and
|
|
120
|
+
* exposes `aria-busy` with a Spinner; typing, picking, and clearing are
|
|
121
|
+
* blocked until loading ends.
|
|
120
122
|
* @default false
|
|
121
123
|
*/
|
|
122
124
|
isLoading?: boolean;
|
|
@@ -138,9 +140,9 @@ export interface DateInputProps extends Omit<FieldInputBaseProps<HTMLInputElemen
|
|
|
138
140
|
*/
|
|
139
141
|
placeholder?: string;
|
|
140
142
|
/**
|
|
141
|
-
* The size of the input.
|
|
142
|
-
*
|
|
143
|
-
* -
|
|
143
|
+
* The size of the input. The field height follows the theme's element-size
|
|
144
|
+
* token for the chosen size (`--size-element-sm`, `--size-element-md`, or
|
|
145
|
+
* `--size-element-lg`).
|
|
144
146
|
* @default 'md'
|
|
145
147
|
*/
|
|
146
148
|
size?: DateInputSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,OAAO,EAGL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,EAEL,KAAK,aAAa,EAElB,KAAK,SAAS,EACd,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAiBrB,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAGL,KAAK,kBAAkB,EACxB,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -456,7 +456,11 @@ function PointerDateField({
|
|
|
456
456
|
size,
|
|
457
457
|
status: status?.type ?? null,
|
|
458
458
|
disabled: isDisabled ? 'disabled' : null
|
|
459
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size],
|
|
459
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size],
|
|
460
|
+
// Disabled paint belongs to the disabled state only; a busy field
|
|
461
|
+
// keeps its ordinary paint and shows the Spinner (spec:AST-085
|
|
462
|
+
// FR6, family:buttons FR4).
|
|
463
|
+
isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
460
464
|
children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
461
465
|
id: inputLabelID,
|
|
462
466
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"NativeDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/NativeDateField.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA0NhD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAGhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,aAAa,EAC3B,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAubhB;yBA1de,eAAe"}
|
|
@@ -405,7 +405,11 @@ export function NativeDateField({
|
|
|
405
405
|
size,
|
|
406
406
|
status: status?.type ?? null,
|
|
407
407
|
disabled: isDisabled ? 'disabled' : null
|
|
408
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper,
|
|
408
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper,
|
|
409
|
+
// Disabled paint belongs to the disabled state only; a busy field
|
|
410
|
+
// keeps its ordinary paint and shows the Spinner (spec:AST-085
|
|
411
|
+
// FR6, family:buttons FR4).
|
|
412
|
+
isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
409
413
|
children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
410
414
|
id: inputLabelID,
|
|
411
415
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"TouchDateField.d.ts","sourceRoot":"","sources":["../../src/DateInput/TouchDateField.tsx"],"names":[],"mappings":"AAgEA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AA6ehD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,QAAgB,EAIhB,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,MAAoB,EACpB,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,cAAc,+BAqwBhB;yBAzyBe,cAAc"}
|
|
@@ -802,7 +802,11 @@ export function TouchDateField({
|
|
|
802
802
|
size,
|
|
803
803
|
status: status?.type ?? null,
|
|
804
804
|
disabled: isDisabled ? 'disabled' : null
|
|
805
|
-
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper,
|
|
805
|
+
}), stylex.props(inputWrapperStyles.base, sizeStyles[size], styles.wrapper,
|
|
806
|
+
// Disabled paint belongs to the disabled state only; a busy field
|
|
807
|
+
// keeps its ordinary paint and shows the Spinner (spec:AST-085
|
|
808
|
+
// FR6, family:buttons FR4).
|
|
809
|
+
isDisabled && inputWrapperStyles.disabled, isEffectivelyDisabled && styles.disabledFocusRing, status && inputStatusBorderStyles[status.type], status && !isEffectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, controlXstyle), controlClassName, controlStyle),
|
|
806
810
|
children: [inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
807
811
|
id: inputLabelID,
|
|
808
812
|
children: label
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/DateInput/tokens.stylex.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"tokens.stylex.d.ts","sourceRoot":"","sources":["../../src/DateInput/tokens.stylex.ts"],"names":[],"mappings":"AA8BA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,mBAAmB;IAC9B;;;OAGG;;IAEH;;;;;;;;;;;;;;OAcG;;CAEH,CAAC;AASH,0EAA0E;AAC1E,eAAO,MAAM,sBAAsB;IACjC,yEAAyE;;IAEzE,6CAA6C;;IAE7C;;;OAGG;;CAEH,CAAC"}
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
* @file tokens.stylex.ts
|
|
5
5
|
* @input StyleX variable and constant definitions
|
|
6
6
|
* @output Exports DateInput layout constants and derived geometry
|
|
7
|
-
* @position
|
|
7
|
+
* @position Core touch-picker geometry consumed by the DateInput touch surface
|
|
8
|
+
* (TouchDateField, MonthScroller, Wheel, MonthYearWheels) and by the
|
|
9
|
+
* DateTimeInput and TimeInput touch fields
|
|
8
10
|
*
|
|
9
11
|
* The picker's whole geometry derives from two numbers, which is what makes
|
|
10
12
|
* the fixed height and the scroll snapping exact:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAyC5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6N5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAg5BX;yBAl5Be,mBAAmB"}
|
|
@@ -61,6 +61,7 @@ import { Item } from "../Item/index.js";
|
|
|
61
61
|
import { useLayer } from "../Layer/useLayer.js";
|
|
62
62
|
import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
|
|
63
63
|
import { useListFocus } from "../hooks/useListFocus.js";
|
|
64
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
64
65
|
import { useMenuHover } from "../hooks/useMenuHover.js";
|
|
65
66
|
import { isMenuPressActivation, MENU_PRESS_SURFACE_ATTR, useMenuPress } from "../hooks/useMenuPress.js";
|
|
66
67
|
import { useTypeahead } from "../hooks/useTypeahead.js";
|
|
@@ -461,6 +462,10 @@ export function DropdownMenuSubMenu(props) {
|
|
|
461
462
|
// closed from elsewhere is cancelled instead of firing into the hidden
|
|
462
463
|
// menu (#6893).
|
|
463
464
|
const isRootMenuOpen = useDropdownMenuRootOpen();
|
|
465
|
+
// The loading Spinner on the trigger is decorative; the submenu announces
|
|
466
|
+
// its busy start instead (spec:AST-086 FR8), once its level is shown: a
|
|
467
|
+
// closed menu stays mounted but hidden, and announces nothing.
|
|
468
|
+
useBusyAnnouncement(hasSpinner && isRootMenuOpen, t('@astryx.spinner.loading'), triggerRef);
|
|
464
469
|
const {
|
|
465
470
|
triggerProps,
|
|
466
471
|
contentProps,
|
|
@@ -761,7 +766,8 @@ export function DropdownMenuSubMenu(props) {
|
|
|
761
766
|
className: "x78zum5 x6s0dn4"
|
|
762
767
|
},
|
|
763
768
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
764
|
-
size: "sm"
|
|
769
|
+
size: "sm",
|
|
770
|
+
"aria-hidden": "true"
|
|
765
771
|
})
|
|
766
772
|
}) : /*#__PURE__*/_jsx("span", {
|
|
767
773
|
...{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAUlB,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAmP9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,EACnB,UAAU,GAAG,cAAc,GAAG,OAAO,CACtC;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,SAAiB,EACjB,MAAM,EAAE,UAAU,EAClB,aAA0B,EAC1B,WAAW,EACX,WAAW,EACX,IAAc,EACd,UAAkB,EAClB,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EAAE,MAAM,EACV,GAAG,SAAS,EACb,EAAE,cAAc,+BAmdhB;yBAlfe,SAAS"}
|
|
@@ -24,6 +24,7 @@ import { Icon } from "../Icon/index.js";
|
|
|
24
24
|
import { Spinner } from "../Spinner/index.js";
|
|
25
25
|
import { VisuallyHidden } from "../VisuallyHidden/index.js";
|
|
26
26
|
import { useAnnounce } from "../hooks/useAnnounce.js";
|
|
27
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
27
28
|
import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
|
|
28
29
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
29
30
|
import { useTooltip } from "../Tooltip/index.js";
|
|
@@ -232,6 +233,16 @@ export function FileInput({
|
|
|
232
233
|
const [, startTransition] = useTransition();
|
|
233
234
|
const [optimisticValue, setOptimisticValue] = useOptimistic(value);
|
|
234
235
|
const isBusy = isLoading || optimisticValue !== value;
|
|
236
|
+
// A pick is one user action, already announced as "file selected"; a busy
|
|
237
|
+
// period it starts (changeAction, or a caller setting isLoading from
|
|
238
|
+
// onChange) adds no second message (spec:AST-086 FR6). The mark lasts until
|
|
239
|
+
// the field is idle again. Other busy starts announce; the Spinner stays
|
|
240
|
+
// decorative (FR8).
|
|
241
|
+
const [isPickAnnounced, setIsPickAnnounced] = useState(false);
|
|
242
|
+
if (isPickAnnounced && !isBusy) {
|
|
243
|
+
setIsPickAnnounced(false);
|
|
244
|
+
}
|
|
245
|
+
useBusyAnnouncement(isBusy && !isPickAnnounced, t('@astryx.spinner.loading'), containerRef);
|
|
235
246
|
|
|
236
247
|
// Announce successful file selection to screen readers via a persistent
|
|
237
248
|
// live region (forms-17). Validation errors are announced (assertively) by
|
|
@@ -299,6 +310,7 @@ export function FileInput({
|
|
|
299
310
|
// status mounts, so only announce the attach here (do not
|
|
300
311
|
// double-announce errors).
|
|
301
312
|
if (errors.length === 0) {
|
|
313
|
+
setIsPickAnnounced(true);
|
|
302
314
|
announce(valid.length === 1 ? t('@astryx.fileInput.fileSelected', {
|
|
303
315
|
fileName: valid[0].name
|
|
304
316
|
}) : t('@astryx.fileInput.filesSelected', {
|
|
@@ -414,7 +426,8 @@ export function FileInput({
|
|
|
414
426
|
const renderDropzoneContent = () => {
|
|
415
427
|
if (isBusy) {
|
|
416
428
|
return /*#__PURE__*/_jsx(Spinner, {
|
|
417
|
-
size: "md"
|
|
429
|
+
size: "md",
|
|
430
|
+
"aria-hidden": "true"
|
|
418
431
|
});
|
|
419
432
|
}
|
|
420
433
|
if (hasFiles) {
|
|
@@ -450,7 +463,8 @@ export function FileInput({
|
|
|
450
463
|
},
|
|
451
464
|
children: fileNames ?? displayPlaceholder
|
|
452
465
|
}), /*#__PURE__*/_jsx(Spinner, {
|
|
453
|
-
size: "sm"
|
|
466
|
+
size: "sm",
|
|
467
|
+
"aria-hidden": "true"
|
|
454
468
|
})]
|
|
455
469
|
});
|
|
456
470
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Thumbnail.d.ts","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;;;;;OASG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAClC;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA6LD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAsB,EACtB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,+BA2JhB;yBA1Ke,SAAS"}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* - /apps/storybook/stories/Thumbnail.stories.tsx
|
|
25
25
|
* - /packages/cli/assets/templates/blocks/components/Thumbnail/ (showcase blocks)
|
|
26
26
|
*/
|
|
27
|
-
import { useState } from 'react';
|
|
27
|
+
import { useRef, useState } from 'react';
|
|
28
28
|
import * as stylex from '@stylexjs/stylex';
|
|
29
29
|
import "../theme/tokens.stylex.js";
|
|
30
30
|
import { colorVars, radiusVars, spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
@@ -34,6 +34,7 @@ import { Skeleton } from "../Skeleton/index.js";
|
|
|
34
34
|
import { Spinner } from "../Spinner/index.js";
|
|
35
35
|
import { Tooltip } from "../Tooltip/Tooltip.js";
|
|
36
36
|
import { useDevWarning } from "../hooks/useDevWarning.js";
|
|
37
|
+
import { useBusyAnnouncement } from "../hooks/useBusyAnnouncement.js";
|
|
37
38
|
import { useContainerReveal } from "../hooks/useContainerReveal.js";
|
|
38
39
|
import { mergeProps } from "../utils/index.js";
|
|
39
40
|
import { themeProps } from "../utils/themeProps.js";
|
|
@@ -175,6 +176,10 @@ export function Thumbnail({
|
|
|
175
176
|
const showSkeleton = isLoading && !hasSrc;
|
|
176
177
|
const showImage = hasSrc && !showSkeleton && !hasError;
|
|
177
178
|
const showUploadOverlay = isLoading && hasSrc;
|
|
179
|
+
const uploadOverlayRef = useRef(null);
|
|
180
|
+
// The upload Spinner is decorative; the thumbnail announces its busy start
|
|
181
|
+
// instead (spec:AST-086 FR8).
|
|
182
|
+
useBusyAnnouncement(showUploadOverlay, t('@astryx.spinner.loading'), uploadOverlayRef);
|
|
178
183
|
const showPlaceholder = !isLoading && !hasSrc || hasError;
|
|
179
184
|
const isInteractive = onClick != null && !isDisabled && !isLoading;
|
|
180
185
|
const hasRemove = onRemove != null && !isDisabled;
|
|
@@ -273,12 +278,14 @@ export function Thumbnail({
|
|
|
273
278
|
className: "x10l6tqk x10a8y8t x1pjcqnp x1er153n x47corl"
|
|
274
279
|
}
|
|
275
280
|
}), showUploadOverlay && /*#__PURE__*/_jsx("div", {
|
|
281
|
+
ref: uploadOverlayRef,
|
|
276
282
|
...{
|
|
277
283
|
className: "x10l6tqk x10a8y8t x78zum5 x6s0dn4 xl56j7k x1u4601x x1pjcqnp x1vjfegm x14ju556"
|
|
278
284
|
},
|
|
279
285
|
children: /*#__PURE__*/_jsx(Spinner, {
|
|
280
286
|
size: "sm",
|
|
281
|
-
shade: "onMedia"
|
|
287
|
+
shade: "onMedia",
|
|
288
|
+
"aria-hidden": "true"
|
|
282
289
|
})
|
|
283
290
|
}), removeButtonEl]
|
|
284
291
|
})
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/core",
|
|
3
|
-
"version": "0.7.4
|
|
3
|
+
"version": "0.7.4",
|
|
4
4
|
"displayName": "Astryx Core",
|
|
5
5
|
"description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
|
|
6
6
|
"author": "Meta Open Source",
|
|
@@ -792,8 +792,6 @@
|
|
|
792
792
|
"react-dom": ">=19.0.0"
|
|
793
793
|
},
|
|
794
794
|
"devDependencies": {
|
|
795
|
-
"@astryxdesign/a11y-spec": "0.7.4-canary.f32572e",
|
|
796
|
-
"@astryxdesign/cli": "0.7.4-canary.f32572e",
|
|
797
795
|
"@babel/cli": "^7.29.7",
|
|
798
796
|
"@babel/core": "^7.29.7",
|
|
799
797
|
"@babel/preset-react": "^7.29.7",
|
|
@@ -804,7 +802,9 @@
|
|
|
804
802
|
"@testing-library/jest-dom": "^6.6.0",
|
|
805
803
|
"@testing-library/react": "^16.3.2",
|
|
806
804
|
"@types/babel__core": "^7.20.5",
|
|
807
|
-
"tailwindcss": "^4.3.2"
|
|
805
|
+
"tailwindcss": "^4.3.2",
|
|
806
|
+
"@astryxdesign/a11y-spec": "0.0.0",
|
|
807
|
+
"@astryxdesign/cli": "0.7.4"
|
|
808
808
|
},
|
|
809
809
|
"dependencies": {
|
|
810
810
|
"intl-messageformat": "^11.2.9"
|
|
@@ -15,6 +15,7 @@ verified_by:
|
|
|
15
15
|
packages/core/src/BottomSheet/BottomSheet.test.tsx,
|
|
16
16
|
packages/core/src/BottomSheet/BottomSheetPanel.test.tsx,
|
|
17
17
|
packages/core/src/BottomSheet/BottomSheetKeyboard.test.tsx,
|
|
18
|
+
packages/core/src/BottomSheet/__tests__/BottomSheetNativeModal.a11y.browser.spec.ts,
|
|
18
19
|
packages/core/src/BottomSheet/__tests__/BottomSheetKeyboard.a11y.browser.spec.ts,
|
|
19
20
|
apps/storybook/stories/BottomSheet.stories.tsx,
|
|
20
21
|
scripts/check-knowledge.mjs,
|
|
@@ -148,15 +148,38 @@ describe('BottomSheetEdgeTint', () => {
|
|
|
148
148
|
expect(tints()).toHaveLength(1);
|
|
149
149
|
});
|
|
150
150
|
|
|
151
|
-
it('gives a modal switcher flow exactly one tint', () => {
|
|
152
|
-
render(
|
|
151
|
+
it('gives a modal switcher flow exactly one tint at rest, and one per presented dialog through a handoff', () => {
|
|
152
|
+
const {rerender} = render(
|
|
153
153
|
<BottomSheetSwitcher activeSheet="comment" onActiveSheetChange={() => {}}>
|
|
154
154
|
<BottomSheet sheetId="comment" label="Add a comment">
|
|
155
155
|
Comment
|
|
156
156
|
</BottomSheet>
|
|
157
|
+
<BottomSheet sheetId="confirmation" label="Confirmation">
|
|
158
|
+
Confirmation
|
|
159
|
+
</BottomSheet>
|
|
157
160
|
</BottomSheetSwitcher>,
|
|
158
161
|
);
|
|
159
162
|
expect(tints()).toHaveLength(1);
|
|
163
|
+
expect(tints()[0]?.closest('dialog')?.getAttribute('aria-label')).toBe(
|
|
164
|
+
'Add a comment',
|
|
165
|
+
);
|
|
166
|
+
|
|
167
|
+
rerender(
|
|
168
|
+
<BottomSheetSwitcher
|
|
169
|
+
activeSheet="confirmation"
|
|
170
|
+
onActiveSheetChange={() => {}}>
|
|
171
|
+
<BottomSheet sheetId="comment" label="Add a comment">
|
|
172
|
+
Comment
|
|
173
|
+
</BottomSheet>
|
|
174
|
+
<BottomSheet sheetId="confirmation" label="Confirmation">
|
|
175
|
+
Confirmation
|
|
176
|
+
</BottomSheet>
|
|
177
|
+
</BottomSheetSwitcher>,
|
|
178
|
+
);
|
|
179
|
+
// Mid-handoff both dialogs are presented; each carries its own tint.
|
|
180
|
+
expect(
|
|
181
|
+
tints().map(tint => tint.closest('dialog')?.getAttribute('aria-label')),
|
|
182
|
+
).toEqual(['Add a comment', 'Confirmation']);
|
|
160
183
|
});
|
|
161
184
|
|
|
162
185
|
it('keeps the tint out of the accessibility tree and out of hit testing', async () => {
|