@brightspace-ui/core 1.234.1 → 1.234.4
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/README.md
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Backdrops
|
|
2
2
|
|
|
3
3
|
The `d2l-backdrop` element is a web component to display a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying `role="presentation"` and `aria-hidden="true"`.
|
|
4
4
|
|
|
5
|
+
## Backdrop [d2l-backdrop]
|
|
6
|
+
|
|
5
7
|
<!-- docs: demo live name:d2l-backdrop size:small -->
|
|
6
8
|
```html
|
|
7
9
|
<script type="module">
|
|
@@ -16,9 +16,9 @@ export const menuItemStyles = css`
|
|
|
16
16
|
width: 100%;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
:host(:focus),
|
|
20
|
+
:host([first]:focus),
|
|
19
21
|
:host(:hover),
|
|
20
|
-
:host(:focus-visible),
|
|
21
|
-
:host(:focus-visible[first]),
|
|
22
22
|
:host([first]:hover) {
|
|
23
23
|
background-color: var(--d2l-menu-background-color-hover);
|
|
24
24
|
border-bottom: 1px solid var(--d2l-menu-border-color-hover);
|
|
@@ -27,6 +27,16 @@ export const menuItemStyles = css`
|
|
|
27
27
|
z-index: 2;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
/** separated because safari is having trouble parsing these */
|
|
31
|
+
:host(:focus-visible),
|
|
32
|
+
:host(:focus-visible[first]) {
|
|
33
|
+
background-color: var(--d2l-menu-background-color-hover);
|
|
34
|
+
border-bottom: 1px solid var(--d2l-menu-border-color-hover);
|
|
35
|
+
border-top: 1px solid var(--d2l-menu-border-color-hover);
|
|
36
|
+
color: var(--d2l-menu-foreground-color-hover);
|
|
37
|
+
z-index: 2;
|
|
38
|
+
}
|
|
39
|
+
|
|
30
40
|
:host([disabled]), :host([disabled]:hover), :host([disabled]:focus-visible) {
|
|
31
41
|
cursor: default;
|
|
32
42
|
opacity: 0.75;
|
|
@@ -40,11 +50,15 @@ export const menuItemStyles = css`
|
|
|
40
50
|
border-top-color: transparent;
|
|
41
51
|
}
|
|
42
52
|
|
|
43
|
-
:host([last]:focus-visible),
|
|
44
53
|
:host([last]:hover) {
|
|
45
54
|
border-bottom-color: var(--d2l-menu-border-color-hover);
|
|
46
55
|
}
|
|
47
56
|
|
|
57
|
+
/** separated because safari is having trouble parsing these */
|
|
58
|
+
:host([last]:focus-visible) {
|
|
59
|
+
border-bottom-color: var(--d2l-menu-border-color-hover);
|
|
60
|
+
}
|
|
61
|
+
|
|
48
62
|
.d2l-menu-item-text {
|
|
49
63
|
flex: auto;
|
|
50
64
|
line-height: 1rem;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
# Off-screen Content
|
|
1
|
+
# Off-screen Content
|
|
2
2
|
|
|
3
3
|
Positioning content off-screen is a valuable accessibility technique that allows us to include content that is only visible to screen reader users. For more information on this approach, read [WebAIM's article on Invisible Content](http://webaim.org/techniques/css/invisiblecontent/).
|
|
4
4
|
|
|
5
|
+
## Offscreen Component [d2l-offscreen]
|
|
6
|
+
|
|
5
7
|
Import the `<d2l-offscreen>` web component and place your content within the default slot to position it off-screen. The content will be hidden in the UI but still discoverable by screen reader users.
|
|
6
8
|
|
|
7
9
|
<!-- docs: demo live name:d2l-offscreen -->
|
|
@@ -152,7 +152,7 @@ The `d2l-selection-action` is an optional component that provides a button for a
|
|
|
152
152
|
|
|
153
153
|
The `d2l-selection-action-dropdown` is an optional component that provides a button opener for dropdown content associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the opener should be non-interactive if nothing is selected.
|
|
154
154
|
|
|
155
|
-
<!-- docs: demo live name:d2l-selection-action-dropdown -->
|
|
155
|
+
<!-- docs: demo live name:d2l-selection-action-dropdown autoSize:false size:medium align:baseline -->
|
|
156
156
|
```html
|
|
157
157
|
<script type="module">
|
|
158
158
|
import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
|
|
@@ -184,7 +184,7 @@ The `d2l-selection-action-dropdown` is an optional component that provides a but
|
|
|
184
184
|
|
|
185
185
|
The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the menu item should be non-interactive if nothing is selected. This component enables the app to define an opener that is enabled regardless of the selection state, while having a menu containing one or more menu items that `requires-selection`.
|
|
186
186
|
|
|
187
|
-
<!-- docs: demo live name:d2l-selection-action-menu-item -->
|
|
187
|
+
<!-- docs: demo live name:d2l-selection-action-menu-item autoSize:false size:medium align:baseline -->
|
|
188
188
|
```html
|
|
189
189
|
<script type="module">
|
|
190
190
|
import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "1.234.
|
|
3
|
+
"version": "1.234.4",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|