@instructure/ui-options 8.20.1-snapshot.22 → 8.20.1-snapshot.36

package/es/Options/index.js

@@ -114,6 +114,18 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
     });
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+
+    return void 0;
+  }
+
   render() {
     const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
     const _this$props4 = this.props,
@@ -135,7 +147,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
+      "aria-labelledby": this.ariaLabelledby
     }), this.renderChildren()));
   }
 

package/lib/Options/index.js

@@ -109,6 +109,18 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
     });
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId;
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby'];
+    }
+
+    return void 0;
+  }
+
   render() {
     const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
 
@@ -131,7 +143,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
       margin: "none",
       padding: "none",
       background: "primary",
-      "aria-labelledby": renderLabel ? this._labelId : this.props['aria-labelledby'] ? this.props['aria-labelledby'] : void 0
+      "aria-labelledby": this.ariaLabelledby
     }), this.renderChildren()));
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "8.20.1-snapshot.22+a60e3a0da",
+  "version": "8.20.1-snapshot.36+09110e7be",
   "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.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-color-utils": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-test-locator": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-test-utils": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-themes": "8.20.1-snapshot.22+a60e3a0da"
+    "@instructure/ui-babel-preset": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-color-utils": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-test-locator": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-test-utils": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-themes": "8.20.1-snapshot.36+09110e7be"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/shared-types": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-icons": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-prop-types": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-react-utils": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-testable": "8.20.1-snapshot.22+a60e3a0da",
-    "@instructure/ui-view": "8.20.1-snapshot.22+a60e3a0da",
+    "@instructure/emotion": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/shared-types": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-icons": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-prop-types": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-react-utils": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-testable": "8.20.1-snapshot.36+09110e7be",
+    "@instructure/ui-view": "8.20.1-snapshot.36+09110e7be",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "a60e3a0daf7729db909fd87efbbd58dd4ac0834c"
+  "gitHead": "09110e7bec04cb68273f80dbd601915366f7af50"
 }

package/src/Options/index.tsx

@@ -140,6 +140,18 @@ class Options extends Component<OptionsProps> {
     })
   }
 
+  get ariaLabelledby() {
+    if (this.props.renderLabel) {
+      return this._labelId
+    }
+
+    if (this.props['aria-labelledby']) {
+      return this.props['aria-labelledby']
+    }
+
+    return undefined
+  }
+
   render() {
     const passthroughProps = View.omitViewProps(
       omitProps(this.props, Options.allowedProps),
@@ -161,13 +173,7 @@ class Options extends Component<OptionsProps> {
           margin="none"
           padding="none"
           background="primary"
-          aria-labelledby={
-            renderLabel
-              ? this._labelId
-              : this.props['aria-labelledby']
-              ? this.props['aria-labelledby']
-              : undefined
-          }
+          aria-labelledby={this.ariaLabelledby}
         >
           {this.renderChildren()}
         </View>

package/src/Options/props.ts

@@ -52,6 +52,7 @@ type OptionsOwnProps = {
    * Content to render as a label. Mostly for when the component is nested
    */
   renderLabel?: React.ReactNode | (() => React.ReactNode)
+
   //TODO children has to be typed better
   //e.g.: ChildrenPropTypes.oneOf(['Options', 'Item', 'Separator']))
   children?: React.ReactNode
@@ -63,7 +64,8 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type OptionsProps = OptionsOwnProps &
   WithStyleProps<OptionsTheme, OptionsStyle> &
-  OtherHTMLAttributes<OptionsOwnProps> & WithDeterministicIdProps
+  OtherHTMLAttributes<OptionsOwnProps> &
+  WithDeterministicIdProps
 
 type OptionsStyle = ComponentStyle<'options' | 'list' | 'label'>