@instructure/ui-select 11.7.4-snapshot-113 → 11.7.4-snapshot-116

package/CHANGELOG.md

@@ -3,7 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.4-snapshot-113](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-113) (2026-07-20)
+## [11.7.4-snapshot-116](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-116) (2026-07-20)
+
+
+### Bug Fixes
+
+* **ui-select:** don't strip renderBeforeInput from the combobox accessible name ([28d5e24](https://github.com/instructure/instructure-ui/commit/28d5e24e65a24b1e706fb67407523537d5db78b8))
+* **ui-select:** fix screen reader labels on multiple select ([6cc240f](https://github.com/instructure/instructure-ui/commit/6cc240f38af252171954078a9adc603e2e776eb1))
 
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.4-snapshot-113",
+  "version": "11.7.4-snapshot-116",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,30 +15,30 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.4-snapshot-113",
-    "@instructure/shared-types": "11.7.4-snapshot-113",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-113",
-    "@instructure/ui-icons": "11.7.4-snapshot-113",
-    "@instructure/ui-form-field": "11.7.4-snapshot-113",
-    "@instructure/ui-options": "11.7.4-snapshot-113",
-    "@instructure/ui-popover": "11.7.4-snapshot-113",
-    "@instructure/ui-position": "11.7.4-snapshot-113",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-113",
-    "@instructure/ui-text-input": "11.7.4-snapshot-113",
-    "@instructure/ui-selectable": "11.7.4-snapshot-113",
-    "@instructure/ui-themes": "11.7.4-snapshot-113",
-    "@instructure/ui-view": "11.7.4-snapshot-113",
-    "@instructure/ui-utils": "11.7.4-snapshot-113",
-    "@instructure/uid": "11.7.4-snapshot-113"
+    "@instructure/ui-form-field": "11.7.4-snapshot-116",
+    "@instructure/shared-types": "11.7.4-snapshot-116",
+    "@instructure/ui-icons": "11.7.4-snapshot-116",
+    "@instructure/emotion": "11.7.4-snapshot-116",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-116",
+    "@instructure/ui-options": "11.7.4-snapshot-116",
+    "@instructure/ui-popover": "11.7.4-snapshot-116",
+    "@instructure/ui-selectable": "11.7.4-snapshot-116",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-116",
+    "@instructure/ui-text-input": "11.7.4-snapshot-116",
+    "@instructure/ui-themes": "11.7.4-snapshot-116",
+    "@instructure/ui-utils": "11.7.4-snapshot-116",
+    "@instructure/ui-view": "11.7.4-snapshot-116",
+    "@instructure/ui-position": "11.7.4-snapshot-116",
+    "@instructure/uid": "11.7.4-snapshot-116"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-113",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-113",
-    "@instructure/ui-scripts": "11.7.4-snapshot-113"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-116",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-116",
+    "@instructure/ui-scripts": "11.7.4-snapshot-116"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v2/README.md

@@ -342,6 +342,8 @@ type: example
 
 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.
 
+> **Accessibility:** set an explicit `aria-label` on the `Select` (matching `renderLabel`) and list the selected options in the `assistiveText` (e.g. `"Alaska Selected, …"`), as the example below does. This keeps the combobox's accessible name limited to the field label, while screen reader users still hear which options are selected. Each pill's `"Remove …"` label is only announced when that pill receives focus.
+
 ```js
 ---
 type: example
@@ -497,11 +499,25 @@ type: example
       ))
     }
 
+    // Announce the current selection as part of the combobox's description, so
+    // navigating to the Select reads "Multiple Select, Alaska Selected, ..."
+    // rather than the "Remove ..." labels of the dismissible pills.
+    const selectedText = selectedOptionId
+      .map((id) => `${getOptionById(id).label} Selected`)
+      .join(', ')
+    const assistiveText = [
+      selectedText,
+      'Type or use arrow keys to navigate options. Multiple selections allowed.'
+    ]
+      .filter(Boolean)
+      .join('. ')
+
     return (
       <div>
         <Select
           renderLabel="Multiple Select"
-          assistiveText="Type or use arrow keys to navigate options. Multiple selections allowed."
+          aria-label="Multiple Select"
+          assistiveText={assistiveText}
           inputValue={inputValue}
           isShowingOptions={isShowingOptions}
           inputRef={(el) => {

package/src/Select/v2/index.tsx

@@ -111,18 +111,18 @@ const MemoedOption = memo(
   (prevProps, nextProps) => {
     return (
       prevProps.selectOption.props.isHighlighted ===
-      nextProps.selectOption.props.isHighlighted &&
+        nextProps.selectOption.props.isHighlighted &&
       prevProps.selectOption.props.isSelected ===
-      nextProps.selectOption.props.isSelected &&
+        nextProps.selectOption.props.isSelected &&
       prevProps.selectOption.props.isDisabled ===
-      nextProps.selectOption.props.isDisabled &&
+        nextProps.selectOption.props.isDisabled &&
       prevProps.selectOption.props.children ===
-      nextProps.selectOption.props.children &&
+        nextProps.selectOption.props.children &&
       prevProps.selectOption.props.id === nextProps.selectOption.props.id &&
       prevProps.selectOption.props.renderBeforeLabel ===
-      nextProps.selectOption.props.renderBeforeLabel &&
+        nextProps.selectOption.props.renderBeforeLabel &&
       prevProps.selectOption.props.renderAfterLabel ===
-      nextProps.selectOption.props.renderAfterLabel &&
+        nextProps.selectOption.props.renderAfterLabel &&
       prevProps.children === nextProps.children
     )
   }
@@ -334,59 +334,59 @@ class Select extends Component<SelectProps> {
 
     return this.interaction === 'enabled'
       ? {
-        onRequestShowOptions: (event) => {
-          onRequestShowOptions?.(event)
-          const selectedOptionId = this.selectedOptionId
+          onRequestShowOptions: (event) => {
+            onRequestShowOptions?.(event)
+            const selectedOptionId = this.selectedOptionId
 
-          if (selectedOptionId && !Array.isArray(selectedOptionId)) {
-            // highlight selected option on show
-            this.highlightOption(event, selectedOptionId)
-          }
-        },
-        onRequestHideOptions: (event) => {
-          onRequestHideOptions?.(event)
-        },
-        onRequestHighlightOption: (
-          event,
-          { id, direction }: { id?: string; direction?: number }
-        ) => {
-          if (!isShowingOptions) return
-
-          const highlightedOptionId = this.highlightedOptionId
-          // if id exists, use that
-          let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
-          if (!highlightId) {
-            if (!highlightedOptionId) {
-              // nothing highlighted yet, highlight first option
-              highlightId = this._optionIds[0]
-            } else {
-              // find next id based on direction
-              const index = this._optionIds.indexOf(highlightedOptionId)
-              highlightId =
-                index > -1 ? this._optionIds[index + direction!] : undefined
+            if (selectedOptionId && !Array.isArray(selectedOptionId)) {
+              // highlight selected option on show
+              this.highlightOption(event, selectedOptionId)
             }
-          }
-          if (highlightId) {
-            // only highlight if id exists as a valid option
-            this.highlightOption(event, highlightId)
-          }
-        },
-        onRequestHighlightFirstOption: (event) => {
-          this.highlightOption(event, this._optionIds[0])
-        },
-        onRequestHighlightLastOption: (event) => {
-          this.highlightOption(
+          },
+          onRequestHideOptions: (event) => {
+            onRequestHideOptions?.(event)
+          },
+          onRequestHighlightOption: (
             event,
-            this._optionIds[this._optionIds.length - 1]
-          )
-        },
-        onRequestSelectOption: (event, { id }) => {
-          if (id && this._optionIds.indexOf(id) !== -1) {
-            // only select if id exists as a valid option
-            onRequestSelectOption?.(event, { id })
+            { id, direction }: { id?: string; direction?: number }
+          ) => {
+            if (!isShowingOptions) return
+
+            const highlightedOptionId = this.highlightedOptionId
+            // if id exists, use that
+            let highlightId = this._optionIds.indexOf(id!) > -1 ? id : undefined
+            if (!highlightId) {
+              if (!highlightedOptionId) {
+                // nothing highlighted yet, highlight first option
+                highlightId = this._optionIds[0]
+              } else {
+                // find next id based on direction
+                const index = this._optionIds.indexOf(highlightedOptionId)
+                highlightId =
+                  index > -1 ? this._optionIds[index + direction!] : undefined
+              }
+            }
+            if (highlightId) {
+              // only highlight if id exists as a valid option
+              this.highlightOption(event, highlightId)
+            }
+          },
+          onRequestHighlightFirstOption: (event) => {
+            this.highlightOption(event, this._optionIds[0])
+          },
+          onRequestHighlightLastOption: (event) => {
+            this.highlightOption(
+              event,
+              this._optionIds[this._optionIds.length - 1]
+            )
+          },
+          onRequestSelectOption: (event, { id }) => {
+            if (id && this._optionIds.indexOf(id) !== -1) {
+              // only select if id exists as a valid option
+              onRequestSelectOption?.(event, { id })
+            }
           }
         }
-      }
       : {}
   }
 
@@ -413,12 +413,12 @@ class Select extends Component<SelectProps> {
       return typeof renderOptionLabel === 'function' &&
         !renderOptionLabel?.prototype?.isReactComponent
         ? (renderOptionLabel as any).bind(null, {
-          id,
-          isDisabled,
-          isSelected,
-          isHighlighted,
-          children
-        })
+            id,
+            isDisabled,
+            isSelected,
+            isHighlighted,
+            children
+          })
         : (renderOptionLabel as React.ReactNode)
     }
 
@@ -532,18 +532,18 @@ class Select extends Component<SelectProps> {
 
     const viewProps: Partial<ViewProps> = isShowingOptions
       ? {
-        display: 'block',
-        overflowY: 'auto',
-        maxHeight:
-          optionsMaxHeight ||
-          this._optionHeight * visibleOptionsCount! -
-          // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
-          (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
-        maxWidth: optionsMaxWidth || this.width,
-        background: 'primary',
-        elementRef: (node: Element | null) => (this._listView = node),
-        borderRadius: 'inherit'
-      }
+          display: 'block',
+          overflowY: 'auto',
+          maxHeight:
+            optionsMaxHeight ||
+            this._optionHeight * visibleOptionsCount! -
+              // in Chrome, we need to prevent scrolling when the bottom area of last item is hovered
+              (utils.isChromium() ? this.SCROLL_TOLERANCE : 0),
+          maxWidth: optionsMaxWidth || this.width,
+          background: 'primary',
+          elementRef: (node: Element | null) => (this._listView = node),
+          borderRadius: 'inherit'
+        }
       : { maxHeight: 0 }
 
     return (
@@ -553,30 +553,30 @@ class Select extends Component<SelectProps> {
         >
           {isShowingOptions
             ? Children.map(children as SelectChildren, (child, index) => {
-              if (!child || !matchComponentTypes(child, [Group, Option])) {
-                return // ignore invalid children
-              }
-              if (matchComponentTypes<OptionChild>(child, [Option])) {
-                lastWasGroup = false
-                return this.renderOption(child, {
-                  getOptionProps,
-                  getDisabledOptionProps
-                })
-              }
-              if (matchComponentTypes<GroupChild>(child, [Group])) {
-                const afterGroup = lastWasGroup
-                lastWasGroup = true
-                return this.renderGroup(child, {
-                  getOptionProps,
-                  getDisabledOptionProps,
-                  // for rendering separators appropriately
-                  isFirstChild: index === 0,
-                  isLastChild: index === Children.count(children) - 1,
-                  afterGroup
-                })
-              }
-              return
-            })
+                if (!child || !matchComponentTypes(child, [Group, Option])) {
+                  return // ignore invalid children
+                }
+                if (matchComponentTypes<OptionChild>(child, [Option])) {
+                  lastWasGroup = false
+                  return this.renderOption(child, {
+                    getOptionProps,
+                    getDisabledOptionProps
+                  })
+                }
+                if (matchComponentTypes<GroupChild>(child, [Group])) {
+                  const afterGroup = lastWasGroup
+                  lastWasGroup = true
+                  return this.renderGroup(child, {
+                    getOptionProps,
+                    getDisabledOptionProps,
+                    // for rendering separators appropriately
+                    isFirstChild: index === 0,
+                    isLastChild: index === Children.count(children) - 1,
+                    afterGroup
+                  })
+                }
+                return
+              })
             : null}
         </Options>
       </View>
@@ -615,8 +615,8 @@ class Select extends Component<SelectProps> {
             return position === 'before'
               ? option.props.renderBeforeLabel
               : option.props.renderAfterLabel
-                ? option.props.renderAfterLabel
-                : this.renderIcon()
+              ? option.props.renderAfterLabel
+              : this.renderIcon()
           }
         }
       } else {
@@ -625,8 +625,8 @@ class Select extends Component<SelectProps> {
           return position === 'before'
             ? child.props.renderBeforeLabel
             : child.props.renderAfterLabel
-              ? child.props.renderAfterLabel
-              : this.renderIcon()
+            ? child.props.renderAfterLabel
+            : this.renderIcon()
         }
       }
     }
@@ -723,26 +723,26 @@ class Select extends Component<SelectProps> {
     // popup buttons rather than comboboxes.
     const overrideProps: Partial<TextInputProps> = !isEditable
       ? {
-        // We need role="combobox" for the 'open list' button shortcut to work
-        // with desktop screenreaders.
-        // But desktop Safari with Voiceover does not support proper combobox
-        // handling, a 'button' role is set as a workaround.
-        // See https://bugs.webkit.org/show_bug.cgi?id=236881
-        // Also on iOS Chrome with role='combobox' it announces unnecessarily
-        // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
-        role:
-          utils.isSafari() ||
+          // We need role="combobox" for the 'open list' button shortcut to work
+          // with desktop screenreaders.
+          // But desktop Safari with Voiceover does not support proper combobox
+          // handling, a 'button' role is set as a workaround.
+          // See https://bugs.webkit.org/show_bug.cgi?id=236881
+          // Also on iOS Chrome with role='combobox' it announces unnecessarily
+          // that its 'read-only' and that this is a 'textfield', see INSTUI-4500
+          role:
+            utils.isSafari() ||
             utils.isAndroidOrIOS() ||
             (interaction === 'disabled' && utils.isChromium())
-            ? 'button'
-            : 'combobox',
-        title: inputValue,
-        'aria-autocomplete': undefined,
-        'aria-readonly': true
-      }
+              ? 'button'
+              : 'combobox',
+          title: inputValue,
+          'aria-autocomplete': undefined,
+          'aria-readonly': true
+        }
       : interaction === 'disabled' && utils.isChromium()
-        ? { role: 'button' }
-        : {}
+      ? { role: 'button' }
+      : {}
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {
@@ -789,8 +789,8 @@ class Select extends Component<SelectProps> {
         typeof onInputChange === 'function'
           ? onInputChange
           : inputValue
-            ? () => { }
-            : undefined,
+          ? () => {}
+          : undefined,
 
       onFocus,
       onBlur: utils.createChainedFunction(onBlur, onRequestHideOptions),
@@ -804,10 +804,10 @@ class Select extends Component<SelectProps> {
         suppressHydrationWarning
         {...(interaction === 'enabled' &&
           !isEditable && {
-          themeOverride: (componentTheme) => ({
-            backgroundReadonlyColor: componentTheme.backgroundColor
-          })
-        })}
+            themeOverride: (componentTheme) => ({
+              backgroundReadonlyColor: componentTheme.backgroundColor
+            })
+          })}
       />
     )
   }
@@ -864,8 +864,8 @@ class Select extends Component<SelectProps> {
                 mountNode !== undefined
                   ? mountNode
                   : utils.isAndroidOrIOS()
-                    ? this.ref
-                    : undefined
+                  ? this.ref
+                  : undefined
               }
               positionTarget={this._inputContainer}
               isShowingContent={isShowingOptions}