@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
- Note: in order for RTL to function correctly, make sure your component uses the `RtlMixin`.
53
+ The styles support the pseudo-classes `disabled`, `focus`, and `hover`, as well as the `aria-invalid` attribute.
54
54
 
55
- <!-- docs: demo code properties name:d2l-test-input-select -->
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 { css, html, LitElement } from 'lit';
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(RtlMixin(LitElement)) {
64
-
65
- static get properties() {
66
- return {
67
- disabled: { type: Boolean },
68
- invalid: { type: Boolean },
69
- overflow: { type: Boolean }
70
- };
71
- }
72
-
73
- static get styles() {
74
- return [super.styles, selectStyles,
75
- css`
76
- :host {
77
- display: inline-block;
78
- }
79
- :host([overflow]) select {
80
- max-width: 130px;
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.57.0",
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",