Skip to content

fix(a11y-landmark): spread other html props over tabs nav item#1405

Open
Stefan3002 wants to merge 1 commit into
canonical:mainfrom
Stefan3002:fix-tabs-unique-landmark
Open

fix(a11y-landmark): spread other html props over tabs nav item#1405
Stefan3002 wants to merge 1 commit into
canonical:mainfrom
Stefan3002:fix-tabs-unique-landmark

Conversation

@Stefan3002

@Stefan3002 Stefan3002 commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Done

  • Since the Tabs component renders a "nav" item, it will most certainly conflict with other navs and create the "unique landmark" a11y violation.
  • Added support for spreading other HTML attributes over the nav component of the Tabs component

QA

Pinging @canonical/react-library-maintainers for a review.

Make sure that, when you pass in a "aria-label" attribute to the Tabs component, it is actually rendered in the nav element

image

Storybook

To see rendered examples of all react-components, run:

yarn start

QA

Fixes

Fixes: #AC-4738

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds support for passing additional HTML/ARIA attributes to the <nav> element rendered by Tabs, to help consumers provide unique accessible names (avoiding “unique landmark” a11y violations when multiple nav landmarks exist).

Changes:

  • Spreads remaining props from Tabs onto the root <nav> element.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 50 to +54
const Tabs = <P,>({
className,
links,
listClassName,
...props
}: Props<P>): React.JSX.Element => {
return (
<nav className={classNames("p-tabs", className)}>
<nav className={classNames("p-tabs", className)} {...props}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants