@brightspace-ui/core 3.57.0 → 3.58.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.
@@ -50,58 +50,81 @@ Toggling progressive disclosure is OK
|
|
50
50
|
|
51
51
|
Native `<select>` elements can be styled by importing `input-select-styles.js` into your LitElement and applying the `d2l-input-select` CSS class.
|
52
52
|
|
53
|
-
|
53
|
+
The styles support the pseudo-classes `disabled`, `focus`, and `hover`, as well as the `aria-invalid` attribute.
|
54
54
|
|
55
|
-
|
55
|
+
When applying styles to the native element, we also recommend using the [`SkeletonMixin`](https://github.com/BrightspaceUI/core/tree/main/components/skeleton) to help convey to users that the page, or at least a section of it, has not finished loading yet.
|
56
|
+
|
57
|
+
<!-- docs: demo code -->
|
56
58
|
```html
|
57
59
|
<script type="module">
|
58
|
-
import {
|
59
|
-
import { RtlMixin } from '@brightspace-ui/core/mixins/rtl/rtl-mixin.js';
|
60
|
+
import { html, LitElement } from 'lit';
|
60
61
|
import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
|
61
62
|
import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
|
62
63
|
|
63
|
-
class TestInputSelect extends SkeletonMixin(
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
}
|
82
|
-
`
|
83
|
-
];
|
84
|
-
}
|
85
|
-
|
86
|
-
render() {
|
87
|
-
const invalid = this.invalid ? 'true' : 'false';
|
88
|
-
return html`
|
89
|
-
<div class="d2l-skeletize">
|
90
|
-
<select
|
91
|
-
aria-label="Choose a dinosaur:"
|
92
|
-
aria-invalid="${invalid}"
|
93
|
-
class="d2l-input-select"
|
94
|
-
?disabled="${this.disabled}">
|
95
|
-
<option>Tyrannosaurus</option>
|
96
|
-
<option>Velociraptor</option>
|
97
|
-
<option>Deinonychus</option>
|
98
|
-
</select>
|
99
|
-
</div>
|
100
|
-
`;
|
101
|
-
}
|
64
|
+
class TestInputSelect extends SkeletonMixin(LitElement) {
|
65
|
+
static get styles() {
|
66
|
+
return [ super.styles, selectStyles ];
|
67
|
+
}
|
68
|
+
|
69
|
+
render() {
|
70
|
+
return html`
|
71
|
+
<div class="d2l-skeletize">
|
72
|
+
<select
|
73
|
+
aria-label="Choose a dinosaur:"
|
74
|
+
class="d2l-input-select">
|
75
|
+
<option>Tyrannosaurus</option>
|
76
|
+
<option>Velociraptor</option>
|
77
|
+
<option>Deinonychus</option>
|
78
|
+
</select>
|
79
|
+
</div>
|
80
|
+
`;
|
81
|
+
}
|
102
82
|
|
103
83
|
}
|
104
84
|
customElements.define('d2l-test-input-select', TestInputSelect);
|
105
85
|
</script>
|
106
86
|
<d2l-test-input-select></d2l-test-input-select>
|
107
87
|
```
|
88
|
+
|
89
|
+
### Invalid
|
90
|
+
|
91
|
+
Use the [`aria-invalid`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-invalid) attribute to support screenreader users and apply our consistent error styles.
|
92
|
+
|
93
|
+
<!-- docs: demo -->
|
94
|
+
```html
|
95
|
+
<script type="module">
|
96
|
+
import { html, LitElement } from 'lit';
|
97
|
+
import { selectStyles } from '@brightspace-ui/core/components/inputs/input-select-styles.js';
|
98
|
+
|
99
|
+
class TestInputSelect extends LitElement {
|
100
|
+
|
101
|
+
static get styles() {
|
102
|
+
return [ selectStyles ];
|
103
|
+
}
|
104
|
+
|
105
|
+
render() {
|
106
|
+
return html`
|
107
|
+
<select
|
108
|
+
aria-label="Choose a dinosaur:"
|
109
|
+
aria-invalid="true"
|
110
|
+
class="d2l-input-select">
|
111
|
+
<option>Tyrannosaurus</option>
|
112
|
+
<option>Velociraptor</option>
|
113
|
+
<option>Deinonychus</option>
|
114
|
+
</select>
|
115
|
+
`;
|
116
|
+
}
|
117
|
+
|
118
|
+
}
|
119
|
+
customElements.define('d2l-test-input-select', TestInputSelect);
|
120
|
+
</script>
|
121
|
+
<d2l-test-input-select></d2l-test-input-select>
|
122
|
+
```
|
123
|
+
|
124
|
+
## Accessibility
|
125
|
+
|
126
|
+
- Due to applying styles based on a CSS class rather than being its own component, the accessibility provided by `selectStyles` comes purely in the way of following the guidelines for [contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) and [focus](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
|
127
|
+
- There are several things that can be done to make sure your `select` component is accessible, including:
|
128
|
+
- Following the W3C [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) pattern
|
129
|
+
- Using either the `aria-label` or `aria-labelledby` to appropriately assign a label to your component
|
130
|
+
- Using `label` for `optgroup` if you choose to use that element within the select element, so that it can be read out to screenreaders
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@brightspace-ui/core",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.58.0",
|
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",
|