@instructure/ui-breadcrumb 10.25.1-snapshot-9 → 10.25.1-snapshot-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Breadcrumb/BreadcrumbLink/index.js +16 -1
  3. package/lib/Breadcrumb/BreadcrumbLink/index.js +16 -1
  4. package/package.json +16 -16
  5. package/src/Breadcrumb/BreadcrumbLink/index.tsx +13 -1
  6. package/tsconfig.build.tsbuildinfo +1 -1
  7. package/types/Breadcrumb/BreadcrumbLink/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.25.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-snapshot-9) (2025-10-01)
6
+ ## [10.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.25.1-snapshot-10) (2025-10-01)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-breadcrumb
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-breadcrumb:** fix Breadcrumb accessibility issues ([638ffbe](https://github.com/instructure/instructure-ui/commit/638ffbe5263be6e07dff13e2d114daa84631f119))
9
12
 
10
13
 
11
14
 
package/es/Breadcrumb/BreadcrumbLink/index.js CHANGED
@@ -66,9 +66,16 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
66
66
  isCurrentPage = _this$props.isCurrentPage;
67
67
  const isTruncated = this.state.isTruncated;
68
68
  const props = omitProps(this.props, BreadcrumbLink.allowedProps);
69
+ const isInteractive = onClick || href;
69
70
  return _jsx(Tooltip, {
70
71
  renderTip: children,
71
- preventTooltip: !isTruncated,
72
+ preventTooltip: !isTruncated
73
+ // this wraps the achor/button tag in a span and puts the aria-describedby on that instead of the anchor/button tag
74
+ // to avoid SRs reading the text twice when there is already an aria-label
75
+ ,
76
+ ...(isInteractive && {
77
+ as: 'span'
78
+ }),
72
79
  children: _jsx(Link, {
73
80
  ...props,
74
81
  href: href,
@@ -82,6 +89,14 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
82
89
  ...(isCurrentPage && {
83
90
  'aria-current': 'page'
84
91
  }),
92
+ ...(isTruncated && {
93
+ ...(typeof children === 'string' && {
94
+ 'aria-label': children
95
+ }),
96
+ ...(!isInteractive && {
97
+ role: 'text'
98
+ })
99
+ }),
85
100
  children: _jsx(TruncateText, {
86
101
  onUpdate: isTruncated => this.handleTruncation(isTruncated),
87
102
  children: _jsx("span", {
package/lib/Breadcrumb/BreadcrumbLink/index.js CHANGED
@@ -71,9 +71,16 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
71
71
  isCurrentPage = _this$props.isCurrentPage;
72
72
  const isTruncated = this.state.isTruncated;
73
73
  const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
74
+ const isInteractive = onClick || href;
74
75
  return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
75
76
  renderTip: children,
76
- preventTooltip: !isTruncated,
77
+ preventTooltip: !isTruncated
78
+ // this wraps the achor/button tag in a span and puts the aria-describedby on that instead of the anchor/button tag
79
+ // to avoid SRs reading the text twice when there is already an aria-label
80
+ ,
81
+ ...(isInteractive && {
82
+ as: 'span'
83
+ }),
77
84
  children: (0, _jsxRuntime.jsx)(_Link.Link, {
78
85
  ...props,
79
86
  href: href,
@@ -87,6 +94,14 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
87
94
  ...(isCurrentPage && {
88
95
  'aria-current': 'page'
89
96
  }),
97
+ ...(isTruncated && {
98
+ ...(typeof children === 'string' && {
99
+ 'aria-label': children
100
+ }),
101
+ ...(!isInteractive && {
102
+ role: 'text'
103
+ })
104
+ }),
90
105
  children: (0, _jsxRuntime.jsx)(_TruncateText.TruncateText, {
91
106
  onUpdate: isTruncated => this.handleTruncation(isTruncated),
92
107
  children: (0, _jsxRuntime.jsx)("span", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-breadcrumb",
3
- "version": "10.25.1-snapshot-9",
3
+ "version": "10.25.1-snapshot-10",
4
4
  "description": "A breadcrumb component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,27 +23,27 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.25.1-snapshot-9",
27
- "@instructure/ui-babel-preset": "10.25.1-snapshot-9",
28
- "@instructure/ui-scripts": "10.25.1-snapshot-9",
29
- "@instructure/ui-themes": "10.25.1-snapshot-9",
26
+ "@instructure/ui-axe-check": "10.25.1-snapshot-10",
27
+ "@instructure/ui-babel-preset": "10.25.1-snapshot-10",
28
+ "@instructure/ui-scripts": "10.25.1-snapshot-10",
29
+ "@instructure/ui-themes": "10.25.1-snapshot-10",
30
30
  "@testing-library/jest-dom": "^6.6.3",
31
31
  "@testing-library/react": "^16.0.1",
32
32
  "vitest": "^3.2.2"
33
33
  },
34
34
  "dependencies": {
35
35
  "@babel/runtime": "^7.27.6",
36
- "@instructure/emotion": "10.25.1-snapshot-9",
37
- "@instructure/shared-types": "10.25.1-snapshot-9",
38
- "@instructure/ui-icons": "10.25.1-snapshot-9",
39
- "@instructure/ui-link": "10.25.1-snapshot-9",
40
- "@instructure/ui-prop-types": "10.25.1-snapshot-9",
41
- "@instructure/ui-react-utils": "10.25.1-snapshot-9",
42
- "@instructure/ui-testable": "10.25.1-snapshot-9",
43
- "@instructure/ui-tooltip": "10.25.1-snapshot-9",
44
- "@instructure/ui-truncate-text": "10.25.1-snapshot-9",
45
- "@instructure/ui-utils": "10.25.1-snapshot-9",
46
- "@instructure/ui-view": "10.25.1-snapshot-9",
36
+ "@instructure/emotion": "10.25.1-snapshot-10",
37
+ "@instructure/shared-types": "10.25.1-snapshot-10",
38
+ "@instructure/ui-icons": "10.25.1-snapshot-10",
39
+ "@instructure/ui-link": "10.25.1-snapshot-10",
40
+ "@instructure/ui-prop-types": "10.25.1-snapshot-10",
41
+ "@instructure/ui-react-utils": "10.25.1-snapshot-10",
42
+ "@instructure/ui-testable": "10.25.1-snapshot-10",
43
+ "@instructure/ui-tooltip": "10.25.1-snapshot-10",
44
+ "@instructure/ui-truncate-text": "10.25.1-snapshot-10",
45
+ "@instructure/ui-utils": "10.25.1-snapshot-10",
46
+ "@instructure/ui-view": "10.25.1-snapshot-10",
47
47
  "prop-types": "^15.8.1"
48
48
  },
49
49
  "peerDependencies": {
package/src/Breadcrumb/BreadcrumbLink/index.tsx CHANGED
@@ -68,6 +68,7 @@ class BreadcrumbLink extends Component<
68
68
  this.setState({ isTruncated })
69
69
  }
70
70
  }
71
+
71
72
  render() {
72
73
  const {
73
74
  children,
@@ -82,8 +83,15 @@ class BreadcrumbLink extends Component<
82
83
  const { isTruncated } = this.state
83
84
  const props = omitProps(this.props, BreadcrumbLink.allowedProps)
84
85
 
86
+ const isInteractive = onClick || href
85
87
  return (
86
- <Tooltip renderTip={children} preventTooltip={!isTruncated}>
88
+ <Tooltip
89
+ renderTip={children}
90
+ preventTooltip={!isTruncated}
91
+ // this wraps the achor/button tag in a span and puts the aria-describedby on that instead of the anchor/button tag
92
+ // to avoid SRs reading the text twice when there is already an aria-label
93
+ {...(isInteractive && { as: 'span' })}
94
+ >
87
95
  <Link
88
96
  {...props}
89
97
  href={href}
@@ -95,6 +103,10 @@ class BreadcrumbLink extends Component<
95
103
  elementRef={this.handleRef}
96
104
  forceButtonRole={false}
97
105
  {...(isCurrentPage && { 'aria-current': 'page' })}
106
+ {...(isTruncated && {
107
+ ...(typeof children === 'string' && { 'aria-label': children }),
108
+ ...(!isInteractive && { role: 'text' })
109
+ })}
98
110
  >
99
111
  <TruncateText
100
112
  onUpdate={(isTruncated) => this.handleTruncation(isTruncated)}