@brightspace-ui/core 3.27.5 → 3.27.7

package/components/backdrop/backdrop.js

@@ -4,6 +4,7 @@ import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '..
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
+const TRANSITION_DURATION = 200;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -47,7 +48,7 @@ class Backdrop extends LitElement {
 				opacity: 0;
 				position: fixed;
 				top: 0;
-				transition: opacity 200ms ease-in;
+				transition: opacity ${TRANSITION_DURATION}ms ease-in;
 				width: 0;
 				z-index: 999;
 			}
@@ -123,6 +124,7 @@ class Backdrop extends LitElement {
 			if (!reduceMotion && !this.noAnimateHide && isVisible(this)) {
 				this.addEventListener('transitionend', hide, { once: true });
 				this._state = 'hiding';
+				setTimeout(() => this._state === 'hiding' && hide(), TRANSITION_DURATION + 100);
 			} else {
 				hide();
 			}

package/components/inputs/docs/input-search.md

@@ -55,8 +55,8 @@ For text searches use `<d2l-input-search>`, which wraps the native `<input type=
 
 | Property | Type | Description |
 |---|---|---|
-| `label` | String, required | Accessible label for the input |
-| `description` | String | Additional information communicated in the `aria-describedby` on the input |
+| `label` | String, required | Acts as the primary label for the input. Not visible. |
+| `description` | String | Additional information communicated to screenreader users when they focus on the input |
 | `disabled` | Boolean | Disables the input |
 | `maxlength` | Number | Imposes an upper character limit |
 | `no-clear` | Boolean | Prevents the "clear" button from appearing |
@@ -82,11 +82,11 @@ When the input is cleared, the same event will be fired with an empty value.
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
+## Accessbility
 
-To make your usage of `d2l-input-search` accessible, use the following property when applicable:
-
-| Attribute | Description |
-|---|---|
-| `description` | Use when label on input does not provide enough context. |
-| `label` | **REQUIRED** [Acts as a primary label on the input](https://www.w3.org/WAI/tutorials/forms/labels/). Not visible. |
+- While the component does not have a visible label, the search icon clearly indicates its purpose
+	- While not required to meet WCAG, this [pattern](https://www.w3.org/WAI/WCAG2/supplemental/patterns/o1p07-icons-used/) is a great way to help individuals with cognitive accessibility needs
+	- The contrast ratio of the placeholder text can be safely ignored since the search icon serves the same purpose, and meets that criteria
+- It is important to note that `placeholder` is not a suitable replacement for `label` or `description`, since it only applies when the input is empty, and not all users will be able to read it in the first place
+- Search results should be announced to screen reader users using a live region around the result summary or by using the [`announce`](https://github.com/BrightspaceUI/core/blob/main/helpers/announce.js) helper
+	- It can also be used to help confirm what exactly was searched, along with how many results were found

package/components/inputs/input-search.js

@@ -21,7 +21,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 	static get properties() {
 		return {
 			/**
-			 * Additional information communicated in the aria-describedby on the input
+			 * ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input
 			 * @type {string}
 			 */
 			description: { type: String, reflect: true },
@@ -31,7 +31,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 			 */
 			disabled: { type: Boolean },
 			/**
-			 * REQUIRED: Accessible label for the input
+			 * ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.
 			 * @type {string}
 			 */
 			label: { type: String },

package/custom-elements.json

@@ -6746,12 +6746,12 @@
       "attributes": [
         {
           "name": "description",
-          "description": "Additional information communicated in the aria-describedby on the input",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
         {
           "name": "label",
-          "description": "REQUIRED: Accessible label for the input",
+          "description": "ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.",
           "type": "string"
         },
         {
@@ -6793,13 +6793,13 @@
         {
           "name": "description",
           "attribute": "description",
-          "description": "Additional information communicated in the aria-describedby on the input",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
           "type": "string"
         },
         {
           "name": "label",
           "attribute": "label",
-          "description": "REQUIRED: Accessible label for the input",
+          "description": "ACCESSIBILITY: REQUIRED: Acts as the primary label for the input. Not visible.",
           "type": "string"
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.27.5",
+  "version": "3.27.7",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",