@brightspace-ui/core 3.27.4 → 3.27.6

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/components/list/list-item-generic-layout.js

@@ -455,6 +455,8 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 						const nestedListItems = [...nestedList.children].filter(node => node.role === 'rowgroup');
 						if (nestedListItems.length) {
 							previousElement = nestedListItems[nestedListItems.length - 1];
+						} else {
+							break;
 						}
 					}
 				}	while (nestedList);

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.4",
+  "version": "3.27.6",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",