@instructure/ui-breadcrumb 10.10.1-snapshot-1 → 10.10.1-snapshot-2

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.10.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-1) (2025-01-08)
+## [10.10.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-2) (2025-01-09)
 
-**Note:** Version bump only for package @instructure/ui-breadcrumb
+
+### Bug Fixes
+
+* **ui-breadcrumb:** add and update aria tags in Breadcrumb and in documentation ([e8db0f2](https://github.com/instructure/instructure-ui/commit/e8db0f20b5f8acc6662a1c8cc7c2530466e6869d))
 
 
 

package/es/Breadcrumb/BreadcrumbLink/index.js

@@ -50,7 +50,8 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
       renderIcon = _this$props.renderIcon,
       iconPlacement = _this$props.iconPlacement,
       onClick = _this$props.onClick,
-      onMouseEnter = _this$props.onMouseEnter;
+      onMouseEnter = _this$props.onMouseEnter,
+      isCurrentPage = _this$props.isCurrentPage;
     const props = omitProps(this.props, BreadcrumbLink.allowedProps);
     return /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
       href: href,
@@ -60,6 +61,8 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
       onMouseEnter: onMouseEnter,
       isWithinText: false,
       elementRef: this.handleRef
+    }, isCurrentPage && {
+      'aria-current': 'page'
     }), /*#__PURE__*/React.createElement(TruncateText, null, children));
   }
 }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = propTypes, _BreadcrumbLink.allowedProps = allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);

package/es/Breadcrumb/BreadcrumbLink/props.js

@@ -30,7 +30,8 @@ const propTypes = {
   onMouseEnter: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  iconPlacement: PropTypes.oneOf(['start', 'end'])
+  iconPlacement: PropTypes.oneOf(['start', 'end']),
+  isCurrentPage: PropTypes.bool
 };
-const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size'];
+const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
 export { propTypes, allowedProps };

package/es/Breadcrumb/__new-tests__/Breadcrumb.test.js

@@ -1,4 +1,4 @@
-var _Breadcrumb, _Breadcrumb2, _Breadcrumb3;
+var _Breadcrumb, _Breadcrumb2, _Breadcrumb3, _Breadcrumb4, _Breadcrumb5, _Breadcrumb6, _Breadcrumb7;
 /*
  * The MIT License (MIT)
  *
@@ -89,4 +89,57 @@ describe('<Breadcrumb />', () => {
     expect(icon).toBeInTheDocument();
     expect(icon).toHaveAttribute('aria-hidden', 'true');
   });
+  it('should add aria-current="page" to the last element by default', () => {
+    const _render4 = render(_Breadcrumb4 || (_Breadcrumb4 = /*#__PURE__*/React.createElement(Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
+      container = _render4.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page');
+    expect(lastLink).toHaveAttribute('aria-current', 'page');
+  });
+  it('should add aria-current="page" to the element if isCurrent is true', () => {
+    const _render5 = render(_Breadcrumb5 || (_Breadcrumb5 = /*#__PURE__*/React.createElement(Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+        isCurrentPage: true,
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, null, TEST_TEXT_02)))),
+      container = _render5.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).toHaveAttribute('aria-current', 'page');
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page');
+  });
+  it('should throw a warning when multiple elements have isCurrent set to true ', () => {
+    render(_Breadcrumb6 || (_Breadcrumb6 = /*#__PURE__*/React.createElement(Breadcrumb, {
+      label: TEST_LABEL
+    }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+      isCurrentPage: true,
+      href: TEST_LINK
+    }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+      isCurrentPage: true
+    }, TEST_TEXT_02))));
+    expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining('Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.'));
+  });
+  it('should not add aria-current="page" to the last element if it set to false', () => {
+    const _render6 = render(_Breadcrumb7 || (_Breadcrumb7 = /*#__PURE__*/React.createElement(Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/React.createElement(Breadcrumb.Link, {
+        isCurrentPage: false
+      }, TEST_TEXT_02)))),
+      container = _render6.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page');
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page');
+  });
 });

package/es/Breadcrumb/index.js

@@ -45,6 +45,12 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     this.handleRef = el => {
       this.ref = el;
     };
+    this.addAriaCurrent = child => {
+      const updatedChild = /*#__PURE__*/React.cloneElement(child, {
+        'aria-current': 'page'
+      });
+      return updatedChild;
+    };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -62,11 +68,20 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     };
+    let isAriaCurrentSet = false;
     return React.Children.map(children, (child, index) => {
+      const isLastElement = index === numChildren - 1;
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        const isCurrentPage = child.props.isCurrentPage || false;
+        if (isAriaCurrentSet && isCurrentPage) {}
+        if (isCurrentPage) {
+          isAriaCurrentSet = true;
+        }
+      }
       return jsx("li", {
         css: styles === null || styles === void 0 ? void 0 : styles.crumb,
         style: inlineStyle
-      }, child, index < numChildren - 1 && jsx(IconArrowOpenEndSolid, {
+      }, !isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child, index < numChildren - 1 && jsx(IconArrowOpenEndSolid, {
         color: "auto",
         css: styles === null || styles === void 0 ? void 0 : styles.separator
       }));

package/lib/Breadcrumb/BreadcrumbLink/index.js

@@ -56,7 +56,8 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
       renderIcon = _this$props.renderIcon,
       iconPlacement = _this$props.iconPlacement,
       onClick = _this$props.onClick,
-      onMouseEnter = _this$props.onMouseEnter;
+      onMouseEnter = _this$props.onMouseEnter,
+      isCurrentPage = _this$props.isCurrentPage;
     const props = (0, _omitProps.omitProps)(this.props, BreadcrumbLink.allowedProps);
     return /*#__PURE__*/_react.default.createElement(_Link.Link, Object.assign({}, props, {
       href: href,
@@ -66,6 +67,8 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
       onMouseEnter: onMouseEnter,
       isWithinText: false,
       elementRef: this.handleRef
+    }, isCurrentPage && {
+      'aria-current': 'page'
     }), /*#__PURE__*/_react.default.createElement(_TruncateText.TruncateText, null, children));
   }
 }, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = _props.propTypes, _BreadcrumbLink.allowedProps = _props.allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);

package/lib/Breadcrumb/BreadcrumbLink/props.js

@@ -37,6 +37,7 @@ const propTypes = exports.propTypes = {
   onMouseEnter: _propTypes.default.func,
   size: _propTypes.default.oneOf(['small', 'medium', 'large']),
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-  iconPlacement: _propTypes.default.oneOf(['start', 'end'])
+  iconPlacement: _propTypes.default.oneOf(['start', 'end']),
+  isCurrentPage: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size'];
+const allowedProps = exports.allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];

package/lib/Breadcrumb/__new-tests__/Breadcrumb.test.js

@@ -8,8 +8,8 @@ require("@testing-library/jest-dom");
 var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = require("../index");
-var _Breadcrumb4 = _interopRequireDefault(require("../__examples__/Breadcrumb.examples"));
-var _Breadcrumb, _Breadcrumb2, _Breadcrumb3;
+var _Breadcrumb8 = _interopRequireDefault(require("../__examples__/Breadcrumb.examples"));
+var _Breadcrumb, _Breadcrumb2, _Breadcrumb3, _Breadcrumb4, _Breadcrumb5, _Breadcrumb6, _Breadcrumb7;
 /*
  * The MIT License (MIT)
  *
@@ -61,7 +61,7 @@ describe('<Breadcrumb />', () => {
     expect(axeCheck).toBe(true);
   });
   describe('with generated examples', () => {
-    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.Breadcrumb, _Breadcrumb4.default);
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.Breadcrumb, _Breadcrumb8.default);
     it.each(generatedComponents)('should be accessible with example: $description', async ({
       content
     }) => {
@@ -90,4 +90,57 @@ describe('<Breadcrumb />', () => {
     expect(icon).toBeInTheDocument();
     expect(icon).toHaveAttribute('aria-hidden', 'true');
   });
+  it('should add aria-current="page" to the last element by default', () => {
+    const _render4 = (0, _react2.render)(_Breadcrumb4 || (_Breadcrumb4 = /*#__PURE__*/_react.default.createElement(_index.Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, null, TEST_TEXT_02)))),
+      container = _render4.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page');
+    expect(lastLink).toHaveAttribute('aria-current', 'page');
+  });
+  it('should add aria-current="page" to the element if isCurrent is true', () => {
+    const _render5 = (0, _react2.render)(_Breadcrumb5 || (_Breadcrumb5 = /*#__PURE__*/_react.default.createElement(_index.Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+        isCurrentPage: true,
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, null, TEST_TEXT_02)))),
+      container = _render5.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).toHaveAttribute('aria-current', 'page');
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page');
+  });
+  it('should throw a warning when multiple elements have isCurrent set to true ', () => {
+    (0, _react2.render)(_Breadcrumb6 || (_Breadcrumb6 = /*#__PURE__*/_react.default.createElement(_index.Breadcrumb, {
+      label: TEST_LABEL
+    }, /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+      isCurrentPage: true,
+      href: TEST_LINK
+    }, TEST_TEXT_01), /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+      isCurrentPage: true
+    }, TEST_TEXT_02))));
+    expect(consoleWarningMock).toHaveBeenCalledWith(expect.stringContaining('Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.'));
+  });
+  it('should not add aria-current="page" to the last element if it set to false', () => {
+    const _render6 = (0, _react2.render)(_Breadcrumb7 || (_Breadcrumb7 = /*#__PURE__*/_react.default.createElement(_index.Breadcrumb, {
+        label: TEST_LABEL
+      }, /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+        href: TEST_LINK
+      }, TEST_TEXT_01), /*#__PURE__*/_react.default.createElement(_index.Breadcrumb.Link, {
+        isCurrentPage: false
+      }, TEST_TEXT_02)))),
+      container = _render6.container;
+    const links = container.querySelectorAll('[class$="--block-link"]');
+    const firstLink = links[0];
+    const lastLink = links[links.length - 1];
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page');
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page');
+  });
 });

package/lib/Breadcrumb/index.js

@@ -59,6 +59,12 @@ let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.de
     this.handleRef = el => {
       this.ref = el;
     };
+    this.addAriaCurrent = child => {
+      const updatedChild = /*#__PURE__*/_react.default.cloneElement(child, {
+        'aria-current': 'page'
+      });
+      return updatedChild;
+    };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -76,11 +82,20 @@ let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.de
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     };
+    let isAriaCurrentSet = false;
     return _react.default.Children.map(children, (child, index) => {
+      const isLastElement = index === numChildren - 1;
+      if (/*#__PURE__*/_react.default.isValidElement(child)) {
+        const isCurrentPage = child.props.isCurrentPage || false;
+        if (isAriaCurrentSet && isCurrentPage) {}
+        if (isCurrentPage) {
+          isAriaCurrentSet = true;
+        }
+      }
       return (0, _emotion.jsx)("li", {
         css: styles === null || styles === void 0 ? void 0 : styles.crumb,
         style: inlineStyle
-      }, child, index < numChildren - 1 && (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
+      }, !isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child, index < numChildren - 1 && (0, _emotion.jsx)(_IconArrowOpenEndSolid.IconArrowOpenEndSolid, {
         color: "auto",
         css: styles === null || styles === void 0 ? void 0 : styles.separator
       }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-breadcrumb",
-  "version": "10.10.1-snapshot-1",
+  "version": "10.10.1-snapshot-2",
   "description": "A breadcrumb component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,26 +23,26 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.10.1-snapshot-1",
-    "@instructure/ui-babel-preset": "10.10.1-snapshot-1",
-    "@instructure/ui-scripts": "10.10.1-snapshot-1",
-    "@instructure/ui-themes": "10.10.1-snapshot-1",
+    "@instructure/ui-axe-check": "10.10.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.10.1-snapshot-2",
+    "@instructure/ui-scripts": "10.10.1-snapshot-2",
+    "@instructure/ui-themes": "10.10.1-snapshot-2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "vitest": "^2.1.8"
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.10.1-snapshot-1",
-    "@instructure/shared-types": "10.10.1-snapshot-1",
-    "@instructure/ui-icons": "10.10.1-snapshot-1",
-    "@instructure/ui-link": "10.10.1-snapshot-1",
-    "@instructure/ui-prop-types": "10.10.1-snapshot-1",
-    "@instructure/ui-react-utils": "10.10.1-snapshot-1",
-    "@instructure/ui-testable": "10.10.1-snapshot-1",
-    "@instructure/ui-truncate-text": "10.10.1-snapshot-1",
-    "@instructure/ui-utils": "10.10.1-snapshot-1",
-    "@instructure/ui-view": "10.10.1-snapshot-1",
+    "@instructure/emotion": "10.10.1-snapshot-2",
+    "@instructure/shared-types": "10.10.1-snapshot-2",
+    "@instructure/ui-icons": "10.10.1-snapshot-2",
+    "@instructure/ui-link": "10.10.1-snapshot-2",
+    "@instructure/ui-prop-types": "10.10.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.10.1-snapshot-2",
+    "@instructure/ui-testable": "10.10.1-snapshot-2",
+    "@instructure/ui-truncate-text": "10.10.1-snapshot-2",
+    "@instructure/ui-utils": "10.10.1-snapshot-2",
+    "@instructure/ui-view": "10.10.1-snapshot-2",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Breadcrumb/BreadcrumbLink/index.tsx

@@ -54,8 +54,15 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
   }
 
   render() {
-    const { children, href, renderIcon, iconPlacement, onClick, onMouseEnter } =
-      this.props
+    const {
+      children,
+      href,
+      renderIcon,
+      iconPlacement,
+      onClick,
+      onMouseEnter,
+      isCurrentPage
+    } = this.props
 
     const props = omitProps(this.props, BreadcrumbLink.allowedProps)
 
@@ -69,6 +76,7 @@ class BreadcrumbLink extends Component<BreadcrumbLinkProps> {
         onMouseEnter={onMouseEnter}
         isWithinText={false}
         elementRef={this.handleRef}
+        {...(isCurrentPage && { 'aria-current': 'page' })}
       >
         <TruncateText>{children}</TruncateText>
       </Link>

package/src/Breadcrumb/BreadcrumbLink/props.ts

@@ -63,6 +63,11 @@ type BreadcrumbLinkOwnProps = {
    * Place the icon before or after the text in the Breadcrumb.Link
    */
   iconPlacement?: 'start' | 'end'
+  /**
+   * Whether the page this breadcrumb points to is the current one. If true, it sets aria-current="page".
+   * If this prop is not set to true on any breadcrumb element, the one recieving the aria-current="page" will always be the last element, unless the last element's isCurrentPage prop is explicity set to false.
+   */
+  isCurrentPage?: boolean
 }
 
 type PropKeys = keyof BreadcrumbLinkOwnProps
@@ -89,7 +94,8 @@ const propTypes: PropValidators<PropKeys> = {
   onMouseEnter: PropTypes.func,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  iconPlacement: PropTypes.oneOf(['start', 'end'])
+  iconPlacement: PropTypes.oneOf(['start', 'end']),
+  isCurrentPage: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -99,7 +105,8 @@ const allowedProps: AllowedPropKeys = [
   'onClick',
   'onMouseEnter',
   'renderIcon',
-  'size'
+  'size',
+  'isCurrentPage'
 ]
 
 export type { BreadcrumbLinkProps }

package/src/Breadcrumb/README.md

@@ -23,7 +23,7 @@ type: example
   {(props, matches) => {
     if (matches.includes('tablet')) {
       return (
-        <Breadcrumb label="You are here:">
+        <Breadcrumb label="breadcrumb">
           <Breadcrumb.Link href="#">Student Forecast</Breadcrumb.Link>
           <Breadcrumb.Link href="#">University of Utah</Breadcrumb.Link>
           <Breadcrumb.Link href="#">University of Utah Colleges</Breadcrumb.Link>
@@ -52,7 +52,7 @@ Change the `size` prop to control the font-size of the breadcrumbs (default is `
 type: example
 ---
 <div>
-  <Breadcrumb size="small" label="You are here:" margin="none none medium">
+  <Breadcrumb size="small" label="breadcrumb" margin="none none medium">
     <Breadcrumb.Link href="https://instructure.github.io/instructure-ui/">English 204</Breadcrumb.Link>
       <Breadcrumb.Link
         onClick={function () {
@@ -65,7 +65,7 @@ type: example
     <Breadcrumb.Link>Rabbit Is Rich</Breadcrumb.Link>
   </Breadcrumb>
   <View as="div" width="40rem">
-    <Breadcrumb label="You are here:" margin="none none medium">
+    <Breadcrumb label="breadcrumb" margin="none none medium">
       <Breadcrumb.Link href="https://instructure.github.io/instructure-ui/">English 204</Breadcrumb.Link>
         <Breadcrumb.Link
           onClick={function () {
@@ -78,7 +78,7 @@ type: example
       <Breadcrumb.Link>Rabbit Is Rich</Breadcrumb.Link>
     </Breadcrumb>
   </View>
-  <Breadcrumb size="large" label="You are here:">
+  <Breadcrumb size="large" label="breadcrumb">
     <Breadcrumb.Link href="https://instructure.github.io/instructure-ui/">English 204</Breadcrumb.Link>
       <Breadcrumb.Link
         onClick={function () {
@@ -126,3 +126,16 @@ type: embed
   </Figure>
 </Guidelines>
 ```
+
+```js
+---
+type: embed
+---
+<Guidelines>
+  <Figure recommendation="a11y" title="Accessibility">
+    <Figure.Item>
+    To indicate the current element within a breadcrumb, the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current">aria-current</a> attribute is used. In this component, aria-current="page" will automatically be applied to the last element, and we recommend that the current page always be the last element in the breadcrumb. If the last element is not the current page, the isCurrentPage property should be applied to the relevant Breadcrumb.Link to ensure compatibility with screen readers.
+    </Figure.Item>
+  </Figure>
+</Guidelines>
+```

package/src/Breadcrumb/__new-tests__/Breadcrumb.test.tsx

@@ -111,4 +111,68 @@ describe('<Breadcrumb />', () => {
     expect(icon).toBeInTheDocument()
     expect(icon).toHaveAttribute('aria-hidden', 'true')
   })
+
+  it('should add aria-current="page" to the last element by default', () => {
+    const { container } = render(
+      <Breadcrumb label={TEST_LABEL}>
+        <Breadcrumb.Link href={TEST_LINK}>{TEST_TEXT_01}</Breadcrumb.Link>
+        <Breadcrumb.Link>{TEST_TEXT_02}</Breadcrumb.Link>
+      </Breadcrumb>
+    )
+    const links = container.querySelectorAll('[class$="--block-link"]')
+    const firstLink = links[0]
+    const lastLink = links[links.length - 1]
+
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page')
+    expect(lastLink).toHaveAttribute('aria-current', 'page')
+  })
+
+  it('should add aria-current="page" to the element if isCurrent is true', () => {
+    const { container } = render(
+      <Breadcrumb label={TEST_LABEL}>
+        <Breadcrumb.Link isCurrentPage href={TEST_LINK}>
+          {TEST_TEXT_01}
+        </Breadcrumb.Link>
+        <Breadcrumb.Link>{TEST_TEXT_02}</Breadcrumb.Link>
+      </Breadcrumb>
+    )
+    const links = container.querySelectorAll('[class$="--block-link"]')
+    const firstLink = links[0]
+    const lastLink = links[links.length - 1]
+
+    expect(firstLink).toHaveAttribute('aria-current', 'page')
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page')
+  })
+
+  it('should throw a warning when multiple elements have isCurrent set to true ', () => {
+    render(
+      <Breadcrumb label={TEST_LABEL}>
+        <Breadcrumb.Link isCurrentPage href={TEST_LINK}>
+          {TEST_TEXT_01}
+        </Breadcrumb.Link>
+        <Breadcrumb.Link isCurrentPage>{TEST_TEXT_02}</Breadcrumb.Link>
+      </Breadcrumb>
+    )
+
+    expect(consoleWarningMock).toHaveBeenCalledWith(
+      expect.stringContaining(
+        'Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.'
+      )
+    )
+  })
+
+  it('should not add aria-current="page" to the last element if it set to false', () => {
+    const { container } = render(
+      <Breadcrumb label={TEST_LABEL}>
+        <Breadcrumb.Link href={TEST_LINK}>{TEST_TEXT_01}</Breadcrumb.Link>
+        <Breadcrumb.Link isCurrentPage={false}>{TEST_TEXT_02}</Breadcrumb.Link>
+      </Breadcrumb>
+    )
+    const links = container.querySelectorAll('[class$="--block-link"]')
+    const firstLink = links[0]
+    const lastLink = links[links.length - 1]
+
+    expect(firstLink).not.toHaveAttribute('aria-current', 'page')
+    expect(lastLink).not.toHaveAttribute('aria-current', 'page')
+  })
 })

package/src/Breadcrumb/index.tsx

@@ -62,6 +62,16 @@ class Breadcrumb extends Component<BreadcrumbProps> {
     this.ref = el
   }
 
+  addAriaCurrent = (child: React.ReactNode) => {
+    const updatedChild = React.cloneElement(
+      child as React.ReactElement<{ 'aria-current'?: string }>,
+      {
+        'aria-current': 'page'
+      }
+    )
+    return updatedChild
+  }
+
   componentDidMount() {
     this.props.makeStyles?.()
   }
@@ -77,10 +87,28 @@ class Breadcrumb extends Component<BreadcrumbProps> {
     const inlineStyle = {
       maxWidth: `${Math.floor(100 / numChildren)}%`
     }
+    let isAriaCurrentSet = false
+
     return React.Children.map(children, (child, index) => {
+      const isLastElement = index === numChildren - 1
+      if (React.isValidElement(child)) {
+        const isCurrentPage = child.props.isCurrentPage || false
+        if (isAriaCurrentSet && isCurrentPage) {
+          console.warn(
+            `Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.`
+          )
+        }
+        if (isCurrentPage) {
+          isAriaCurrentSet = true
+        }
+      }
       return (
         <li css={styles?.crumb} style={inlineStyle}>
-          {child}
+          {!isAriaCurrentSet &&
+          isLastElement &&
+          (child as React.ReactElement).props.isCurrentPage !== false
+            ? this.addAriaCurrent(child)
+            : child}
           {index < numChildren - 1 && (
             <IconArrowOpenEndSolid color="auto" css={styles?.separator} />
           )}