@atlaskit/inline-message 16.0.1 → 16.1.1
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 +25 -1
- package/__tests__/playwright/top-layer-focus.spec.tsx +90 -0
- package/compass.yml +47 -0
- package/inline-message.docs.tsx +4 -0
- package/package.json +14 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,35 @@
|
|
|
1
1
|
# @atlaskit/inline-message
|
|
2
2
|
|
|
3
|
+
## 16.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 16.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`cd097a2111788`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd097a2111788) -
|
|
14
|
+
Republish packages depending on `@atlaskit/react-compiler-gating` so their published dependency
|
|
15
|
+
reference is updated to the renamed `@atlaskit/react-compiler-gating` scope.
|
|
16
|
+
|
|
17
|
+
The earlier rename of `@atlassian/react-compiler-gating` to `@atlaskit/react-compiler-gating` only
|
|
18
|
+
bumped the renamed package itself, so dependent packages were never republished and their
|
|
19
|
+
published versions still referenced the old `@atlassian/react-compiler-gating` name, which is not
|
|
20
|
+
available in the public npm registry. This minor bump republishes all affected packages with the
|
|
21
|
+
corrected dependency.
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- Updated dependencies
|
|
26
|
+
|
|
3
27
|
## 16.0.1
|
|
4
28
|
|
|
5
29
|
### Patch Changes
|
|
6
30
|
|
|
7
31
|
- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
|
|
8
|
-
Add @
|
|
32
|
+
Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform
|
|
9
33
|
gating.
|
|
10
34
|
- Updated dependencies
|
|
11
35
|
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { expect, test } from '@af/integration-testing';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Inline message: focus contract on the top-layer code path.
|
|
5
|
+
*
|
|
6
|
+
* `InlineMessage` renders a trigger button that opens a `role="dialog"`
|
|
7
|
+
* popover (via the `@atlaskit/popup` it composes). Per WCAG 2.4.3 (Focus
|
|
8
|
+
* Order) and the top-layer focus rules:
|
|
9
|
+
*
|
|
10
|
+
* 1. Initial focus moves to the first focusable element inside the popover on
|
|
11
|
+
* open.
|
|
12
|
+
* 2. Escape closes the popover and restores focus to the trigger.
|
|
13
|
+
* 3. Tab moves focus between focusable elements within the popover.
|
|
14
|
+
*
|
|
15
|
+
* `InlineMessage` has no local `@atlaskit/top-layer` import; the top-layer
|
|
16
|
+
* rendering path is provided by the `@atlaskit/popup` it composes, gated on
|
|
17
|
+
* the `platform-dst-top-layer` flag.
|
|
18
|
+
*
|
|
19
|
+
* See: `platform/packages/design-system/top-layer/notes/architecture/focus.md`.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
const featureFlag = 'platform-dst-top-layer';
|
|
23
|
+
|
|
24
|
+
// InlineMessage examples may carry pre-existing accessibility violations
|
|
25
|
+
// unrelated to the top-layer focus contract under test here.
|
|
26
|
+
test.beforeEach(({ skipAxeCheck }) => {
|
|
27
|
+
skipAxeCheck();
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
test.describe('Inline message: top-layer focus contract', () => {
|
|
31
|
+
test('initial focus: focus moves to the first focusable on open', async ({ page }) => {
|
|
32
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
33
|
+
'design-system',
|
|
34
|
+
'inline-message',
|
|
35
|
+
'testing-top-layer-focus',
|
|
36
|
+
{ featureFlag },
|
|
37
|
+
);
|
|
38
|
+
|
|
39
|
+
const trigger = page.getByTestId('inline-message--button');
|
|
40
|
+
await trigger.click();
|
|
41
|
+
|
|
42
|
+
const popup = page.getByTestId('inline-message--popup--content');
|
|
43
|
+
await expect(popup).toBeVisible();
|
|
44
|
+
|
|
45
|
+
await expect(page.getByTestId('inline-message-first-button')).toBeFocused();
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
test('focus restoration: Escape restores focus to the trigger', async ({ page }) => {
|
|
49
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
50
|
+
'design-system',
|
|
51
|
+
'inline-message',
|
|
52
|
+
'testing-top-layer-focus',
|
|
53
|
+
{ featureFlag },
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const trigger = page.getByTestId('inline-message--button');
|
|
57
|
+
await trigger.click();
|
|
58
|
+
|
|
59
|
+
const popup = page.getByTestId('inline-message--popup--content');
|
|
60
|
+
await expect(popup).toBeVisible();
|
|
61
|
+
|
|
62
|
+
await page.keyboard.press('Escape');
|
|
63
|
+
await expect(popup).toBeHidden();
|
|
64
|
+
await expect(trigger).toBeFocused();
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
test('focus movement: Tab moves focus between focusable elements within the popover', async ({
|
|
68
|
+
page,
|
|
69
|
+
}) => {
|
|
70
|
+
await page.visitExample<typeof import('../../examples/testing-top-layer-focus.tsx')>(
|
|
71
|
+
'design-system',
|
|
72
|
+
'inline-message',
|
|
73
|
+
'testing-top-layer-focus',
|
|
74
|
+
{ featureFlag },
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
const trigger = page.getByTestId('inline-message--button');
|
|
78
|
+
await trigger.click();
|
|
79
|
+
|
|
80
|
+
const popup = page.getByTestId('inline-message--popup--content');
|
|
81
|
+
await expect(popup).toBeVisible();
|
|
82
|
+
|
|
83
|
+
const first = page.getByTestId('inline-message-first-button');
|
|
84
|
+
const second = page.getByTestId('inline-message-second-button');
|
|
85
|
+
|
|
86
|
+
await expect(first).toBeFocused();
|
|
87
|
+
await page.keyboard.press('Tab');
|
|
88
|
+
await expect(second).toBeFocused();
|
|
89
|
+
});
|
|
90
|
+
});
|
package/compass.yml
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
configVersion: 1
|
|
2
|
+
id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/239caad1-1c00-4512-a84c-00bf5ad4aadb
|
|
3
|
+
name: '@atlaskit/inline-message'
|
|
4
|
+
ownerId: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
|
|
5
|
+
labels:
|
|
6
|
+
- platform-code
|
|
7
|
+
- platform-afm
|
|
8
|
+
typeId: OTHER
|
|
9
|
+
fields:
|
|
10
|
+
tier: 4
|
|
11
|
+
lifecycle: Active
|
|
12
|
+
isMonorepoProject: true
|
|
13
|
+
links:
|
|
14
|
+
- name: Root Repository
|
|
15
|
+
type: REPOSITORY
|
|
16
|
+
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
|
|
17
|
+
- name: Slack Channel
|
|
18
|
+
type: CHAT_CHANNEL
|
|
19
|
+
url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
|
|
20
|
+
- name: Inline Message
|
|
21
|
+
type: REPOSITORY
|
|
22
|
+
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/inline-message
|
|
23
|
+
customFields:
|
|
24
|
+
- name: Department
|
|
25
|
+
type: text
|
|
26
|
+
value: Eng - Design System Fundamentals
|
|
27
|
+
- name: Technical Owner
|
|
28
|
+
type: user
|
|
29
|
+
value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
|
|
30
|
+
- name: Reviewer Team
|
|
31
|
+
type: text
|
|
32
|
+
value: ari:cloud:teams::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
|
|
33
|
+
- name: Required Reviewers Opt In
|
|
34
|
+
type: boolean
|
|
35
|
+
value: true
|
|
36
|
+
- name: Reviewer Selection Mechanism
|
|
37
|
+
type: text
|
|
38
|
+
value: random(3)
|
|
39
|
+
- name: Required Reviewer Approvals
|
|
40
|
+
type: number
|
|
41
|
+
value: 1
|
|
42
|
+
- name: Trusted Committers
|
|
43
|
+
type: text
|
|
44
|
+
value: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
|
|
45
|
+
- name: Trusted Reviewer Teams
|
|
46
|
+
type: text
|
|
47
|
+
value: ari:cloud:teams::team/42f4416b-e028-4daa-b2a5-afe213ac75e1 # Design System Designers
|
package/inline-message.docs.tsx
CHANGED
|
@@ -8,6 +8,10 @@ const documentation: StructuredContentSource = {
|
|
|
8
8
|
name: 'InlineMessage',
|
|
9
9
|
description: 'In-context notification for more info, warning, error, or confirmation.',
|
|
10
10
|
status: 'general-availability',
|
|
11
|
+
designSource: {
|
|
12
|
+
figmaUrl:
|
|
13
|
+
'https://www.figma.com/design/BGz5AdkWe3yTIYdKnTSZuY/ADS-Components?node-id=13976-99230',
|
|
14
|
+
},
|
|
11
15
|
import: {
|
|
12
16
|
name: 'InlineMessage',
|
|
13
17
|
package: '@atlaskit/inline-message',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/inline-message",
|
|
3
|
-
"version": "16.
|
|
3
|
+
"version": "16.1.1",
|
|
4
4
|
"description": "An inline message lets users know when important information is available or when an action is required.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"react-compiler": {
|
|
21
21
|
"enabled": true,
|
|
22
22
|
"gating": {
|
|
23
|
-
"source": "@
|
|
23
|
+
"source": "@atlaskit/react-compiler-gating",
|
|
24
24
|
"importSpecifierName": "isReactCompilerActivePlatform"
|
|
25
25
|
}
|
|
26
26
|
},
|
|
@@ -31,17 +31,17 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/button": "^24.
|
|
34
|
+
"@atlaskit/button": "^24.3.0",
|
|
35
35
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
36
|
-
"@atlaskit/icon": "^
|
|
37
|
-
"@atlaskit/link": "^4.
|
|
36
|
+
"@atlaskit/icon": "^37.0.0",
|
|
37
|
+
"@atlaskit/link": "^4.1.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
39
|
-
"@atlaskit/popper": "^8.
|
|
40
|
-
"@atlaskit/popup": "^5.
|
|
41
|
-
"@atlaskit/primitives": "^20.
|
|
42
|
-
"@atlaskit/
|
|
43
|
-
"@atlaskit/
|
|
44
|
-
"@
|
|
39
|
+
"@atlaskit/popper": "^8.2.0",
|
|
40
|
+
"@atlaskit/popup": "^5.1.0",
|
|
41
|
+
"@atlaskit/primitives": "^20.5.0",
|
|
42
|
+
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
43
|
+
"@atlaskit/theme": "^26.1.0",
|
|
44
|
+
"@atlaskit/tokens": "^15.5.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@compiled/react": "^0.20.0"
|
|
47
47
|
},
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
"@af/integration-testing": "workspace:^",
|
|
54
54
|
"@af/visual-regression": "workspace:^",
|
|
55
55
|
"@atlaskit/docs": "^12.0.0",
|
|
56
|
-
"@atlaskit/heading": "^6.
|
|
57
|
-
"@atlaskit/modal-dialog": "^16.
|
|
58
|
-
"@atlaskit/section-message": "^9.
|
|
56
|
+
"@atlaskit/heading": "^6.2.0",
|
|
57
|
+
"@atlaskit/modal-dialog": "^16.1.0",
|
|
58
|
+
"@atlaskit/section-message": "^9.2.0",
|
|
59
59
|
"@atlassian/ssr-tests": "workspace:^",
|
|
60
60
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
61
61
|
"@testing-library/react": "^16.3.0",
|