[Navigation] Add ariaLabelledBy prop in order to add menu label for screen readers

[mathildebuenerd]

WHY are these changes introduced?

Fixes #4289
Fixes Shopify/handshake-discovery-team#247

Currently it's not possible to pass a label to the Navigation component that can be used to differentiate this nav from other nav when navigating with landmarks.

This PR is adding a way to generate the following output (described here: https://www.w3.org/WAI/tutorials/menus/structure/#label-menus):

<nav aria-labelledby="mainmenulabel">
    <h2 id="mainmenulabel" class="visuallyhidden">Main Menu</h2>
</nav>

From this implementation:

<Navigation ariaLabelledBy="mainmenulabel">
    <VisuallyHidden>
        <h2 id="mainmenulabel">Main</h2>
    </VisuallyHidden>
</Navigation>

WHAT is this pull request doing?

Adds ariaLabelledBy props to Navigation component. It is then passed as aria-labelledby property to the <nav> element.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Navigation, Page, VisuallyHidden} from '../src';

export function Playground() {
  const ariaLabelledById = 'label-1';

  const children = (
    <ul>
      <li>Item</li>
    </ul>
  );
  return (
    <Page title="Playground">
      <Navigation location="/" ariaLabelledBy={ariaLabelledById}>
        <VisuallyHidden>
          <h2 id={ariaLabelledById}>Hidden label</h2>
        </VisuallyHidden>
        {children}
      </Navigation>
    </Page>
  );
}

Tophat instructions:

• There is not visible change in the UI
• Use the above Playground code

1. Inspect the the HTML output:

• The label should be not be visible and the id of the label should equal the aria-labelledby value of the <nav>

2. Use landmark navigation

• Use Voice over and open landmarks navigation:
  • Activate Voice over (hold down the Command key and triple-tap the Touch ID button)
  • Open the rotor by pressing control + option + U
  • Use left/right arrows to find "Landmark navigation" panel
  • In this panel there should be an entry "Hidden label navigation"

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	142.13 KB (+0.02% 🔺)
esm	95.86 KB (+0.02% 🔺)
esnext	138.87 KB (+0.01% 🔺)
css	33.56 KB (0%)

[kyledurand]

It looks like you're only adding ariaLabelledBy. Can you remove the ariaLabel part from this PR?

Also the PR number is wrong

[mathildebuenerd]

Thanks for the review! I fixed both 👍

[kyledurand]

Looks good 👏 Thanks @mathildebuenerd