@astryxdesign/core 0.7.0 → 0.7.1-canary.0365e23
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/dist/BottomSheet/BottomSheet.d.ts +1 -1
- package/dist/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +12 -2
- package/dist/CodeBlock/CodeBlock.d.ts +10 -1
- package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
- package/dist/CodeBlock/CodeBlock.js +158 -38
- package/dist/CodeBlock/tokenizer.d.ts +39 -0
- package/dist/CodeBlock/tokenizer.d.ts.map +1 -1
- package/dist/CodeBlock/tokenizer.js +108 -0
- package/dist/ContextMenu/ContextMenu.d.ts +1 -1
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +22 -8
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +3 -26
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +10 -3
- package/dist/Markdown/Markdown.d.ts.map +1 -1
- package/dist/Markdown/Markdown.js +19 -3
- package/dist/Typeahead/BaseTypeahead.d.ts +1 -1
- package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
- package/dist/Typeahead/BaseTypeahead.js +12 -3
- package/dist/astryx.css +13 -0
- package/dist/hooks/useIsomorphicLayoutEffect.d.ts +2 -2
- package/dist/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -1
- package/dist/theme/syntax/SyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/SyntaxTheme.js +43 -2
- package/dist/theme/syntax/defineSyntaxTheme.d.ts +18 -5
- package/dist/theme/syntax/defineSyntaxTheme.d.ts.map +1 -1
- package/dist/theme/syntax/defineSyntaxTheme.js +38 -9
- package/dist/theme/syntax/index.d.ts +1 -1
- package/dist/theme/syntax/index.d.ts.map +1 -1
- package/dist/theme/syntax/tokens.d.ts +12 -2
- package/dist/theme/syntax/tokens.d.ts.map +1 -1
- package/dist/theme/syntax/tokens.js +25 -4
- package/dist/utils/focusReturn.d.ts +12 -8
- package/dist/utils/focusReturn.d.ts.map +1 -1
- package/dist/utils/focusReturn.js +44 -3
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheet.test.tsx +114 -0
- package/src/BottomSheet/BottomSheet.tsx +12 -2
- package/src/BottomSheet/__tests__/BottomSheetFocusReturn.a11y.browser.spec.ts +96 -0
- package/src/Chat/__tests__/ChatLayoutScrollButtonSurface.a11y.chromium.spec.ts +5 -6
- package/src/CodeBlock/CodeBlock.doc.mjs +7 -0
- package/src/CodeBlock/CodeBlock.spec.md +55 -45
- package/src/CodeBlock/CodeBlock.test.tsx +89 -9
- package/src/CodeBlock/CodeBlock.tsx +205 -25
- package/src/CodeBlock/__tests__/CodeBlockOverflowStop.a11y.chromium.spec.ts +125 -0
- package/src/CodeBlock/__tests__/DiffRowPaint.a11y.chromium.spec.ts +93 -0
- package/src/CodeBlock/tokenizer.test.ts +112 -0
- package/src/CodeBlock/tokenizer.ts +106 -0
- package/src/ContextMenu/ContextMenu.spec.md +1 -1
- package/src/ContextMenu/ContextMenu.test.tsx +36 -3
- package/src/ContextMenu/ContextMenu.tsx +27 -11
- package/src/ContextMenu/__tests__/ContextMenuCursorAnchor.a11y.browser.spec.ts +153 -0
- package/src/Dialog/Dialog.tsx +2 -30
- package/src/Dialog/__tests__/Dialog.a11y.chromium.spec.ts +21 -14
- package/src/DropdownMenu/DropdownMenu.test.tsx +97 -1
- package/src/DropdownMenu/DropdownMenu.tsx +10 -3
- package/src/DropdownMenu/__tests__/DropdownMenuFocusReturn.a11y.browser.spec.ts +73 -0
- package/src/FieldStatus/__tests__/StatusMessage.a11y.chromium.spec.ts +21 -14
- package/src/Markdown/Markdown.spec.md +37 -23
- package/src/Markdown/Markdown.test.tsx +38 -0
- package/src/Markdown/Markdown.tsx +20 -2
- package/src/Markdown/plugins/semanticFence.test.tsx +3 -2
- package/src/NumberInput/__tests__/NumberInput.a11y.chromium.spec.ts +22 -15
- package/src/PowerSearch/PowerSearch.test.tsx +45 -0
- package/src/Switch/__tests__/Switch.a11y.chromium.spec.ts +25 -18
- package/src/TabList/__tests__/Tabs.a11y.chromium.spec.ts +19 -12
- package/src/TextInput/__tests__/TextInput.a11y.chromium.spec.ts +21 -14
- package/src/ToggleButton/__tests__/ToggleButton.a11y.chromium.spec.ts +18 -11
- package/src/Typeahead/BaseTypeahead.test.tsx +99 -1
- package/src/Typeahead/BaseTypeahead.tsx +17 -3
- package/src/theme/syntax/SyntaxTheme.tsx +46 -5
- package/src/theme/syntax/defineSyntaxTheme.diff.test.ts +91 -0
- package/src/theme/syntax/defineSyntaxTheme.ts +75 -15
- package/src/theme/syntax/index.ts +5 -1
- package/src/theme/syntax/tokens.ts +32 -2
- package/src/theme/syntax/useSyntaxTheme.diff.test.tsx +40 -0
- package/src/utils/focusReturn.test.ts +79 -2
- package/src/utils/focusReturn.ts +48 -3
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
* SYNC: When DropdownMenu.tsx changes, update tests to match new behavior
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
|
-
import {describe, it, expect, vi, beforeEach} from 'vitest';
|
|
12
|
+
import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
|
|
13
13
|
import {readFileSync} from 'node:fs';
|
|
14
14
|
import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
|
|
15
15
|
import userEvent from '@testing-library/user-event';
|
|
@@ -3040,6 +3040,102 @@ describe('DropdownMenu focus return after a pointer pick', () => {
|
|
|
3040
3040
|
),
|
|
3041
3041
|
);
|
|
3042
3042
|
});
|
|
3043
|
+
|
|
3044
|
+
it("asks the browser for no ring on the design system's Button too", async () => {
|
|
3045
|
+
const user = userEvent.setup();
|
|
3046
|
+
const trigger = renderMenu();
|
|
3047
|
+
await user.click(trigger);
|
|
3048
|
+
const focus = vi.spyOn(trigger, 'focus');
|
|
3049
|
+
await user.click(item('Edit'));
|
|
3050
|
+
expect(trigger).toHaveFocus();
|
|
3051
|
+
expect(focus.mock.calls.at(-1)).toEqual([
|
|
3052
|
+
{preventScroll: true, focusVisible: false},
|
|
3053
|
+
]);
|
|
3054
|
+
});
|
|
3055
|
+
|
|
3056
|
+
describe('a trigger the caller renders', () => {
|
|
3057
|
+
// The style that keeps the ring off the design system's Button cannot
|
|
3058
|
+
// reach a caller's control, so the focus move itself has to: after
|
|
3059
|
+
// pointer input the browser is asked not to match `:focus-visible`, which
|
|
3060
|
+
// it otherwise does on the returned focus (Chromium after a mouse pick,
|
|
3061
|
+
// WebKit after a touch).
|
|
3062
|
+
function renderCustomMenu() {
|
|
3063
|
+
render(
|
|
3064
|
+
<DropdownMenu
|
|
3065
|
+
renderTrigger={props => (
|
|
3066
|
+
<button type="button" {...props}>
|
|
3067
|
+
More
|
|
3068
|
+
</button>
|
|
3069
|
+
)}>
|
|
3070
|
+
<DropdownMenuItem label="Edit" onClick={() => {}} />
|
|
3071
|
+
<DropdownMenuItem label="Delete" onClick={() => {}} />
|
|
3072
|
+
</DropdownMenu>,
|
|
3073
|
+
);
|
|
3074
|
+
return screen.getByRole('button', {name: 'More'});
|
|
3075
|
+
}
|
|
3076
|
+
|
|
3077
|
+
afterEach(() => {
|
|
3078
|
+
vi.restoreAllMocks();
|
|
3079
|
+
});
|
|
3080
|
+
|
|
3081
|
+
it('returns focus after a pointer pick with the browser asked for no ring', async () => {
|
|
3082
|
+
const user = userEvent.setup();
|
|
3083
|
+
const trigger = renderCustomMenu();
|
|
3084
|
+
await user.click(trigger);
|
|
3085
|
+
const focus = vi.spyOn(trigger, 'focus');
|
|
3086
|
+
await user.click(item('Edit'));
|
|
3087
|
+
expect(trigger).toHaveFocus();
|
|
3088
|
+
expect(focus.mock.calls.at(-1)).toEqual([
|
|
3089
|
+
{preventScroll: true, focusVisible: false},
|
|
3090
|
+
]);
|
|
3091
|
+
});
|
|
3092
|
+
|
|
3093
|
+
it('returns focus after a keyboard pick with the ring left to the browser', async () => {
|
|
3094
|
+
const user = userEvent.setup();
|
|
3095
|
+
const trigger = renderCustomMenu();
|
|
3096
|
+
trigger.focus();
|
|
3097
|
+
await user.keyboard('{ArrowDown}');
|
|
3098
|
+
await waitFor(() => expect(item('Edit')).toHaveFocus());
|
|
3099
|
+
const focus = vi.spyOn(trigger, 'focus');
|
|
3100
|
+
await user.keyboard('{Enter}');
|
|
3101
|
+
await waitFor(() => expect(trigger).toHaveFocus());
|
|
3102
|
+
expect(focus.mock.calls.at(-1)).toEqual([{preventScroll: true}]);
|
|
3103
|
+
});
|
|
3104
|
+
|
|
3105
|
+
it('clears a ring the browser already drew before refocusing after a pointer pick', async () => {
|
|
3106
|
+
const user = userEvent.setup();
|
|
3107
|
+
const trigger = renderCustomMenu();
|
|
3108
|
+
await user.click(trigger);
|
|
3109
|
+
// WebKit's own popover focus restoration can focus the trigger, with a
|
|
3110
|
+
// ring, before the menu moves focus, and focusing the focused element
|
|
3111
|
+
// changes nothing.
|
|
3112
|
+
const hidePopover = HTMLElement.prototype.hidePopover;
|
|
3113
|
+
HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
|
|
3114
|
+
hidePopover.call(this);
|
|
3115
|
+
trigger.focus();
|
|
3116
|
+
});
|
|
3117
|
+
const matches = HTMLElement.prototype.matches;
|
|
3118
|
+
vi.spyOn(HTMLElement.prototype, 'matches').mockImplementation(function (
|
|
3119
|
+
this: HTMLElement,
|
|
3120
|
+
selector: string,
|
|
3121
|
+
) {
|
|
3122
|
+
return selector === ':focus-visible'
|
|
3123
|
+
? this === trigger
|
|
3124
|
+
: matches.call(this, selector);
|
|
3125
|
+
});
|
|
3126
|
+
const blur = vi.spyOn(trigger, 'blur');
|
|
3127
|
+
const focus = vi.spyOn(trigger, 'focus');
|
|
3128
|
+
await user.click(item('Edit'));
|
|
3129
|
+
expect(blur).toHaveBeenCalledTimes(1);
|
|
3130
|
+
expect(focus.mock.calls.at(-1)).toEqual([
|
|
3131
|
+
{preventScroll: true, focusVisible: false},
|
|
3132
|
+
]);
|
|
3133
|
+
expect(blur.mock.invocationCallOrder[0]).toBeLessThan(
|
|
3134
|
+
focus.mock.invocationCallOrder.at(-1) ?? 0,
|
|
3135
|
+
);
|
|
3136
|
+
expect(trigger).toHaveFocus();
|
|
3137
|
+
});
|
|
3138
|
+
});
|
|
3043
3139
|
});
|
|
3044
3140
|
|
|
3045
3141
|
describe('DropdownMenuItem href', () => {
|
|
@@ -68,6 +68,7 @@ import {useMenuPress} from '../hooks/useMenuPress';
|
|
|
68
68
|
import type {MenuPressPointerType} from '../hooks/menuPressGesture';
|
|
69
69
|
import {useTypeahead} from '../hooks/useTypeahead';
|
|
70
70
|
import {useFocusReturnVisibility} from '../hooks/useFocusReturnVisibility';
|
|
71
|
+
import {focusForLastInput} from '../utils/focusReturn';
|
|
71
72
|
import {useMenuOverflow} from './useMenuOverflow';
|
|
72
73
|
import {MenuRegionsContext} from './menuRegionsContext';
|
|
73
74
|
import {getFocusableElements} from '../hooks/useFocusTrap';
|
|
@@ -932,7 +933,12 @@ function DropdownMenuPopover({
|
|
|
932
933
|
return;
|
|
933
934
|
}
|
|
934
935
|
prepareFocusReturn();
|
|
935
|
-
trigger
|
|
936
|
+
// After pointer input the trigger takes focus without the focus-visible
|
|
937
|
+
// ring (`component:DropdownMenu/DEC-1`). The style the helper above adds
|
|
938
|
+
// reaches only the design system's own Button; the browser's focus option
|
|
939
|
+
// also reaches a control the caller renders, which the browser would
|
|
940
|
+
// otherwise ring (Chromium after a mouse pick, WebKit after a touch).
|
|
941
|
+
focusForLastInput(trigger, {preventScroll: true});
|
|
936
942
|
}, [isControlled, onOpenChange, prepareFocusReturn]);
|
|
937
943
|
|
|
938
944
|
// Defer item focus until the layer has committed open, so focus restore
|
|
@@ -1432,8 +1438,9 @@ function DropdownMenuPopover({
|
|
|
1432
1438
|
onPointerDown: menuPress.triggerProps.onPointerDown,
|
|
1433
1439
|
onContextMenu: menuPress.triggerProps.onContextMenu,
|
|
1434
1440
|
onKeyDown: handleButtonKeyDown,
|
|
1435
|
-
// The
|
|
1436
|
-
// the
|
|
1441
|
+
// The caller's control paints its own ring, and the menu's focus return
|
|
1442
|
+
// keeps the browser from drawing one after pointer input (see
|
|
1443
|
+
// handleLayerHide), so its focus needs no bookkeeping here.
|
|
1437
1444
|
onFocus: () => {},
|
|
1438
1445
|
'aria-haspopup': 'menu',
|
|
1439
1446
|
'aria-expanded': isOpen,
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @file DropdownMenuFocusReturn.a11y.browser.spec.ts
|
|
5
|
+
* @input The `Core/DropdownMenu` CustomTrigger story (an icon button the
|
|
6
|
+
* caller renders) in a built Storybook, real Chromium/WebKit pointer and
|
|
7
|
+
* keyboard input.
|
|
8
|
+
* @output Browser evidence that the focus the menu returns to a trigger the
|
|
9
|
+
* caller renders follows the last input
|
|
10
|
+
* (docs/architecture/interaction-modality.md INV1,
|
|
11
|
+
* `component:DropdownMenu/DEC-1`): no ring after a pointer pick, the ring
|
|
12
|
+
* after a keyboard pick.
|
|
13
|
+
* @position Cross-browser proof; jsdom only proves which focus call the menu
|
|
14
|
+
* makes. Unless the menu asks for no ring, both engines ring the focus it
|
|
15
|
+
* returns after a pointer pick.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import {expect, test, type Locator, type Page} from '@playwright/test';
|
|
19
|
+
import {
|
|
20
|
+
DEFAULT_STORYBOOK_DIR,
|
|
21
|
+
serveStorybook,
|
|
22
|
+
type StaticServer,
|
|
23
|
+
} from '@astryxdesign/a11y-spec/storybook';
|
|
24
|
+
|
|
25
|
+
let storybook: StaticServer;
|
|
26
|
+
test.beforeAll(async () => {
|
|
27
|
+
storybook = await serveStorybook(
|
|
28
|
+
process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
|
|
29
|
+
);
|
|
30
|
+
});
|
|
31
|
+
test.afterAll(async () => {
|
|
32
|
+
await storybook?.close();
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
async function mount(page: Page): Promise<Locator> {
|
|
36
|
+
await page.goto(
|
|
37
|
+
`${storybook.origin}/iframe.html?id=core-dropdownmenu--custom-trigger&viewMode=story`,
|
|
38
|
+
);
|
|
39
|
+
const trigger = page.getByRole('button', {name: 'More actions'});
|
|
40
|
+
await expect(trigger).toBeVisible();
|
|
41
|
+
return trigger;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
async function matchesFocusVisible(locator: Locator): Promise<boolean> {
|
|
45
|
+
return locator.evaluate(element => element.matches(':focus-visible'));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
test('a pointer pick returns focus to the trigger without a ring', async ({
|
|
49
|
+
page,
|
|
50
|
+
}) => {
|
|
51
|
+
const trigger = await mount(page);
|
|
52
|
+
await trigger.click();
|
|
53
|
+
const menu = page.getByRole('menu');
|
|
54
|
+
await expect(menu).toBeVisible();
|
|
55
|
+
await page.getByRole('menuitem', {name: 'Rename'}).click();
|
|
56
|
+
await expect(menu).toBeHidden();
|
|
57
|
+
await expect(trigger).toBeFocused();
|
|
58
|
+
expect(await matchesFocusVisible(trigger)).toBe(false);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
test('a keyboard pick returns focus to the trigger with its ring', async ({
|
|
62
|
+
page,
|
|
63
|
+
}) => {
|
|
64
|
+
const trigger = await mount(page);
|
|
65
|
+
await trigger.focus();
|
|
66
|
+
await page.keyboard.press('Enter');
|
|
67
|
+
const menu = page.getByRole('menu');
|
|
68
|
+
await expect(page.getByRole('menuitem', {name: 'Rename'})).toBeFocused();
|
|
69
|
+
await page.keyboard.press('Enter');
|
|
70
|
+
await expect(menu).toBeHidden();
|
|
71
|
+
await expect(trigger).toBeFocused();
|
|
72
|
+
expect(await matchesFocusVisible(trigger)).toBe(true);
|
|
73
|
+
});
|
|
@@ -168,26 +168,18 @@ async function runState(
|
|
|
168
168
|
});
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
const results: BindingResult[] = [];
|
|
177
|
-
for (const state of CORE_STATUS_MESSAGE_BINDING_STATES) {
|
|
178
|
-
results.push(await runState(page, cdp, state));
|
|
179
|
-
}
|
|
180
|
-
expect(neverExercised(results)).toEqual([]);
|
|
181
|
-
expect(
|
|
182
|
-
unmatchedKnownFailures(CORE_STATUS_MESSAGE_KNOWN_FAILURES, results),
|
|
183
|
-
).toEqual([]);
|
|
184
|
-
});
|
|
171
|
+
// Each state's result, recorded by its own test below so the whole-suite check
|
|
172
|
+
// at the end reads it instead of measuring every state a second time. A state
|
|
173
|
+
// whose test did not run in this worker (a filtered run, or a worker restarted
|
|
174
|
+
// after a failure) is measured by the whole-suite check itself.
|
|
175
|
+
const recorded = new Map<string, BindingResult>();
|
|
185
176
|
|
|
186
177
|
for (const state of CORE_STATUS_MESSAGE_BINDING_STATES) {
|
|
187
178
|
test(`${state.binding} [${state.id}] — ${state.summary}`, async ({page}) => {
|
|
188
179
|
test.setTimeout(2 * 60 * 1000);
|
|
189
180
|
const cdp = await page.context().newCDPSession(page);
|
|
190
181
|
const result = await runState(page, cdp, state);
|
|
182
|
+
recorded.set(state.id, result);
|
|
191
183
|
const report = summarize(STATUS_MESSAGE_PATTERN, [result]);
|
|
192
184
|
// eslint-disable-next-line no-console -- the report is this run's artifact
|
|
193
185
|
console.log(formatReport(report));
|
|
@@ -196,3 +188,18 @@ for (const state of CORE_STATUS_MESSAGE_BINDING_STATES) {
|
|
|
196
188
|
expect(report.counts.unexpectedPass).toBe(0);
|
|
197
189
|
});
|
|
198
190
|
}
|
|
191
|
+
|
|
192
|
+
test('every expectation is exercised by at least one Core binding state', async ({
|
|
193
|
+
page,
|
|
194
|
+
}) => {
|
|
195
|
+
test.setTimeout(4 * 60 * 1000);
|
|
196
|
+
const cdp = await page.context().newCDPSession(page);
|
|
197
|
+
const results: BindingResult[] = [];
|
|
198
|
+
for (const state of CORE_STATUS_MESSAGE_BINDING_STATES) {
|
|
199
|
+
results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
|
|
200
|
+
}
|
|
201
|
+
expect(neverExercised(results)).toEqual([]);
|
|
202
|
+
expect(
|
|
203
|
+
unmatchedKnownFailures(CORE_STATUS_MESSAGE_KNOWN_FAILURES, results),
|
|
204
|
+
).toEqual([]);
|
|
205
|
+
});
|
|
@@ -64,18 +64,30 @@ constrained renderer seams. Callers may opt into the canonical plugin protocol f
|
|
|
64
64
|
bounded source syntax, immutable document transformation, typed extension
|
|
65
65
|
rendering, and native typed document-start frontmatter. They may separately opt into dollar-delimited math by supplying one typed
|
|
66
66
|
renderer for both inline and display expressions. The parser accepts matching
|
|
67
|
-
explicit options.
|
|
68
|
-
|
|
67
|
+
explicit options. Plugins and math change nothing when absent; the default Code
|
|
68
|
+
block path renders `diff` and `diff-<language>` fences as CodeBlock's diff layer
|
|
69
|
+
(FR29), and every other parsing, rendering, styling, and streaming behavior is
|
|
70
|
+
the released one.
|
|
69
71
|
|
|
70
72
|
## Compatibility and migration
|
|
71
73
|
|
|
72
|
-
- Released default preserved: `yes`
|
|
73
|
-
- Compatibility class: additive, opt-in public API
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
74
|
+
- Released default preserved: `yes`, except the default Code block path for `diff` fences (FR29, below)
|
|
75
|
+
- Compatibility class: additive, opt-in public API, with one visible default-path
|
|
76
|
+
rendering change (FR29, below); existing parser nodes, DOM, styling, targets,
|
|
77
|
+
dollar-delimited text, `components`, and `inlinePlugins` remain unchanged unless
|
|
78
|
+
the caller supplies `plugins`, supplies `components.math`, or passes the matching
|
|
79
|
+
explicit parser option.
|
|
77
80
|
- Controlled/uncontrolled behavior: not applicable
|
|
78
81
|
- Migration decision: none
|
|
82
|
+
- Default-path rendering change for diff fences (FR29), a visible default change
|
|
83
|
+
and not a breaking one: a `diff` fence that rendered as plain text renders as CodeBlock's diff
|
|
84
|
+
layer over plaintext with a `diff` label, and a `diff-<language>` fence —
|
|
85
|
+
which rendered as plain text with a `diff` label and viewport name, its
|
|
86
|
+
leading word being all Markdown read — as the layer over that language with
|
|
87
|
+
a `<language> diff` label; the header, copy, disclosure, and viewport name
|
|
88
|
+
stay, and a supplied `code` renderer's contract is unchanged. The way back to
|
|
89
|
+
plain text is a `text` fence or a custom `code` renderer. Every other fence
|
|
90
|
+
is unchanged.
|
|
79
91
|
- Default-path layout change (FR26–FR28): a default table's columns may become
|
|
80
92
|
wider than the released fixed buckets, never narrower; header labels wrap
|
|
81
93
|
instead of truncating; a table that squashed its columns may now scroll.
|
|
@@ -228,6 +240,7 @@ unions. Enabled calls return the explicit `InlineNodeWithMath` and
|
|
|
228
240
|
| FR26 | On the default table path each column has a content-derived width floor: the larger of its own longest unbreakable token and a readable minimum derived from that column's content, bounded so a table of short columns still fits its container. The floor applies to the cell's text, not to its padded box, so it means the same amount of content at every density. A header label contributes its own readable minimum to that comparison. A table whose floors exceed the container grows and scrolls rather than dividing the container equally. |
|
|
229
241
|
| FR27 | Default table header cells never truncate: no ellipsis and no width clamp. A header reads in full, on one line up to a bounded width and wrapping past it. Inline code inside a default table cell keeps its token whole rather than breaking mid-token; a supplied `inlineCode` renderer owns its own wrapping. |
|
|
230
242
|
| FR28 | Markdown's Table block owns spacing, sizing, and alignment. The nested Table's own Scroll region remains the sole owner of the table's horizontal overflow, its accessible name, and its conditional keyboard focusability; Markdown adds no second scroll container, name, or tab stop of its own. |
|
|
243
|
+
| FR29 | On the default Code block path the fence's full first word selects CodeBlock's diff layer (`component:CodeBlock` FR9): `diff` renders the layer over plaintext, `diff-<language>` the layer over `<language>` (the language read by the same leading-word rule as any other fence); every other fence is unchanged. A supplied `code` renderer's contract is unchanged: it keeps receiving the leading word characters as `language` — `diff` for both `diff` and `diff-<language>` fences — and nothing new. |
|
|
231
244
|
|
|
232
245
|
FR23 includes CommonMark-compatible lazy paragraph continuation inside blockquotes
|
|
233
246
|
and ordered, unordered, or task-list items. Omitting a repeated quote marker or
|
|
@@ -421,22 +434,23 @@ and this change preserves the existing spelling exactly.
|
|
|
421
434
|
|
|
422
435
|
## Verification map
|
|
423
436
|
|
|
424
|
-
| Contract | Verification
|
|
425
|
-
| ---------------------- |
|
|
426
|
-
| FR1–FR5 | `Markdown.test.tsx`, theme-target tests, and `scripts/check-knowledge.mjs`
|
|
427
|
-
| FR6–FR10 | `parser.test.ts` and `Markdown.test.tsx`
|
|
428
|
-
| FR11 | `incremental.test.ts` and `Markdown.test.tsx`
|
|
429
|
-
| FR12–FR16 | plugin, transform, adapter, performance, and Outline parser tests
|
|
430
|
-
| FR17–FR18 | container parse/validation, ownership, and dependency tests
|
|
431
|
-
| FR19 | diagnostic-channel tests in development and production
|
|
432
|
-
| FR20–FR22 | canonical/server imports, inference, streaming, preparation, theming tests
|
|
433
|
-
| FR23 | parser, incremental, renderer, nesting, and public option tests
|
|
434
|
-
| FR24 | `plugins/frontmatter.test.tsx`, Storybook, and server rendering
|
|
435
|
-
| FR25 | `parser.public.test.ts`, plugin SSR tests, and package export checks
|
|
436
|
-
| FR26–FR28 | `Markdown.test.tsx` and a real-browser layer over checked-in narrow-width stories
|
|
437
|
-
|
|
|
438
|
-
|
|
|
439
|
-
|
|
|
437
|
+
| Contract | Verification | Representative states | Failure signal |
|
|
438
|
+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
439
|
+
| FR1–FR5 | `Markdown.test.tsx`, theme-target tests, and `scripts/check-knowledge.mjs` | Default block/inline output and all current targets | Existing DOM, target, spacing, or renderer behavior changes. |
|
|
440
|
+
| FR6–FR10 | `parser.test.ts` and `Markdown.test.tsx` | Opt-out, inline/display math, escapes, currency, code, links, plugins | A delimiter is claimed without opt-in, TeX is formatted as Markdown, or opaque contexts leak. |
|
|
441
|
+
| FR11 | `incremental.test.ts` and `Markdown.test.tsx` | Every-character top-level/list/task-list/blockquote splits, CRLF, source ranges | Streaming diverges from a full parse, shows partial syntax, mistakes a nested closer for an opener, or crosses a closed container. |
|
|
442
|
+
| FR12–FR16 | plugin, transform, adapter, performance, and Outline parser tests | omitted/empty lists, immutable transforms, invalid outputs, live updates, one compatible Remark plugin, duplicate headings | Empty behavior forks, input mutates, invalid structure escapes, transforms reparse, adapter loses content, budgets fail, or heading targets diverge. |
|
|
443
|
+
| FR17–FR18 | container parse/validation, ownership, and dependency tests | leaf/container declarations, nested containers, foreign read/remove/mint/edit, unmet/misordered dependencies | Plugin-built parsed children, invalid content, lost fallback children, foreign mint/edit, or generic ownership codes. |
|
|
444
|
+
| FR19 | diagnostic-channel tests in development and production | every phase, advisory reports, rate suppression, no handler, malformed list, duplicate Core, version skew | A silent production failure, document content in a diagnostic, or one entrypoint throwing where another recovers. |
|
|
445
|
+
| FR20–FR22 | canonical/server imports, inference, streaming, preparation, theming tests | server imports, no explicit type args, chunk boundaries, recreated lists, themed/unthemed extensions | Client references, explicit-type workarounds, oscillation, per-render re-preparation, or unreachable opted-in output. |
|
|
446
|
+
| FR23 | parser, incremental, renderer, nesting, and public option tests | mixed lists; escaped prose/code table cells, nested inline code, full/streaming parity; autolink omitted/enabled | A mixed list splits or loses state, an escaped table pipe changes cells or exposes its backslash, or autolink changes other syntax. |
|
|
447
|
+
| FR24 | `plugins/frontmatter.test.tsx`, Storybook, and server rendering | complete, malformed, non-leading, LF/CRLF, unfinished streaming, full plugin stack | Metadata syntax renders after completion, unfinished syntax leaks while streaming, typing is lost, or later plugins stop composing. |
|
|
448
|
+
| FR25 | `parser.public.test.ts`, plugin SSR tests, and package export checks | server/RSC parsing with plugins, synchronous SSR, suspending renderer streaming boundary | A server import gains `use client`, plugin execution needs serialization, SSR loses fallback, or direct RSC rendering is misrepresented as supported. |
|
|
449
|
+
| FR26–FR28 | `Markdown.test.tsx` and a real-browser layer over checked-in narrow-width stories | short, prose, and token-heavy tables; header-only rows and empty cells; long headers over short bodies; reading columns from phone to document width | A column collapses below its content floor, cell padding eats the floor, a header truncates, an inline-code token breaks mid-token, or a second scroll viewport, name, or tab stop appears around a table. |
|
|
450
|
+
| FR29 | `Markdown.test.tsx` (a `diff` fence → plaintext + layer, a `diff-tsx` fence → tsx + layer, a plain fence unchanged, a custom `code` renderer receives `language="diff"` for both diff fences and nothing new) | default path and custom renderer, `diff` and `diff-<language>` fences | a fence word other than `diff`/`diff-<language>` reaching the layer, or a custom renderer receiving a new prop or a different `language` |
|
|
451
|
+
| Public syntax/types | `Markdown.public.test.ts`, core typecheck, and `Markdown.doc.mjs` | Legacy exhaustive switches, math opt-ins, inferred extension-node unions | A released union widens, an enabled union loses nodes, or docs drift from declarations. |
|
|
452
|
+
| Navigation contract | `parser.test.ts`, `Markdown.test.tsx`, and `Markdown.renderBoundary.test.tsx` | Parsed and rendered links, including transformed built-in links; accepted ordinary schemes; rejected destinations; links versus images | A blocked destination reaches navigation or a custom link renderer, or resource policy narrows accepted navigation. |
|
|
453
|
+
| Security/accessibility | `parser.test.ts`, `Markdown.test.tsx`, and renderer guidance | Inert expression strings and renderer-owned semantics | Astryx executes math as HTML or silently claims renderer-owned accessibility. |
|
|
440
454
|
|
|
441
455
|
Focused tests continue to pin all nine current target names and default block
|
|
442
456
|
placement. Math intentionally adds no target and no default anatomy.
|
|
@@ -326,6 +326,44 @@ describe('Markdown', () => {
|
|
|
326
326
|
expect(pre).toBeInTheDocument();
|
|
327
327
|
});
|
|
328
328
|
|
|
329
|
+
it('renders a diff-<lang> fence as a diff over that language, and diff over plaintext', () => {
|
|
330
|
+
const {container, rerender} = render(
|
|
331
|
+
<Markdown>{'```diff-js\n-const x = 1;\n+const x = 2;\n```'}</Markdown>,
|
|
332
|
+
);
|
|
333
|
+
expect(container.querySelector('[data-diff="removed"]')).not.toBeNull();
|
|
334
|
+
expect(container.querySelector('[data-diff="added"]')).not.toBeNull();
|
|
335
|
+
// `const` keeps its js highlighting past the glyph.
|
|
336
|
+
expect(
|
|
337
|
+
container.querySelector('[data-diff="added"] .astryx-token-keyword'),
|
|
338
|
+
).not.toBeNull();
|
|
339
|
+
rerender(<Markdown>{'```diff\n-old\n+new\n```'}</Markdown>);
|
|
340
|
+
expect(container.querySelectorAll('[data-diff]')).toHaveLength(2);
|
|
341
|
+
expect(container.querySelector('.astryx-token-keyword')).toBeNull();
|
|
342
|
+
rerender(<Markdown>{'```js\n-const x = 1;\n```'}</Markdown>);
|
|
343
|
+
expect(container.querySelector('[data-diff]')).toBeNull();
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
it('hands a custom code renderer the leading word as today and nothing new', () => {
|
|
347
|
+
type CodeProps = {code: string; language?: string};
|
|
348
|
+
const seen: CodeProps[] = [];
|
|
349
|
+
const Code = (props: CodeProps) => {
|
|
350
|
+
seen.push(props);
|
|
351
|
+
return <pre data-testid="custom">{props.code}</pre>;
|
|
352
|
+
};
|
|
353
|
+
render(
|
|
354
|
+
<Markdown components={{code: Code}}>
|
|
355
|
+
{
|
|
356
|
+
'```diff-tsx\n-a\n+b\n```\n\n```diff\n-a\n```\n\n```tsx\nconst x = 1;\n```'
|
|
357
|
+
}
|
|
358
|
+
</Markdown>,
|
|
359
|
+
);
|
|
360
|
+
// The leading word characters, as today: a diff-tsx fence is `diff`.
|
|
361
|
+
expect(seen.map(p => p.language)).toEqual(['diff', 'diff', 'tsx']);
|
|
362
|
+
for (const props of seen) {
|
|
363
|
+
expect(Object.keys(props).sort()).toEqual(['code', 'language']);
|
|
364
|
+
}
|
|
365
|
+
});
|
|
366
|
+
|
|
329
367
|
it('renders links with correct href', () => {
|
|
330
368
|
render(<Markdown>{'[click](https://example.com)'}</Markdown>);
|
|
331
369
|
const link = screen.getByText('click');
|
|
@@ -27,6 +27,7 @@ import {
|
|
|
27
27
|
} from '../theme/tokens.stylex';
|
|
28
28
|
import type {TextDisplay} from '../theme/types';
|
|
29
29
|
import {CodeBlock, Code} from '../CodeBlock';
|
|
30
|
+
import {parseFenceLanguage} from '../CodeBlock/tokenizer';
|
|
30
31
|
import {CheckboxList} from '../CheckboxList/CheckboxList';
|
|
31
32
|
import {CheckboxListItem} from '../CheckboxList/CheckboxListItem';
|
|
32
33
|
import {Blockquote} from '../Blockquote/Blockquote';
|
|
@@ -1475,7 +1476,20 @@ function renderBlock(
|
|
|
1475
1476
|
case 'code': {
|
|
1476
1477
|
// Track codeblock content in cursor for accurate character counting
|
|
1477
1478
|
cursor.offset += node.value.length;
|
|
1478
|
-
|
|
1479
|
+
// `diff-<lang>` fences are the diff layer over <lang>; `diff` is the
|
|
1480
|
+
// layer over plaintext. The legacy language is the info
|
|
1481
|
+
// string's leading word characters, which stops at the hyphen, so the
|
|
1482
|
+
// diff mapping reads the whole first word and then applies the same
|
|
1483
|
+
// word rule to the language it names.
|
|
1484
|
+
const legacyLanguage =
|
|
1485
|
+
getMarkdownAstLegacyCodeLanguage(node) ?? 'plaintext';
|
|
1486
|
+
const fence = parseFenceLanguage(node.lang ?? legacyLanguage);
|
|
1487
|
+
const isDiff = fence.isDiff;
|
|
1488
|
+
// The language under the diff layer; the default CodeBlock renders it.
|
|
1489
|
+
const diffLanguage = isDiff
|
|
1490
|
+
? fence.language.match(/^\w*/)?.[0] || 'plaintext'
|
|
1491
|
+
: undefined;
|
|
1492
|
+
const language = diffLanguage ?? legacyLanguage;
|
|
1479
1493
|
// A semantic-fence proposal claims its fence before the host's code
|
|
1480
1494
|
// renderer (spec:AST-036 FR17). The host renderer, or the default Code
|
|
1481
1495
|
// block without one, draws every unclaimed fence and is the fallback
|
|
@@ -1485,7 +1499,10 @@ function renderBlock(
|
|
|
1485
1499
|
<CodeBlockComp
|
|
1486
1500
|
key={index}
|
|
1487
1501
|
code={node.value}
|
|
1488
|
-
|
|
1502
|
+
// A supplied renderer's contract is unchanged: it keeps receiving
|
|
1503
|
+
// the leading word characters (`diff` for a `diff-tsx` fence, as
|
|
1504
|
+
// today) and nothing new; only the default path maps the layer.
|
|
1505
|
+
language={legacyLanguage}
|
|
1489
1506
|
{...lineProp}
|
|
1490
1507
|
/>
|
|
1491
1508
|
) : (
|
|
@@ -1504,6 +1521,7 @@ function renderBlock(
|
|
|
1504
1521
|
<CodeBlock
|
|
1505
1522
|
code={node.value}
|
|
1506
1523
|
language={language}
|
|
1524
|
+
isDiff={isDiff}
|
|
1507
1525
|
isCollapsible
|
|
1508
1526
|
xstyle={[
|
|
1509
1527
|
contentWidthValue != null
|
|
@@ -412,9 +412,10 @@ describe('createMarkdownFenceTransform', () => {
|
|
|
412
412
|
expect(createNode).not.toHaveBeenCalled();
|
|
413
413
|
expect(document.querySelector('pre')).toHaveTextContent('plain source');
|
|
414
414
|
expect(screen.getByRole('button', {name: 'Copy code'})).toBeInTheDocument();
|
|
415
|
+
// CodeBlock's named viewport; its tab stop follows overflow (none in jsdom).
|
|
415
416
|
expect(screen.getByRole('group', {name: 'text'})).toHaveAttribute(
|
|
416
|
-
'
|
|
417
|
-
'
|
|
417
|
+
'data-scroll-axis',
|
|
418
|
+
'both',
|
|
418
419
|
);
|
|
419
420
|
|
|
420
421
|
rerender(
|
|
@@ -71,21 +71,6 @@ async function runState(
|
|
|
71
71
|
});
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
test('every expectation is exercised by at least one NumberInput state', async ({
|
|
75
|
-
page,
|
|
76
|
-
}) => {
|
|
77
|
-
test.setTimeout(4 * 60 * 1000);
|
|
78
|
-
const cdp = await page.context().newCDPSession(page);
|
|
79
|
-
const results: BindingResult[] = [];
|
|
80
|
-
for (const state of NUMBER_INPUT_A11Y_STATES) {
|
|
81
|
-
results.push(await runState(page, cdp, state));
|
|
82
|
-
}
|
|
83
|
-
expect(neverExercised(results)).toEqual([]);
|
|
84
|
-
expect(unmatchedKnownFailures(NUMBER_INPUT_KNOWN_FAILURES, results)).toEqual(
|
|
85
|
-
[],
|
|
86
|
-
);
|
|
87
|
-
});
|
|
88
|
-
|
|
89
74
|
test('the Chromium read-only omission remains exact visible debt', async ({
|
|
90
75
|
page,
|
|
91
76
|
}) => {
|
|
@@ -104,13 +89,35 @@ test('the Chromium read-only omission remains exact visible debt', async ({
|
|
|
104
89
|
expect(readOnly?.knownFailure).toBe(NUMBER_INPUT_KNOWN_FAILURES[0]);
|
|
105
90
|
});
|
|
106
91
|
|
|
92
|
+
// Each state's result, recorded by its own test below so the whole-suite check
|
|
93
|
+
// at the end reads it instead of measuring every state a second time. A state
|
|
94
|
+
// whose test did not run in this worker (a filtered run, or a worker restarted
|
|
95
|
+
// after a failure) is measured by the whole-suite check itself.
|
|
96
|
+
const recorded = new Map<string, BindingResult>();
|
|
97
|
+
|
|
107
98
|
for (const state of NUMBER_INPUT_A11Y_STATES) {
|
|
108
99
|
test(`NumberInput [${state.id}] — ${state.summary}`, async ({page}) => {
|
|
109
100
|
const cdp = await page.context().newCDPSession(page);
|
|
110
101
|
const result = await runState(page, cdp, state);
|
|
102
|
+
recorded.set(state.id, result);
|
|
111
103
|
const report = summarize(SPINBUTTON_PATTERN, [result]);
|
|
112
104
|
expect(formatFailures(blockingResults([result]))).toBe('');
|
|
113
105
|
expect(report.unrunLayers).toEqual([]);
|
|
114
106
|
expect(report.counts.unexpectedPass).toBe(0);
|
|
115
107
|
});
|
|
116
108
|
}
|
|
109
|
+
|
|
110
|
+
test('every expectation is exercised by at least one NumberInput state', async ({
|
|
111
|
+
page,
|
|
112
|
+
}) => {
|
|
113
|
+
test.setTimeout(4 * 60 * 1000);
|
|
114
|
+
const cdp = await page.context().newCDPSession(page);
|
|
115
|
+
const results: BindingResult[] = [];
|
|
116
|
+
for (const state of NUMBER_INPUT_A11Y_STATES) {
|
|
117
|
+
results.push(recorded.get(state.id) ?? (await runState(page, cdp, state)));
|
|
118
|
+
}
|
|
119
|
+
expect(neverExercised(results)).toEqual([]);
|
|
120
|
+
expect(unmatchedKnownFailures(NUMBER_INPUT_KNOWN_FAILURES, results)).toEqual(
|
|
121
|
+
[],
|
|
122
|
+
);
|
|
123
|
+
});
|
|
@@ -733,3 +733,48 @@ describe('field menu grouping', () => {
|
|
|
733
733
|
});
|
|
734
734
|
});
|
|
735
735
|
});
|
|
736
|
+
|
|
737
|
+
describe('field menu after the search source changes', () => {
|
|
738
|
+
it('opens the new field menu on the first click after a config change', async () => {
|
|
739
|
+
const user = userEvent.setup();
|
|
740
|
+
// A caller that loads field options asynchronously hands PowerSearch a
|
|
741
|
+
// new config, which builds a new search source.
|
|
742
|
+
const loadedConfig: PowerSearchConfig = {
|
|
743
|
+
...config,
|
|
744
|
+
fields: [
|
|
745
|
+
...config.fields,
|
|
746
|
+
{
|
|
747
|
+
key: 'owner',
|
|
748
|
+
label: 'Owner',
|
|
749
|
+
defaultOperator: 'is',
|
|
750
|
+
operators: [{key: 'is', label: 'is', value: {type: 'string'}}],
|
|
751
|
+
},
|
|
752
|
+
],
|
|
753
|
+
};
|
|
754
|
+
const renderSearch = (searchConfig: PowerSearchConfig) => (
|
|
755
|
+
<>
|
|
756
|
+
<PowerSearch config={searchConfig} filters={[]} onChange={() => {}} />
|
|
757
|
+
<button type="button">Sort</button>
|
|
758
|
+
</>
|
|
759
|
+
);
|
|
760
|
+
const {rerender} = render(renderSearch(config));
|
|
761
|
+
const input = screen.getByRole('combobox');
|
|
762
|
+
|
|
763
|
+
await user.click(input);
|
|
764
|
+
await waitFor(() => {
|
|
765
|
+
expect(input).toHaveAttribute('aria-expanded', 'true');
|
|
766
|
+
});
|
|
767
|
+
await user.click(screen.getByRole('button', {name: 'Sort'}));
|
|
768
|
+
expect(input).toHaveAttribute('aria-expanded', 'false');
|
|
769
|
+
|
|
770
|
+
rerender(renderSearch(loadedConfig));
|
|
771
|
+
await user.click(input);
|
|
772
|
+
|
|
773
|
+
await waitFor(() => {
|
|
774
|
+
expect(input).toHaveAttribute('aria-expanded', 'true');
|
|
775
|
+
expect(
|
|
776
|
+
screen.getByRole('option', {name: /Owner/, hidden: true}),
|
|
777
|
+
).toBeInTheDocument();
|
|
778
|
+
});
|
|
779
|
+
});
|
|
780
|
+
});
|