@atlaskit/navigation-system 9.2.0 → 9.2.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
CHANGED
|
@@ -104,6 +104,17 @@ The main difference between aside, panel and modal dialog is their behaviours:
|
|
|
104
104
|
decision or completing an action, before they can return to their primary task.
|
|
105
105
|
- Don’t use aside for new experiences. It is planned for deprecation.
|
|
106
106
|
|
|
107
|
+
## Accessibility
|
|
108
|
+
|
|
109
|
+
- Always place slots in this order as direct children of the root: banner, top nav, side nav, main,
|
|
110
|
+
aside, panel. This determines the keyboard tab order, screen reader reading order, and skip link
|
|
111
|
+
order.
|
|
112
|
+
- Provide a unique, meaningful `label` for side nav, aside, panel, and top nav end. The label is
|
|
113
|
+
exposed as the landmark's accessible name. Don't repeat the landmark's role in the label.
|
|
114
|
+
- Slots provide landmark roles automatically. Don't add or duplicate landmark roles inside them.
|
|
115
|
+
- Use custom skip links sparingly. Too many skip links makes the skip links menu noisy. Consider the
|
|
116
|
+
utility of each one before adding it.
|
|
117
|
+
|
|
107
118
|
## Best practices
|
|
108
119
|
|
|
109
120
|
### Design using grid in the main area
|
|
@@ -40,6 +40,17 @@ The current navigation has specific menu items that are similar across apps. Mak
|
|
|
40
40
|
navigation follows Atlassian patterns consistently. For all the guidelines, see
|
|
41
41
|
[navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/spaces/navx/pages/5104144812).
|
|
42
42
|
|
|
43
|
+
## Accessibility
|
|
44
|
+
|
|
45
|
+
- Always provide a meaningful `label` for every top nav item. The label becomes the accessible name
|
|
46
|
+
and the visible tooltip.
|
|
47
|
+
- When a top nav item triggers a popup, menu, or dialog, pass the relevant `aria-controls`,
|
|
48
|
+
`aria-expanded`, and `aria-haspopup` props from that component to the top nav item.
|
|
49
|
+
- Use the `shortcut` prop to surface a keyboard shortcut in the tooltip when one exists. This makes
|
|
50
|
+
the shortcut discoverable for keyboard users.
|
|
51
|
+
- Use `isSelected` to indicate when a corresponding popup or panel is open. This exposes the state
|
|
52
|
+
to assistive technology.
|
|
53
|
+
|
|
43
54
|
## Best practices
|
|
44
55
|
|
|
45
56
|
### Use the top nav items provided
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/navigation-system",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.1",
|
|
4
4
|
"description": "The latest navigation system for Atlassian apps.",
|
|
5
5
|
"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
|
|
6
6
|
"author": "Atlassian Pty Ltd",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@atlaskit/button": "^23.11.0",
|
|
77
77
|
"@atlaskit/css": "^0.19.0",
|
|
78
78
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
79
|
-
"@atlaskit/icon": "^34.
|
|
79
|
+
"@atlaskit/icon": "^34.4.0",
|
|
80
80
|
"@atlaskit/layering": "^3.7.0",
|
|
81
81
|
"@atlaskit/logo": "^20.1.0",
|
|
82
82
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
@@ -106,12 +106,14 @@
|
|
|
106
106
|
"@atlaskit/banner": "^14.1.0",
|
|
107
107
|
"@atlaskit/breadcrumbs": "^16.1.0",
|
|
108
108
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
109
|
+
"@atlaskit/flag": "^17.11.0",
|
|
109
110
|
"@atlaskit/form": "^15.5.0",
|
|
110
111
|
"@atlaskit/heading": "^5.4.0",
|
|
112
|
+
"@atlaskit/inline-dialog": "^18.1.0",
|
|
111
113
|
"@atlaskit/link": "^3.4.0",
|
|
112
114
|
"@atlaskit/lozenge": "^13.8.0",
|
|
113
115
|
"@atlaskit/menu": "^8.5.0",
|
|
114
|
-
"@atlaskit/modal-dialog": "^
|
|
116
|
+
"@atlaskit/modal-dialog": "^15.0.0",
|
|
115
117
|
"@atlaskit/onboarding": "^14.6.0",
|
|
116
118
|
"@atlaskit/page-header": "^12.2.0",
|
|
117
119
|
"@atlaskit/page-layout": "^4.3.0",
|
|
@@ -119,11 +121,13 @@
|
|
|
119
121
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
120
122
|
"@atlaskit/select": "^21.10.0",
|
|
121
123
|
"@atlaskit/skeleton": "^2.1.0",
|
|
124
|
+
"@atlaskit/spotlight": "^0.14.0",
|
|
122
125
|
"@atlaskit/textfield": "^8.3.0",
|
|
126
|
+
"@atlaskit/top-layer": "^0.6.0",
|
|
123
127
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
124
128
|
"@atlassian/gemini": "^1.44.0",
|
|
125
129
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
126
|
-
"@atlassian/search-dialog": "^10.
|
|
130
|
+
"@atlassian/search-dialog": "^10.2.0",
|
|
127
131
|
"@atlassian/ssr-tests": "workspace:^",
|
|
128
132
|
"@atlassian/test-utils": "^1.0.0",
|
|
129
133
|
"@atlassian/testing-library": "^0.5.0",
|
|
@@ -153,6 +157,10 @@
|
|
|
153
157
|
}
|
|
154
158
|
},
|
|
155
159
|
"platform-feature-flags": {
|
|
160
|
+
"platform-dst-top-layer": {
|
|
161
|
+
"type": "boolean",
|
|
162
|
+
"referenceOnly": true
|
|
163
|
+
},
|
|
156
164
|
"platform-component-visual-refresh": {
|
|
157
165
|
"type": "boolean",
|
|
158
166
|
"referenceOnly": true
|