@instructure/ui-select 10.6.1-snapshot-4 → 10.6.1-snapshot-5

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.6.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1-snapshot-4) (2024-11-20)
+## [10.6.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1-snapshot-5) (2024-11-21)
 
 **Note:** Version bump only for package @instructure/ui-select
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "10.6.1-snapshot-4",
+  "version": "10.6.1-snapshot-5",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,13 +23,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.6.1-snapshot-4",
-    "@instructure/ui-babel-preset": "10.6.1-snapshot-4",
-    "@instructure/ui-color-utils": "10.6.1-snapshot-4",
-    "@instructure/ui-scripts": "10.6.1-snapshot-4",
-    "@instructure/ui-test-locator": "10.6.1-snapshot-4",
-    "@instructure/ui-test-utils": "10.6.1-snapshot-4",
-    "@instructure/ui-themes": "10.6.1-snapshot-4",
+    "@instructure/ui-axe-check": "10.6.1-snapshot-5",
+    "@instructure/ui-babel-preset": "10.6.1-snapshot-5",
+    "@instructure/ui-color-utils": "10.6.1-snapshot-5",
+    "@instructure/ui-scripts": "10.6.1-snapshot-5",
+    "@instructure/ui-test-locator": "10.6.1-snapshot-5",
+    "@instructure/ui-test-utils": "10.6.1-snapshot-5",
+    "@instructure/ui-themes": "10.6.1-snapshot-5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -37,22 +37,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.6.1-snapshot-4",
-    "@instructure/shared-types": "10.6.1-snapshot-4",
-    "@instructure/ui-dom-utils": "10.6.1-snapshot-4",
-    "@instructure/ui-form-field": "10.6.1-snapshot-4",
-    "@instructure/ui-icons": "10.6.1-snapshot-4",
-    "@instructure/ui-options": "10.6.1-snapshot-4",
-    "@instructure/ui-popover": "10.6.1-snapshot-4",
-    "@instructure/ui-position": "10.6.1-snapshot-4",
-    "@instructure/ui-prop-types": "10.6.1-snapshot-4",
-    "@instructure/ui-react-utils": "10.6.1-snapshot-4",
-    "@instructure/ui-selectable": "10.6.1-snapshot-4",
-    "@instructure/ui-testable": "10.6.1-snapshot-4",
-    "@instructure/ui-text-input": "10.6.1-snapshot-4",
-    "@instructure/ui-utils": "10.6.1-snapshot-4",
-    "@instructure/ui-view": "10.6.1-snapshot-4",
-    "@instructure/uid": "10.6.1-snapshot-4",
+    "@instructure/emotion": "10.6.1-snapshot-5",
+    "@instructure/shared-types": "10.6.1-snapshot-5",
+    "@instructure/ui-dom-utils": "10.6.1-snapshot-5",
+    "@instructure/ui-form-field": "10.6.1-snapshot-5",
+    "@instructure/ui-icons": "10.6.1-snapshot-5",
+    "@instructure/ui-options": "10.6.1-snapshot-5",
+    "@instructure/ui-popover": "10.6.1-snapshot-5",
+    "@instructure/ui-position": "10.6.1-snapshot-5",
+    "@instructure/ui-prop-types": "10.6.1-snapshot-5",
+    "@instructure/ui-react-utils": "10.6.1-snapshot-5",
+    "@instructure/ui-selectable": "10.6.1-snapshot-5",
+    "@instructure/ui-testable": "10.6.1-snapshot-5",
+    "@instructure/ui-text-input": "10.6.1-snapshot-5",
+    "@instructure/ui-utils": "10.6.1-snapshot-5",
+    "@instructure/ui-view": "10.6.1-snapshot-5",
+    "@instructure/uid": "10.6.1-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/README.md

@@ -681,7 +681,7 @@ It's best practice to always provide autocomplete functionality to help users ma
 
 #### Highlighting and selecting options
 
-To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](#Tag) for each selected option via the `renderBeforeInput` prop.
+To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](#Tag) with [AccessibleContent](#AccessibleContent) for each selected option via the `renderBeforeInput` prop.
 
 - ```javascript
   class MultipleSelectExample extends React.Component {
@@ -845,8 +845,11 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
         <Tag
           dismissible
           key={id}
-          title={`Remove ${this.getOptionById(id).label}`}
-          text={this.getOptionById(id).label}
+          text={
+            <AccessibleContent alt={`Remove ${this.getOptionById(id).label}`}>
+              {this.getOptionById(id).label}
+            </AccessibleContent>
+          }
           margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
           onClick={(e) => this.dismissTag(e, id)}
         />
@@ -1071,8 +1074,11 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
         <Tag
           dismissible
           key={id}
-          title={`Remove ${getOptionById(id).label}`}
-          text={getOptionById(id).label}
+          text={
+            <AccessibleContent alt={`Remove ${this.getOptionById(id).label}`}>
+              {this.getOptionById(id).label}
+            </AccessibleContent>
+          }
           margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
           onClick={(e) => dismissTag(e, id)}
         />