@instructure/ui-link 7.16.0 → 7.19.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.19.0](https://github.com/instructure/instructure-ui/compare/v7.18.0...v7.19.0) (2022-06-03)
+
+### Features
+
+- **ui-link:** add `role`and `forceButtonRole` prop to Link component ([cd9ce8c](https://github.com/instructure/instructure-ui/commit/cd9ce8c))
+
+# [7.18.0](https://github.com/instructure/instructure-ui/compare/v7.17.0...v7.18.0) (2022-03-30)
+
+**Note:** Version bump only for package @instructure/ui-link
+
+# [7.17.0](https://github.com/instructure/instructure-ui/compare/v7.16.0...v7.17.0) (2022-03-22)
+
+**Note:** Version bump only for package @instructure/ui-link
+
 # [7.16.0](https://github.com/instructure/instructure-ui/compare/v7.15.0...v7.16.0) (2022-02-08)
 
 **Note:** Version bump only for package @instructure/ui-link

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

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

package/es/Link/index.js

@@ -168,9 +168,8 @@ var Link = (_dec = deprecated('8.0.0', {
       var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles['color--link-inverse'], variant === 'inverse' || color === 'link-inverse'), _defineProperty(_classes, styles["iconPlacement--".concat(iconPlacement)], renderIcon && this.hasVisibleChildren), _defineProperty(_classes, styles.truncates, this.containsTruncateText), _defineProperty(_classes, styles["is".concat(isWithinText ? 'Within' : 'Outside', "Text")], true), _classes);
       var interaction = this.interaction;
       var isDisabled = interaction === 'disabled';
-      var role = onClick && this.element !== 'button' ? 'button' : null;
       var type = this.element === 'button' || this.element === 'input' ? 'button' : null;
-      var tabIndex = role === 'button' && !isDisabled ? '0' : null;
+      var tabIndex = this.role === 'button' && !isDisabled ? '0' : null;
       return /*#__PURE__*/React.createElement(View, Object.assign({}, passthroughProps(props), {
         elementRef: this.handleElementRef,
         as: this.element,
@@ -181,7 +180,7 @@ var Link = (_dec = deprecated('8.0.0', {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         "aria-disabled": isDisabled ? 'true' : null,
-        role: role,
+        role: this.role,
         type: type,
         tabIndex: tabIndex,
         className: classnames(classes)
@@ -248,6 +247,20 @@ var Link = (_dec = deprecated('8.0.0', {
     get: function get() {
       return hasVisibleChildren(this.props.children);
     }
+  }, {
+    key: "role",
+    get: function get() {
+      var _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;
+    }
   }]);
 
   Link.displayName = "Link";
@@ -278,6 +291,17 @@ var Link = (_dec = deprecated('8.0.0', {
    */
   as: PropTypes.elementType,
 
+  /**
+   * The ARIA role of the element.
+   */
+  role: PropTypes.string,
+
+  /**
+   * If the Link has an onClick handler but is not a button element,
+   * force ARIA role to be "button".
+   */
+  forceButtonRole: PropTypes.bool,
+
   /**
    * Determines if the link is enabled or disabled
    */
@@ -347,6 +371,8 @@ var Link = (_dec = deprecated('8.0.0', {
   display: void 0,
   color: 'link',
   as: void 0,
+  role: void 0,
+  forceButtonRole: true,
   iconPlacement: 'start',
   isWithinText: true,
   onClick: void 0,

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

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

package/lib/Link/index.js

@@ -183,9 +183,8 @@ var Link = (_dec = (0, _deprecated.deprecated)('8.0.0', {
       var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.root, true), (0, _defineProperty2.default)(_classes, styles['color--link-inverse'], variant === 'inverse' || color === 'link-inverse'), (0, _defineProperty2.default)(_classes, styles["iconPlacement--".concat(iconPlacement)], renderIcon && this.hasVisibleChildren), (0, _defineProperty2.default)(_classes, styles.truncates, this.containsTruncateText), (0, _defineProperty2.default)(_classes, styles["is".concat(isWithinText ? 'Within' : 'Outside', "Text")], true), _classes);
       var interaction = this.interaction;
       var isDisabled = interaction === 'disabled';
-      var role = onClick && this.element !== 'button' ? 'button' : null;
       var type = this.element === 'button' || this.element === 'input' ? 'button' : null;
-      var tabIndex = role === 'button' && !isDisabled ? '0' : null;
+      var tabIndex = this.role === 'button' && !isDisabled ? '0' : null;
       return /*#__PURE__*/_react.default.createElement(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
         elementRef: this.handleElementRef,
         as: this.element,
@@ -196,7 +195,7 @@ var Link = (_dec = (0, _deprecated.deprecated)('8.0.0', {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         "aria-disabled": isDisabled ? 'true' : null,
-        role: role,
+        role: this.role,
         type: type,
         tabIndex: tabIndex,
         className: (0, _classnames.default)(classes)
@@ -261,6 +260,20 @@ var Link = (_dec = (0, _deprecated.deprecated)('8.0.0', {
     get: function get() {
       return (0, _hasVisibleChildren.hasVisibleChildren)(this.props.children);
     }
+  }, {
+    key: "role",
+    get: function get() {
+      var _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;
+    }
   }]);
   Link.displayName = "Link";
   return Link;
@@ -290,6 +303,17 @@ var Link = (_dec = (0, _deprecated.deprecated)('8.0.0', {
    */
   as: _propTypes.default.elementType,
 
+  /**
+   * The ARIA role of the element.
+   */
+  role: _propTypes.default.string,
+
+  /**
+   * If the Link has an onClick handler but is not a button element,
+   * force ARIA role to be "button".
+   */
+  forceButtonRole: _propTypes.default.bool,
+
   /**
    * Determines if the link is enabled or disabled
    */
@@ -359,6 +383,8 @@ var Link = (_dec = (0, _deprecated.deprecated)('8.0.0', {
   display: void 0,
   color: 'link',
   as: void 0,
+  role: void 0,
+  forceButtonRole: true,
   iconPlacement: 'start',
   isWithinText: true,
   onClick: void 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "7.16.0",
+  "version": "7.19.0",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.16.0",
-    "@instructure/ui-a11y-utils": "^7.16.0",
-    "@instructure/ui-color-utils": "^7.16.0",
-    "@instructure/ui-dom-utils": "^7.16.0",
-    "@instructure/ui-icons": "^7.16.0",
-    "@instructure/ui-prop-types": "^7.16.0",
-    "@instructure/ui-react-utils": "^7.16.0",
-    "@instructure/ui-testable": "^7.16.0",
-    "@instructure/ui-themeable": "^7.16.0",
-    "@instructure/ui-view": "^7.16.0",
+    "@instructure/console": "^7.19.0",
+    "@instructure/ui-a11y-utils": "^7.19.0",
+    "@instructure/ui-color-utils": "^7.19.0",
+    "@instructure/ui-dom-utils": "^7.19.0",
+    "@instructure/ui-icons": "^7.19.0",
+    "@instructure/ui-prop-types": "^7.19.0",
+    "@instructure/ui-react-utils": "^7.19.0",
+    "@instructure/ui-testable": "^7.19.0",
+    "@instructure/ui-themeable": "^7.19.0",
+    "@instructure/ui-view": "^7.19.0",
     "classnames": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.16.0",
-    "@instructure/ui-test-locator": "^7.16.0",
-    "@instructure/ui-test-queries": "^7.16.0",
-    "@instructure/ui-test-utils": "^7.16.0"
+    "@instructure/ui-babel-preset": "^7.19.0",
+    "@instructure/ui-test-locator": "^7.19.0",
+    "@instructure/ui-test-queries": "^7.19.0",
+    "@instructure/ui-test-utils": "^7.19.0"
   },
   "peerDependencies": {
     "react": "^16.8"

package/src/Link/__examples__/Link.examples.js

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

package/src/Link/index.js

@@ -77,6 +77,15 @@ class Link extends Component {
      * The element type to render as (will default to `<a>` if href is provided)
      */
     as: PropTypes.elementType,
+    /**
+     * The ARIA role of the element.
+     */
+    role: PropTypes.string,
+    /**
+     * If the Link has an onClick handler but is not a button element,
+     * force ARIA role to be "button".
+     */
+    forceButtonRole: PropTypes.bool,
     /**
      * Determines if the link is enabled or disabled
      */
@@ -144,6 +153,8 @@ class Link extends Component {
     display: undefined,
     color: 'link',
     as: undefined,
+    role: undefined,
+    forceButtonRole: true,
     iconPlacement: 'start',
     isWithinText: true,
     onClick: undefined,
@@ -239,6 +250,16 @@ class Link extends Component {
     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._link && this._link.focus()
   }
@@ -284,10 +305,11 @@ class Link extends Component {
     const { interaction } = this
 
     const isDisabled = interaction === 'disabled'
-    const role = onClick && this.element !== 'button' ? 'button' : null
+
     const type =
       this.element === 'button' || this.element === 'input' ? 'button' : null
-    const tabIndex = role === 'button' && !isDisabled ? '0' : null
+
+    const tabIndex = this.role === 'button' && !isDisabled ? '0' : null
 
     return (
       <View
@@ -301,7 +323,7 @@ class Link extends Component {
         onFocus={this.handleFocus}
         onBlur={this.handleBlur}
         aria-disabled={isDisabled ? 'true' : null}
-        role={role}
+        role={this.role}
         type={type}
         tabIndex={tabIndex}
         className={classnames(classes)}

package/types/index.d.ts

@@ -33,6 +33,15 @@ export interface LinkProps {
      * The element type to render as (will default to `<a>` if href is provided)
      */
     as?: any;
+    /**
+     * 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
      */