@instructure/ui-link 8.23.1-snapshot.8 → 8.24.1-snapshot.16

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.24.0](https://github.com/instructure/instructure-ui/compare/v8.23.0...v8.24.0) (2022-04-26)
+
+### Features
+
+- **ui-link:** add `role` and `forceButtonRole` prop to Link component ([11828d0](https://github.com/instructure/instructure-ui/commit/11828d0b32844a522d267e189c8bc52aa928843a))
+
 # [8.23.0](https://github.com/instructure/instructure-ui/compare/v8.22.0...v8.23.0) (2022-04-07)
 
 **Note:** Version bump only for package @instructure/ui-link

package/es/Link/__examples__/Link.examples.js

@@ -33,7 +33,9 @@ export default {
   },
   getComponentProps: () => {
     return {
-      href: 'http://instructure.design'
+      href: 'http://instructure.design',
+      forceButtonRole: false,
+      role: void 0
     };
   },
   getExampleProps: props => {

package/es/Link/index.js

@@ -168,6 +168,19 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
     return hasVisibleChildren(this.props.children);
   }
 
+  get role() {
+    const _this$props3 = this.props,
+          role = _this$props3.role,
+          forceButtonRole = _this$props3.forceButtonRole,
+          onClick = _this$props3.onClick;
+
+    if (forceButtonRole) {
+      return onClick && this.element !== 'button' ? 'button' : role;
+    }
+
+    return role;
+  }
+
   focus() {
     this.ref && this.ref.focus();
   }
@@ -185,22 +198,21 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   render() {
     var _this$props$styles2;
 
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          onClick = _this$props3.onClick,
-          color = _this$props3.color,
-          href = _this$props3.href,
-          margin = _this$props3.margin,
-          renderIcon = _this$props3.renderIcon,
-          iconPlacement = _this$props3.iconPlacement,
-          isWithinText = _this$props3.isWithinText,
-          props = _objectWithoutProperties(_this$props3, _excluded);
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          onClick = _this$props4.onClick,
+          color = _this$props4.color,
+          href = _this$props4.href,
+          margin = _this$props4.margin,
+          renderIcon = _this$props4.renderIcon,
+          iconPlacement = _this$props4.iconPlacement,
+          isWithinText = _this$props4.isWithinText,
+          props = _objectWithoutProperties(_this$props4, _excluded);
 
     const interaction = this.interaction;
     const isDisabled = interaction === 'disabled';
-    const role = onClick && this.element !== 'button' ? 'button' : void 0;
     const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
-    const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
+    const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
     return jsx(View, Object.assign({}, passthroughProps(props), {
       elementRef: this.handleElementRef,
       as: this.element,
@@ -211,7 +223,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "aria-disabled": isDisabled ? 'true' : void 0,
-      role: role,
+      role: this.role,
       type: type,
       tabIndex: tabIndex,
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
@@ -223,7 +235,8 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   interaction: void 0,
   color: 'link',
   iconPlacement: 'start',
-  isWithinText: true
+  isWithinText: true,
+  forceButtonRole: true
 }, _class2)) || _class) || _class);
 export default Link;
 export { Link };

package/es/Link/props.js

@@ -29,6 +29,8 @@ const propTypes = {
   color: PropTypes.oneOf(['link', 'link-inverse']),
   elementRef: PropTypes.func,
   as: PropTypes.elementType,
+  role: PropTypes.string,
+  forceButtonRole: PropTypes.bool,
   interaction: PropTypes.oneOf(['enabled', 'disabled']),
   margin: ThemeablePropTypes.spacing,
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -39,5 +41,5 @@ const propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func
 };
-const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];
+const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];
 export { propTypes, allowedProps };

package/lib/Link/__examples__/Link.examples.js

@@ -41,7 +41,9 @@ var _default = {
   },
   getComponentProps: () => {
     return {
-      href: 'http://instructure.design'
+      href: 'http://instructure.design',
+      forceButtonRole: false,
+      role: void 0
     };
   },
   getExampleProps: props => {

package/lib/Link/index.js

@@ -177,6 +177,19 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     return (0, _hasVisibleChildren.hasVisibleChildren)(this.props.children);
   }
 
+  get role() {
+    const _this$props3 = this.props,
+          role = _this$props3.role,
+          forceButtonRole = _this$props3.forceButtonRole,
+          onClick = _this$props3.onClick;
+
+    if (forceButtonRole) {
+      return onClick && this.element !== 'button' ? 'button' : role;
+    }
+
+    return role;
+  }
+
   focus() {
     this.ref && this.ref.focus();
   }
@@ -194,21 +207,20 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   render() {
     var _this$props$styles2;
 
-    const _this$props3 = this.props,
-          children = _this$props3.children,
-          onClick = _this$props3.onClick,
-          color = _this$props3.color,
-          href = _this$props3.href,
-          margin = _this$props3.margin,
-          renderIcon = _this$props3.renderIcon,
-          iconPlacement = _this$props3.iconPlacement,
-          isWithinText = _this$props3.isWithinText,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          onClick = _this$props4.onClick,
+          color = _this$props4.color,
+          href = _this$props4.href,
+          margin = _this$props4.margin,
+          renderIcon = _this$props4.renderIcon,
+          iconPlacement = _this$props4.iconPlacement,
+          isWithinText = _this$props4.isWithinText,
+          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     const interaction = this.interaction;
     const isDisabled = interaction === 'disabled';
-    const role = onClick && this.element !== 'button' ? 'button' : void 0;
     const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
-    const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
+    const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       elementRef: this.handleElementRef,
       as: this.element,
@@ -219,7 +231,7 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "aria-disabled": isDisabled ? 'true' : void 0,
-      role: role,
+      role: this.role,
       type: type,
       tabIndex: tabIndex,
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
@@ -231,7 +243,8 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   interaction: void 0,
   color: 'link',
   iconPlacement: 'start',
-  isWithinText: true
+  isWithinText: true,
+  forceButtonRole: true
 }, _class2)) || _class) || _class);
 exports.Link = Link;
 var _default = Link;

package/lib/Link/props.js

@@ -40,6 +40,8 @@ const propTypes = {
   color: _propTypes.default.oneOf(['link', 'link-inverse']),
   elementRef: _propTypes.default.func,
   as: _propTypes.default.elementType,
+  role: _propTypes.default.string,
+  forceButtonRole: _propTypes.default.bool,
   interaction: _propTypes.default.oneOf(['enabled', 'disabled']),
   margin: _emotion.ThemeablePropTypes.spacing,
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
@@ -51,5 +53,5 @@ const propTypes = {
   onBlur: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];
+const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'role', 'forceButtonRole', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];
 exports.allowedProps = allowedProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "8.23.1-snapshot.8+e6ddacd12",
+  "version": "8.24.1-snapshot.16+363893b5f",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,25 +24,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/emotion": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/shared-types": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-a11y-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-color-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-dom-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-icons": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-prop-types": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-react-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-testable": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-view": "8.23.1-snapshot.8+e6ddacd12",
+    "@instructure/console": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/emotion": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/shared-types": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-a11y-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-color-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-dom-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-icons": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-prop-types": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-react-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-testable": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-view": "8.24.1-snapshot.16+363893b5f",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-test-locator": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-test-queries": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-test-utils": "8.23.1-snapshot.8+e6ddacd12",
-    "@instructure/ui-themes": "8.23.1-snapshot.8+e6ddacd12"
+    "@instructure/ui-babel-preset": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-test-locator": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-test-queries": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-test-utils": "8.24.1-snapshot.16+363893b5f",
+    "@instructure/ui-themes": "8.24.1-snapshot.16+363893b5f"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "e6ddacd12e51b7dbfa1dfcb4a569f6e30f12b51d"
+  "gitHead": "363893b5f0575cc9743cdaa7fae4c404f3fb9cca"
 }

package/src/Link/__examples__/Link.examples.ts

@@ -40,7 +40,9 @@ export default {
   },
   getComponentProps: () => {
     return {
-      href: 'http://instructure.design'
+      href: 'http://instructure.design',
+      forceButtonRole: false,
+      role: undefined
     }
   },
   getExampleProps: (props) => {

package/src/Link/index.tsx

@@ -65,7 +65,8 @@ class Link extends Component<LinkProps, LinkState> {
     interaction: undefined,
     color: 'link',
     iconPlacement: 'start',
-    isWithinText: true
+    isWithinText: true,
+    forceButtonRole: true
   } as const
 
   state = { hasFocus: false }
@@ -182,6 +183,16 @@ class Link extends Component<LinkProps, LinkState> {
     return hasVisibleChildren(this.props.children)
   }
 
+  get role() {
+    const { role, forceButtonRole, onClick } = this.props
+
+    if (forceButtonRole) {
+      return onClick && this.element !== 'button' ? 'button' : role
+    }
+
+    return role
+  }
+
   focus() {
     this.ref && (this.ref as HTMLElement).focus()
   }
@@ -211,15 +222,17 @@ class Link extends Component<LinkProps, LinkState> {
       isWithinText,
       ...props
     } = this.props
+
     const { interaction } = this
 
     const isDisabled = interaction === 'disabled'
-    const role = onClick && this.element !== 'button' ? 'button' : undefined
+
     const type =
       this.element === 'button' || this.element === 'input'
         ? 'button'
         : undefined
-    const tabIndex = role === 'button' && !isDisabled ? 0 : undefined
+
+    const tabIndex = this.role === 'button' && !isDisabled ? 0 : undefined
 
     return (
       <View
@@ -233,7 +246,7 @@ class Link extends Component<LinkProps, LinkState> {
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         aria-disabled={isDisabled ? 'true' : undefined}
-        role={role}
+        role={this.role}
         type={type}
         tabIndex={tabIndex}
         css={this.props.styles?.link}

package/src/Link/props.ts

@@ -67,6 +67,17 @@ type LinkOwnProps = {
    */
   as?: AsElementType
 
+  /**
+   * The ARIA role of the element.
+   */
+  role?: string
+
+  /**
+   * If the Link has an onClick handler but is not a button element,
+   * force ARIA role to be "button".
+   */
+  forceButtonRole?: boolean
+
   /**
    * Determines if the link is enabled or disabled
    */
@@ -142,6 +153,8 @@ const propTypes: PropValidators<PropKeys> = {
   color: PropTypes.oneOf(['link', 'link-inverse']),
   elementRef: PropTypes.func,
   as: PropTypes.elementType,
+  role: PropTypes.string,
+  forceButtonRole: PropTypes.bool,
   interaction: PropTypes.oneOf(['enabled', 'disabled']),
   margin: ThemeablePropTypes.spacing,
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -165,6 +178,8 @@ const allowedProps: AllowedPropKeys = [
   'color',
   'elementRef',
   'as',
+  'role',
+  'forceButtonRole',
   'interaction',
   'margin',
   'renderIcon',