@instructure/ui-options 8.53.3-snapshot-20 → 8.53.3-snapshot-22

package/CHANGELOG.md

@@ -3,9 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-20](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-20) (2024-03-20)
+## [8.53.3-snapshot-22](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-22) (2024-03-20)
 
-**Note:** Version bump only for package @instructure/ui-options
+
+### Bug Fixes
+
+* **ui-options:** add prop to move role to the outer tag ([45641ea](https://github.com/instructure/instructure-ui/commit/45641eac2b9efc533238d9399be50762cc45ef82))
+* **ui-options:** update prop name and docs to better describe its purpose ([35ba0b3](https://github.com/instructure/instructure-ui/commit/35ba0b30d4e5589a36ca47bab1c3009251e3cb51))
 
 
 

package/es/Options/Item/index.js

@@ -82,26 +82,29 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
       renderBeforeLabel = _this$props4.renderBeforeLabel,
       renderAfterLabel = _this$props4.renderAfterLabel,
       elementRef = _this$props4.elementRef,
-      children = _this$props4.children;
+      children = _this$props4.children,
+      voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
     const ElementType = getElementType(Item, this.props, () => as);
     const InnerElementType = href ? 'a' : 'span';
     const passthroughProps = omitProps(this.props, Item.allowedProps);
     const childrenContent = callRenderProp(children);
     const descriptionContent = callRenderProp(description);
+    const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
     return jsx(ElementType, {
-      role: "none",
+      role: voiceoverRoleBugWorkaround ? role : 'none',
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
         this.ref = element;
         if (typeof elementRef === 'function') {
           elementRef(element);
         }
-      }
+      },
+      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0
     }, jsx(InnerElementType, Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
-      role: href ? void 0 : role,
+      role: href || voiceoverRoleBugWorkaround ? void 0 : role,
       href: href,
-      "aria-describedby": this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0)
+      "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy
     }), childrenContent, descriptionContent && jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.description,
       role: descriptionRole,
@@ -112,6 +115,7 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
   as: 'span',
   variant: 'default',
   role: 'listitem',
+  voiceoverRoleBugWorkaround: false,
   beforeLabelContentVAlign: 'center',
   afterLabelContentVAlign: 'center'
 }, _class2)) || _class) || _class) || _class);

package/es/Options/Item/props.js

@@ -34,8 +34,9 @@ const propTypes = {
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   descriptionRole: PropTypes.string,
   href: PropTypes.string,
+  voiceoverRoleBugWorkaround: PropTypes.bool,
   elementRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
-const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'href', 'elementRef', 'children'];
+const allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children'];
 export { propTypes, allowedProps };

package/lib/Options/Item/index.js

@@ -87,26 +87,29 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
       renderBeforeLabel = _this$props4.renderBeforeLabel,
       renderAfterLabel = _this$props4.renderAfterLabel,
       elementRef = _this$props4.elementRef,
-      children = _this$props4.children;
+      children = _this$props4.children,
+      voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
     const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
     const InnerElementType = href ? 'a' : 'span';
     const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
     const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
     const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
+    const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
     return (0, _emotion.jsx)(ElementType, {
-      role: "none",
+      role: voiceoverRoleBugWorkaround ? role : 'none',
       css: styles === null || styles === void 0 ? void 0 : styles.item,
       ref: element => {
         this.ref = element;
         if (typeof elementRef === 'function') {
           elementRef(element);
         }
-      }
+      },
+      "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0
     }, (0, _emotion.jsx)(InnerElementType, Object.assign({}, passthroughProps, {
       css: styles === null || styles === void 0 ? void 0 : styles.container,
-      role: href ? void 0 : role,
+      role: href || voiceoverRoleBugWorkaround ? void 0 : role,
       href: href,
-      "aria-describedby": this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0)
+      "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy
     }), childrenContent, descriptionContent && (0, _emotion.jsx)("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.description,
       role: descriptionRole,
@@ -117,6 +120,7 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
   as: 'span',
   variant: 'default',
   role: 'listitem',
+  voiceoverRoleBugWorkaround: false,
   beforeLabelContentVAlign: 'center',
   afterLabelContentVAlign: 'center'
 }, _class2)) || _class) || _class) || _class);

package/lib/Options/Item/props.js

@@ -41,7 +41,8 @@ const propTypes = exports.propTypes = {
   description: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   descriptionRole: _propTypes.default.string,
   href: _propTypes.default.string,
+  voiceoverRoleBugWorkaround: _propTypes.default.bool,
   elementRef: _propTypes.default.func,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
 };
-const allowedProps = exports.allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'href', 'elementRef', 'children'];
+const allowedProps = exports.allowedProps = ['as', 'variant', 'role', 'renderBeforeLabel', 'renderAfterLabel', 'beforeLabelContentVAlign', 'afterLabelContentVAlign', 'description', 'descriptionRole', 'voiceoverRoleBugWorkaround', 'href', 'elementRef', 'children'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.53.3-snapshot-20",
+  "version": "8.53.3-snapshot-22",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-20",
-    "@instructure/ui-color-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-20",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-themes": "8.53.3-snapshot-20"
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-22",
+    "@instructure/ui-color-utils": "8.53.3-snapshot-22",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-22",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-22",
+    "@instructure/ui-themes": "8.53.3-snapshot-22"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/emotion": "8.53.3-snapshot-20",
-    "@instructure/shared-types": "8.53.3-snapshot-20",
-    "@instructure/ui-icons": "8.53.3-snapshot-20",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-20",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-20",
-    "@instructure/ui-testable": "8.53.3-snapshot-20",
-    "@instructure/ui-view": "8.53.3-snapshot-20",
+    "@instructure/emotion": "8.53.3-snapshot-22",
+    "@instructure/shared-types": "8.53.3-snapshot-22",
+    "@instructure/ui-icons": "8.53.3-snapshot-22",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-22",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-22",
+    "@instructure/ui-testable": "8.53.3-snapshot-22",
+    "@instructure/ui-view": "8.53.3-snapshot-22",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Options/Item/index.tsx

@@ -59,6 +59,7 @@ class Item extends Component<OptionsItemProps> {
     as: 'span',
     variant: 'default',
     role: 'listitem',
+    voiceoverRoleBugWorkaround: false,
     beforeLabelContentVAlign: 'center',
     afterLabelContentVAlign: 'center'
   } as const
@@ -118,7 +119,8 @@ class Item extends Component<OptionsItemProps> {
       renderBeforeLabel,
       renderAfterLabel,
       elementRef,
-      children
+      children,
+      voiceoverRoleBugWorkaround
     } = this.props
 
     const ElementType = getElementType(Item, this.props, () => as!)
@@ -129,10 +131,13 @@ class Item extends Component<OptionsItemProps> {
 
     const childrenContent = callRenderProp(children)
     const descriptionContent = callRenderProp(description)
+    const ariaDescribedBy =
+      this.props['aria-describedby'] ||
+      (descriptionContent ? this._descriptionId : undefined)
 
     return (
       <ElementType
-        role="none"
+        role={voiceoverRoleBugWorkaround ? role : 'none'}
         css={styles?.item}
         ref={(element: Element | null) => {
           this.ref = element
@@ -141,15 +146,17 @@ class Item extends Component<OptionsItemProps> {
             elementRef(element)
           }
         }}
+        aria-describedby={
+          voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined
+        }
       >
         <InnerElementType
           {...passthroughProps}
           css={styles?.container}
-          role={href ? undefined : role}
+          role={href || voiceoverRoleBugWorkaround ? undefined : role}
           href={href}
           aria-describedby={
-            this.props['aria-describedby'] ||
-            (descriptionContent ? this._descriptionId : undefined)
+            voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy
           }
         >
           {childrenContent}

package/src/Options/Item/props.ts

@@ -86,6 +86,10 @@ type OptionsItemOwnProps = OptionsItemRenderProps & {
    * Providing href will render the option as `<a>`.
    */
   href?: string
+  /**
+   * Sometimes VoiceOver doesn't announce the role of the highlighted item. This prop forces the role to be on the outer element and should only be used when such an issue arises.
+   */
+  voiceoverRoleBugWorkaround?: boolean
   /**
    * provides a reference to the underlying html root element
    */
@@ -127,6 +131,7 @@ const propTypes: PropValidators<PropKeys> = {
   description: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   descriptionRole: PropTypes.string,
   href: PropTypes.string,
+  voiceoverRoleBugWorkaround: PropTypes.bool,
   elementRef: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
@@ -141,6 +146,7 @@ const allowedProps: AllowedPropKeys = [
   'afterLabelContentVAlign',
   'description',
   'descriptionRole',
+  'voiceoverRoleBugWorkaround',
   'href',
   'elementRef',
   'children'