When the SunNav component is used in an environment with practical data, it is high likely that the selected attribute will be used in each SubNav children and their value will be conditionally rendered to true or false. Therefore the generated HTML will be

<a data-selected="false" aria-current="false" href="#nav1">Nav 1</a>
<a data-selected="true" aria-current="true" href="#nav2">Nav 2</a>
<a data-selected="false" aria-current="false" href="#nav3">Nav 3</a>

Currently the way we apply the selected styles are causing bug because the styles are applied to all links because all have data-selected property.

Here is an example from RL that shows the bug

There is currently no usage of SubNav at dotcom - this is why we probably didn't noticed the issue so far.

Changelog

New

Changed

• Instead of selecting data-selected attribute to apply selected styles, I updated the code to select data-selected="true"

Removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

If you could edit the Selected story so that each children have selected prop. You can repro the issue and with the change in this PR, you can verify the fix.

export const Selected = () => {
  const [selectedItem, setSelectedItem] = React.useState('home')

  return (
    <SubNav aria-label="Main">
      <SubNav.Links>
        <SubNav.Link href="#home" selected={selectedItem === 'home'}>
          Home
        </SubNav.Link>
        <SubNav.Link href="#documentation" selected={selectedItem === 'documentation'}>
          Documentation
        </SubNav.Link>
        <SubNav.Link href="#support" selected={selectedItem === 'support'}>
          Support
        </SubNav.Link>
      </SubNav.Links>
    </SubNav>
  )
}

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)