@spectrum-web-components/alert-banner 1.5.1-beta.0 → 1.6.0-beta.0

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 (2) hide show
  1. package/README.md +75 -37
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,31 +1,29 @@
1
- ## Description
1
+ ## Overview
2
2
 
3
- The `<sp-alert-banner>` shows pressing and high-signal messages, such as system alerts. It is meant to be noticed and prompt users to take action.
3
+ The `<sp-alert-banner>` displays pressing and high-signal messages, such as system alerts. It is intended to be noticeable and prompt users to take action.
4
4
 
5
5
  ### Usage
6
6
 
7
7
  [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/alert-banner?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/alert-banner)
8
8
  [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/alert-banner?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/alert-banner)
9
9
 
10
- ```
10
+ ```bash
11
11
  yarn add @spectrum-web-components/alert-banner
12
12
  ```
13
13
 
14
14
  Import the side effectful registration of `<sp-alert-banner>` via:
15
15
 
16
- ```
16
+ ```javascript
17
17
  import '@spectrum-web-components/alert-banner/sp-alert-banner.js';
18
18
  ```
19
19
 
20
- When looking to leverage the `AlertBanner` base class as a type and/or for extension purposes, do so via:
20
+ ### Anatomy
21
21
 
22
- ```
23
- import { AlertBanner } from '@spectrum-web-components/alert-banner';
24
- ```
22
+ The alert dialog consists of several key parts:
25
23
 
26
- ## Examples
24
+ #### Content
27
25
 
28
- The alert banner accepts text context in the default slot provided:
26
+ The message in its default slot.
29
27
 
30
28
  ```html
31
29
  <sp-alert-banner open>
@@ -33,32 +31,41 @@ The alert banner accepts text context in the default slot provided:
33
31
  </sp-alert-banner>
34
32
  ```
35
33
 
36
- ### Dismissible
34
+ #### Action
37
35
 
38
- Use the `dismissible` attribute to include an icon-only close button used to dismiss the alert banner:
36
+ An optional action using `slot="action"`:
39
37
 
40
38
  ```html
41
- <sp-alert-banner open dismissible>
42
- All documents in this folder have been archived
39
+ <sp-alert-banner open>
40
+ Your trial has expired
41
+ <sp-button treatment="outline" variant="secondary" slot="action">
42
+ Buy now
43
+ </sp-button>
43
44
  </sp-alert-banner>
45
+ <bd></bd>
44
46
  ```
45
47
 
46
- ### Actionable
48
+ ### Options
49
+
50
+ #### Dismissable
47
51
 
48
- Use the action slot for the contextual action that a user can take in response to the issue described:
52
+ Use the `dismissible` attribute to include an icon-only close button used to dismiss the alert banner:
49
53
 
50
54
  ```html
51
55
  <sp-alert-banner open dismissible>
52
- Your trial has expired
53
- <sp-button treatment="outline" static-color="white" slot="action">
54
- Buy now
55
- </sp-button>
56
+ All documents in this folder have been archived
56
57
  </sp-alert-banner>
57
58
  ```
58
59
 
59
- ## Variants
60
+ #### Variants
61
+
62
+ The `<sp-alert-banner>` supports three variants, `neutral`(default), `info` and `negative`, to convey the nature of the message:
63
+
64
+ <sp-tabs selected="info" auto label="Variants">
65
+ <sp-tab value="info">Info</sp-tab>
66
+ <sp-tab-panel value="info">
60
67
 
61
- ### Info
68
+ Use `variant="info"` for informational messages.
62
69
 
63
70
  ```html
64
71
  <sp-alert-banner open variant="info" dismissible>
@@ -69,15 +76,22 @@ Use the action slot for the contextual action that a user can take in response t
69
76
  </sp-alert-banner>
70
77
  ```
71
78
 
72
- ### Negative
79
+ </sp-tab-panel>
80
+ <sp-tab value="negative">Negative</sp-tab>
81
+ <sp-tab-panel value="negative">
82
+
83
+ Use `variant="negative"` for error or warning messages.
73
84
 
74
85
  ```html
75
86
  <sp-alert-banner open variant="negative" dismissible>
76
- Connection interupted. Check your network to continue
87
+ Connection interrupted. Check your network to continue
77
88
  </sp-alert-banner>
78
89
  ```
79
90
 
80
- ## Closing the alert banner
91
+ </sp-tab-panel>
92
+ </sp-tabs>
93
+
94
+ ### Behaviors
81
95
 
82
96
  Alert banners should be used for system-level messages and they should be dismissed only as a result of a user action or if the internal state that triggered the alert has been resolved.
83
97
 
@@ -85,15 +99,39 @@ The alert can be dismissed by triggering the close button in case of a dismissib
85
99
 
86
100
  The component dispatches a `close` event to announce that the alert banner has been closed. This can be prevented by using the `event.preventDefault()` API.
87
101
 
88
- ## Accessibility
89
-
90
- The `sp-alert-banner` element is rendered with a `role` of `alert`, to inform screen readers and notify users accordingly. When rendering an alert that is dismissable or has actions on a page, it should be placed in a container with a `role` of `region` and that region should be labelled for screen readers users to quickly navigate.
91
-
92
- The alert banner supports keyboard interaction as follows:
93
-
94
- - _Tab_ should place focus on the next interactive element, which can be either the actionable button or the close button.
95
- - _Tab + Shift_ should place focus on the previous interactive element.
96
- - _Space_ or _Enter_ should trigger the interaction if one of the buttons is focused, thus dismissing the alert in case of the close button or triggering the corresponding contextual action.
97
- - _Esc_ will dismiss an alert banner if it’s a dismissible alert.
98
-
99
- Once focus is on the alert banner, arrow keys can be used to navigate between the close button and the slotted action buttons.
102
+ ### Accessibility
103
+
104
+ The `<sp-alert-banner>` is rendered with a `role` of `alert` to notify screen readers.
105
+
106
+ When rendering an alert that is dismissable or has actions on a page, ensure the alert is placed in a container with a `role` of `region` that includes a unique `aria-label` or `aria-labelledby` for better accessibility.
107
+
108
+ It supports keyboard interactions, including:
109
+
110
+ <sp-table>
111
+ <sp-table-head>
112
+ <sp-table-head-cell>Key</sp-table-head-cell>
113
+ <sp-table-head-cell>Action</sp-table-head-cell>
114
+ </sp-table-head>
115
+ <sp-table-body>
116
+ <sp-table-row>
117
+ <sp-table-cell><kbd>Tab</kbd></sp-table-cell>
118
+ <sp-table-cell>Navigate to the next interactive element</sp-table-cell>
119
+ </sp-table-row>
120
+ <sp-table-row>
121
+ <sp-table-cell><kbd>Shift + Tab</kbd></sp-table-cell>
122
+ <sp-table-cell>Navigate to the previous interactive element</sp-table-cell>
123
+ </sp-table-row>
124
+ <sp-table-row>
125
+ <sp-table-cell><kbd>Space</kbd>/<kbd>Enter</kbd></sp-table-cell>
126
+ <sp-table-cell>Trigger the focused button</sp-table-cell>
127
+ </sp-table-row>
128
+ <sp-table-row>
129
+ <sp-table-cell><kbd>Esc</kbd></sp-table-cell>
130
+ <sp-table-cell>Dismiss a dismissible alert</sp-table-cell>
131
+ </sp-table-row>
132
+ <sp-table-row>
133
+ <sp-table-cell><kbd>ArrowLeft</kbd>/<kbd>ArrowRight</kbd>/<kbd>ArrowUp</kbd>/<kbd>ArrowDown</kbd></sp-table-cell>
134
+ <sp-table-cell>Once focus is on the alert banner, arrow keys can be used to navigate between the close button and the slotted action buttons</sp-table-cell>
135
+ </sp-table-row>
136
+ </sp-table-body>
137
+ </sp-table>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/alert-banner",
3
- "version": "1.5.1-beta.0",
3
+ "version": "1.6.0-beta.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -64,9 +64,9 @@
64
64
  "css"
65
65
  ],
66
66
  "dependencies": {
67
- "@spectrum-web-components/base": "1.5.1-beta.0",
68
- "@spectrum-web-components/button": "1.5.1-beta.0",
69
- "@spectrum-web-components/icons-workflow": "1.5.1-beta.0"
67
+ "@spectrum-web-components/base": "1.6.0-beta.0",
68
+ "@spectrum-web-components/button": "1.6.0-beta.0",
69
+ "@spectrum-web-components/icons-workflow": "1.6.0-beta.0"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@spectrum-css/alertbanner": "3.1.1"