@instructure/ui-buttons 11.7.4-snapshot-135 → 11.7.4-snapshot-142

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 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-135](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-135) (2026-07-24)
+## [11.7.4-snapshot-142](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-142) (2026-07-24)
 
 
 ### Bug Fixes
 
+* **many:** do not allow javascript: and data: hrefs ([4a0ac03](https://github.com/instructure/instructure-ui/commit/4a0ac038c6a4102646e04d27c1c3251f97367822))
 * **ui-buttons:** fix ai-secondary button size diff ([d559a3f](https://github.com/instructure/instructure-ui/commit/d559a3f5444ac70ef4f037f8810336825fb5e795))
 * **ui-buttons:** fix buttons disabled style and color ([2f2f7b0](https://github.com/instructure/instructure-ui/commit/2f2f7b04c7d666aef0e76054c9f722dab9f679e7))
 * **ui-table:** fix caption for table to be responsive to sorting ([aac2b17](https://github.com/instructure/instructure-ui/commit/aac2b1790f970a1e8e2d959723eb0e4248105dd2))

package/es/BaseButton/v1/index.js

@@ -31,7 +31,7 @@ import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { View } from '@instructure/ui-view/v11_6';
 // TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
 // this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
-import { isSafari } from '@instructure/ui-utils';
+import { isSafari, safeLinkProps } from '@instructure/ui-utils';
 import { combineDataCid } from '@instructure/ui-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles.js';
@@ -223,7 +223,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -247,6 +247,17 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       isReadOnly,
       elementType
     } = this;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true;
@@ -277,6 +288,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       margin: margin,
       cursor: isDisabled ? 'not-allowed' : cursor,
       href: href,
+      rel: rel,
       type: href ? undefined : type,
       elementRef: this.handleElementRef,
       onClick: this.handleClick,

package/es/BaseButton/v2/index.js

@@ -32,7 +32,7 @@ import { renderIconWithProps } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view/latest';
 // TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
 // this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
-import { isSafari } from '@instructure/ui-utils';
+import { isSafari, safeLinkProps } from '@instructure/ui-utils';
 import { combineDataCid } from '@instructure/ui-utils';
 import { withStyleNew } from '@instructure/emotion';
 import generateStyles from './styles.js';
@@ -244,7 +244,7 @@ let BaseButton = (_dec = withStyleNew(generateStyles), _dec(_class = class BaseB
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -268,6 +268,17 @@ let BaseButton = (_dec = withStyleNew(generateStyles), _dec(_class = class BaseB
       isReadOnly,
       elementType
     } = this;
+    const {
+      href,
+      rel
+    } = safeLinkProps({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true;
@@ -298,6 +309,7 @@ let BaseButton = (_dec = withStyleNew(generateStyles), _dec(_class = class BaseB
       margin: margin,
       cursor: isDisabled ? 'not-allowed' : cursor,
       href: href,
+      rel: rel,
       type: href ? undefined : type,
       elementRef: this.handleElementRef,
       onClick: this.handleClick,

package/lib/BaseButton/v1/index.js

@@ -232,7 +232,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -256,6 +256,17 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       isReadOnly,
       elementType
     } = this;
+    const {
+      href,
+      rel
+    } = (0, _uiUtils.safeLinkProps)({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true;
@@ -286,6 +297,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       margin: margin,
       cursor: isDisabled ? 'not-allowed' : cursor,
       href: href,
+      rel: rel,
       type: href ? undefined : type,
       elementRef: this.handleElementRef,
       onClick: this.handleClick,

package/lib/BaseButton/v2/index.js

@@ -252,7 +252,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyleNew)(_styles
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -276,6 +276,17 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyleNew)(_styles
       isReadOnly,
       elementType
     } = this;
+    const {
+      href,
+      rel
+    } = (0, _uiUtils.safeLinkProps)({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: props.target,
+      rel: props.rel
+    });
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true;
@@ -306,6 +317,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyleNew)(_styles
       margin: margin,
       cursor: isDisabled ? 'not-allowed' : cursor,
       href: href,
+      rel: rel,
       type: href ? undefined : type,
       elementRef: this.handleElementRef,
       onClick: this.handleClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "11.7.4-snapshot-135",
+  "version": "11.7.4-snapshot-142",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@babel/runtime": "^7.29.7",
     "keycode": "^2",
-    "@instructure/console": "11.7.4-snapshot-135",
-    "@instructure/emotion": "11.7.4-snapshot-135",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-135",
-    "@instructure/shared-types": "11.7.4-snapshot-135",
-    "@instructure/ui-a11y-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-color-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-position": "11.7.4-snapshot-135",
-    "@instructure/ui-themes": "11.7.4-snapshot-135",
-    "@instructure/ui-tooltip": "11.7.4-snapshot-135",
-    "@instructure/ui-utils": "11.7.4-snapshot-135",
-    "@instructure/ui-view": "11.7.4-snapshot-135",
-    "@instructure/ui-icons": "11.7.4-snapshot-135"
+    "@instructure/console": "11.7.4-snapshot-142",
+    "@instructure/shared-types": "11.7.4-snapshot-142",
+    "@instructure/emotion": "11.7.4-snapshot-142",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-142",
+    "@instructure/ui-a11y-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-color-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-icons": "11.7.4-snapshot-142",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-themes": "11.7.4-snapshot-142",
+    "@instructure/ui-tooltip": "11.7.4-snapshot-142",
+    "@instructure/ui-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-142",
+    "@instructure/ui-position": "11.7.4-snapshot-142",
+    "@instructure/ui-view": "11.7.4-snapshot-142"
   },
   "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-axe-check": "11.7.4-snapshot-135",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-135"
+    "@instructure/ui-axe-check": "11.7.4-snapshot-142",
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-142"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/BaseButton/v1/index.tsx

@@ -38,7 +38,7 @@ import type { ViewProps } from '@instructure/ui-view/v11_6'
 
 // TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
 // this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
-import { isSafari } from '@instructure/ui-utils'
+import { isSafari, safeLinkProps } from '@instructure/ui-utils'
 import { combineDataCid } from '@instructure/ui-utils'
 
 import { withStyle } from '@instructure/emotion'
@@ -239,7 +239,7 @@ class BaseButton extends Component<BaseButtonProps> {
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -258,8 +258,15 @@ class BaseButton extends Component<BaseButtonProps> {
       withFocusOutline,
       ...props
     } = this.props
-
     const { isDisabled, isReadOnly, elementType } = this
+    const { href, rel } = safeLinkProps({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: (props as { target?: string }).target,
+      rel: (props as { rel?: string }).rel
+    })
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true
@@ -303,6 +310,7 @@ class BaseButton extends Component<BaseButtonProps> {
         margin={margin}
         cursor={isDisabled ? 'not-allowed' : cursor}
         href={href}
+        rel={rel}
         type={href ? undefined : type}
         elementRef={this.handleElementRef}
         onClick={this.handleClick}

package/src/BaseButton/v2/index.tsx

@@ -38,7 +38,7 @@ import type { ViewProps } from '@instructure/ui-view/latest'
 
 // TODO these have to be imported in separate lines because otherwise `isSafari` will be missing from the babel build
 // this bug is very likely caused by `babel-plugin-transform-imports` and can be reverted once it is removed from the codebase
-import { isSafari } from '@instructure/ui-utils'
+import { isSafari, safeLinkProps } from '@instructure/ui-utils'
 import { combineDataCid } from '@instructure/ui-utils'
 
 import { withStyleNew } from '@instructure/emotion'
@@ -262,7 +262,7 @@ class BaseButton extends Component<BaseButtonProps> {
       size,
       elementRef,
       as,
-      href,
+      href: rawHref,
       color,
       focusColor,
       textAlign,
@@ -283,6 +283,14 @@ class BaseButton extends Component<BaseButtonProps> {
     } = this.props
 
     const { isDisabled, isReadOnly, elementType } = this
+    const { href, rel } = safeLinkProps({
+      tag: typeof elementType == 'string' ? elementType : 'button',
+      attr: 'href',
+      href: rawHref,
+      target: (props as { target?: string }).target,
+      rel: (props as { rel?: string }).rel
+    })
+
     // only add 0 tabIndex value if it doesn't have it by default, see
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
     let needsZeroTabIndex = true
@@ -326,6 +334,7 @@ class BaseButton extends Component<BaseButtonProps> {
         margin={margin}
         cursor={isDisabled ? 'not-allowed' : cursor}
         href={href}
+        rel={rel}
         type={href ? undefined : type}
         elementRef={this.handleElementRef}
         onClick={this.handleClick}