@atlaskit/inline-message 16.1.0 → 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.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/__tests__/playwright/top-layer-focus.spec.tsx +90 -0
  3. package/compass.yml +47 -0
  4. package/inline-message.docs.tsx +4 -0
  5. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 16.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
3
9
  ## 16.1.0
4
10
 
5
11
  ### Minor Changes
package/__tests__/playwright/top-layer-focus.spec.tsx ADDED
@@ -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.1.0",
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/"
@@ -31,17 +31,17 @@
31
31
  }
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/button": "^24.2.0",
34
+ "@atlaskit/button": "^24.3.0",
35
35
  "@atlaskit/ds-lib": "^8.0.0",
36
- "@atlaskit/icon": "^36.1.0",
36
+ "@atlaskit/icon": "^37.0.0",
37
37
  "@atlaskit/link": "^4.1.0",
38
38
  "@atlaskit/platform-feature-flags": "^2.0.0",
39
39
  "@atlaskit/popper": "^8.2.0",
40
40
  "@atlaskit/popup": "^5.1.0",
41
- "@atlaskit/primitives": "^20.1.0",
41
+ "@atlaskit/primitives": "^20.5.0",
42
42
  "@atlaskit/react-compiler-gating": "^0.2.0",
43
43
  "@atlaskit/theme": "^26.1.0",
44
- "@atlaskit/tokens": "^15.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,7 +53,7 @@
53
53
  "@af/integration-testing": "workspace:^",
54
54
  "@af/visual-regression": "workspace:^",
55
55
  "@atlaskit/docs": "^12.0.0",
56
- "@atlaskit/heading": "^6.1.0",
56
+ "@atlaskit/heading": "^6.2.0",
57
57
  "@atlaskit/modal-dialog": "^16.1.0",
58
58
  "@atlaskit/section-message": "^9.2.0",
59
59
  "@atlassian/ssr-tests": "workspace:^",