From 92a0ba89aa89f351a2a8dc73b13b5297d7f0d0d5 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Tue, 24 May 2022 11:21:56 +0300
Subject: [PATCH 1/9] Add aria-label support into Navigation component

---
 .../src/components/navigation/Navigation.stories.tsx   |  2 +-
 .../navigation/navigationRow/NavigationRow.test.tsx    |  5 +++--
 .../navigation/navigationRow/NavigationRow.tsx         | 10 ++++++++--
 .../__snapshots__/NavigationRow.test.tsx.snap          |  1 +
 .../components/sideNavigation/SideNavigation.test.tsx  |  2 +-
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/components/navigation/Navigation.stories.tsx b/packages/react/src/components/navigation/Navigation.stories.tsx
index 0f24e15bfe..5499b59fe5 100644
--- a/packages/react/src/components/navigation/Navigation.stories.tsx
+++ b/packages/react/src/components/navigation/Navigation.stories.tsx
@@ -52,7 +52,7 @@ export const Default = ({ searchLabel, searchPlaceholder, authenticated, userNam
   // @ts-ignore
   <Navigation {...args}>
     {/* NAVIGATION ROW */}
-    <Navigation.Row>
+    <Navigation.Row ariaLabel="Main navigation">
       <Navigation.Item href="#" label="Link" active onClick={(e) => e.preventDefault()} />
       <Navigation.Item href="#" label="Link" onClick={(e) => e.preventDefault()} />
       <Navigation.Item href="#" label="Link" onClick={(e) => e.preventDefault()} />
diff --git a/packages/react/src/components/navigation/navigationRow/NavigationRow.test.tsx b/packages/react/src/components/navigation/navigationRow/NavigationRow.test.tsx
index 6069d52a67..807b6b5c5d 100644
--- a/packages/react/src/components/navigation/navigationRow/NavigationRow.test.tsx
+++ b/packages/react/src/components/navigation/navigationRow/NavigationRow.test.tsx
@@ -7,11 +7,12 @@ import { NavigationWrapper } from '../../../utils/test-utils';
 
 describe('<Navigation.Row /> spec', () => {
   it('renders the component', () => {
-    const { asFragment } = render(<NavigationRow />, { wrapper: NavigationWrapper });
+    const { asFragment } = render(<NavigationRow ariaLabel="Main navigation" />, { wrapper: NavigationWrapper });
     expect(asFragment()).toMatchSnapshot();
   });
+
   it('should not have basic accessibility issues', async () => {
-    const { container } = render(<NavigationRow />, { wrapper: NavigationWrapper });
+    const { container } = render(<NavigationRow ariaLabel="Main navigation" />, { wrapper: NavigationWrapper });
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
diff --git a/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx b/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
index c6751b2ac1..5ac33708c7 100644
--- a/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
+++ b/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
@@ -17,9 +17,13 @@ export type NavigationRowProps = React.PropsWithChildren<{
    * `inline` - items will be displayed in the header
    */
   variant?: NavigationVariant;
+  /**
+   * aria-label for helping screen readers to distinguish navigation row from other navigational components
+   */
+  ariaLabel?: string;
 }>;
 
-export const NavigationRow = ({ variant = 'default', children }: NavigationRowProps) => {
+export const NavigationRow = ({ variant = 'default', ariaLabel, children }: NavigationRowProps) => {
   const { setNavigationVariant } = useContext(NavigationContext);
 
   useEffect(() => setNavigationVariant(variant), [setNavigationVariant, variant]);
@@ -43,7 +47,9 @@ export const NavigationRow = ({ variant = 'default', children }: NavigationRowPr
   });
 
   return (
-    <nav className={classNames(styles.navigation, variant === 'default' && styles.subNav)}>{childrenWithClassName}</nav>
+    <nav className={classNames(styles.navigation, variant === 'default' && styles.subNav)} aria-label={ariaLabel}>
+      {childrenWithClassName}
+    </nav>
   );
 };
 NavigationRow.componentName = 'NavigationRow';
diff --git a/packages/react/src/components/navigation/navigationRow/__snapshots__/NavigationRow.test.tsx.snap b/packages/react/src/components/navigation/navigationRow/__snapshots__/NavigationRow.test.tsx.snap
index d8d1d8ac82..4f2aa87ef3 100644
--- a/packages/react/src/components/navigation/navigationRow/__snapshots__/NavigationRow.test.tsx.snap
+++ b/packages/react/src/components/navigation/navigationRow/__snapshots__/NavigationRow.test.tsx.snap
@@ -114,6 +114,7 @@ exports[`<Navigation.Row /> spec renders the component 1`] = `
         </div>
       </div>
       <nav
+        aria-label="Main navigation"
         class="navigation subNav"
       />
     </div>
diff --git a/packages/react/src/components/sideNavigation/SideNavigation.test.tsx b/packages/react/src/components/sideNavigation/SideNavigation.test.tsx
index 8e68bd538b..34b495dd64 100644
--- a/packages/react/src/components/sideNavigation/SideNavigation.test.tsx
+++ b/packages/react/src/components/sideNavigation/SideNavigation.test.tsx
@@ -18,7 +18,7 @@ const url = '#';
 
 const renderSideNavigation = () =>
   render(
-    <SideNavigation id="sideNavigation" toggleButtonLabel={labels.toggleButton}>
+    <SideNavigation id="sideNavigation" toggleButtonLabel={labels.toggleButton} ariaLabel="Side navigation">
       <SideNavigation.MainLevel id="mainLevel1" icon={<IconHome />} label={labels.mainLevel1}>
         <SideNavigation.SubLevel id="subLevel1" active href={url} label={labels.subLevel1} />
       </SideNavigation.MainLevel>

From 22f4120338026ebad19fc755c445b48da27b238d Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Tue, 24 May 2022 11:22:17 +0300
Subject: [PATCH 2/9] Add aria-label support into SideNavigation component

---
 .../react/src/components/sideNavigation/SideNavigation.tsx  | 6 ++++++
 .../__snapshots__/SideNavigation.test.tsx.snap              | 1 +
 2 files changed, 7 insertions(+)

diff --git a/packages/react/src/components/sideNavigation/SideNavigation.tsx b/packages/react/src/components/sideNavigation/SideNavigation.tsx
index 799fbf7c31..f2dd0e814c 100644
--- a/packages/react/src/components/sideNavigation/SideNavigation.tsx
+++ b/packages/react/src/components/sideNavigation/SideNavigation.tsx
@@ -44,6 +44,10 @@ export type SideNavigationProps = React.PropsWithChildren<{
    * The id of the side navigation.
    */
   id: string;
+  /**
+   * aria-label for helping screen readers to distinguish SideNavigation from other navigational components
+   */
+  ariaLabel?: string;
   /**
    * Override or extend the styles applied to the component
    */
@@ -63,6 +67,7 @@ export const SideNavigation = ({
   className,
   defaultOpenMainLevels = [],
   id,
+  ariaLabel,
   style,
   theme,
   toggleButtonLabel,
@@ -126,6 +131,7 @@ export const SideNavigation = ({
       <nav
         className={classNames(styles.sideNavigation, customThemeClass, className)}
         id={id}
+        aria-label={ariaLabel}
         ref={container}
         style={style}
       >
diff --git a/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap
index 3369dea08c..fdcc95f457 100644
--- a/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap
+++ b/packages/react/src/components/sideNavigation/__snapshots__/SideNavigation.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`<SideNavigation /> spec renders the component 1`] = `
 <DocumentFragment>
   <nav
+    aria-label="Side navigation"
     class="sideNavigation"
     id="sideNavigation"
   >

From 6e02dd955474ea90a07b95dfbf0fb4fd335bbc3a Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Tue, 24 May 2022 12:23:39 +0300
Subject: [PATCH 3/9] Update documentations

---
 .../src/docs/components/navigation/accessibility.mdx     | 1 +
 new-site/src/docs/components/navigation/code.mdx         | 7 ++++---
 .../docs/components/side-navigation/accessibility.mdx    | 1 +
 new-site/src/docs/components/side-navigation/code.mdx    | 9 +++++----
 site/docs/components/navigation.mdx                      | 1 +
 site/docs/components/side_navigation.mdx                 | 1 +
 6 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/new-site/src/docs/components/navigation/accessibility.mdx b/new-site/src/docs/components/navigation/accessibility.mdx
index 88355f5329..cbbfbe564f 100644
--- a/new-site/src/docs/components/navigation/accessibility.mdx
+++ b/new-site/src/docs/components/navigation/accessibility.mdx
@@ -12,3 +12,4 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 ### Pay attention to
 - HDS Navigation is designed to support many different brand colours. When customising colours, refer to [colour guidelines](/foundation/design-tokens/colour "Colour") to ensure accessibility.
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
diff --git a/new-site/src/docs/components/navigation/code.mdx b/new-site/src/docs/components/navigation/code.mdx
index 5c7792e6d9..fd9b3bf2e7 100644
--- a/new-site/src/docs/components/navigation/code.mdx
+++ b/new-site/src/docs/components/navigation/code.mdx
@@ -143,9 +143,10 @@ Note! You can find the full list of properties in the <Link size="M" href="/stor
 | `titleUrl`               | URL to navigate to when the logo or title is clicked.                                      | `string`               | -             |
 [Table 1:Navigation properties]|
 
-| Property              | Description                                                                                | Values                                     | Default value |
-| --------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------ | ------------- |
-| `variant`             | Defines where the navigation row will be displayed.                                        | `"default"`, `"inline"`,                   | `"default"`   |
+| Property              | Description                                                                                                  | Values                                     | Default value |
+| --------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ------------- |
+| `variant`             | Defines where the navigation row will be displayed.                                                          | `"default"`, `"inline"`,                   | `"default"`   |
+| `ariaLabel`           | The aria-label for helping screen readers to distinguish navigation row from other navigational components   | `string`                                   | -             |
 [Table 2:NavigationRow properties]|
 
 | Property  | Description                                                                                          | Values                                        | Default value |
diff --git a/new-site/src/docs/components/side-navigation/accessibility.mdx b/new-site/src/docs/components/side-navigation/accessibility.mdx
index d3b8f48b0b..0860fdcced 100644
--- a/new-site/src/docs/components/side-navigation/accessibility.mdx
+++ b/new-site/src/docs/components/side-navigation/accessibility.mdx
@@ -12,3 +12,4 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 ### Pay attention to
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under the top-level. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
 - If you are using both the main (top) and the side navigation, it is a good practice to include an anchor link to the side navigation at the beginning of the main (top) navigation. This way assistive technologies can easily access the side navigation after a page load.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
diff --git a/new-site/src/docs/components/side-navigation/code.mdx b/new-site/src/docs/components/side-navigation/code.mdx
index 3013d72aa5..cc5f15ffa3 100644
--- a/new-site/src/docs/components/side-navigation/code.mdx
+++ b/new-site/src/docs/components/side-navigation/code.mdx
@@ -238,8 +238,9 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 Note! You can find the full list of properties in the <Link size="M" href="/storybook/react/?path=/docs/components-sidenavigation--default" external>React Storybook.</Link>
 
 
-| Property                | Description                                 | Values     | Default value |
-| ----------------------- | ------------------------------------------- | ---------- | ------------- |
-| `defaultOpenMainLevels` | Default value for open main levels.         | `number[]` | \[]           |
-| `toggleButtonLabel`     | The label for the mobile menu toggle button | `string`   | -             |
+| Property                | Description                                                                                                 | Values     | Default value |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ---------- | ------------- |
+| `defaultOpenMainLevels` | Default value for open main levels.                                                                         | `number[]` | \[]           |
+| `toggleButtonLabel`     | The label for the mobile menu toggle button                                                                 | `string`   | -             |
+| `ariaLabel`             | The aria-label for helping screen readers to distinguish navigation row from other navigational components  | `string`   | -             |
 [Table 1:SideNavigation properties]|
diff --git a/site/docs/components/navigation.mdx b/site/docs/components/navigation.mdx
index 866c8f8094..2bfae9a7d4 100644
--- a/site/docs/components/navigation.mdx
+++ b/site/docs/components/navigation.mdx
@@ -34,6 +34,7 @@ import LargeParagraph from "../../src/components/LargeParagraph";
 
 - HDS Navigation is designed to support many different brand colours. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility.
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
 
 ## Usage and variations
 
diff --git a/site/docs/components/side_navigation.mdx b/site/docs/components/side_navigation.mdx
index bafa5c16e6..944fc3e0b9 100644
--- a/site/docs/components/side_navigation.mdx
+++ b/site/docs/components/side_navigation.mdx
@@ -47,6 +47,7 @@ import Link from "../../src/components/Link";
 ## Accessibility
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under the top-level. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
 - If you are using both the main (top) and the side navigation, it is a good practice to include an anchor link to the side navigation at the beginning of the main (top) navigation. This way assistive technologies can easily access the side navigation after a page load.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
 
 ## Usage and variations
 

From b24c84c6167ed7986ffd7b691d7932a1c6911396 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Tue, 24 May 2022 12:24:54 +0300
Subject: [PATCH 4/9] Update SideNavigation story

---
 .../src/components/sideNavigation/SideNavigation.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx b/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
index 9ab15b665c..4cca52f3f1 100644
--- a/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
+++ b/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
@@ -48,7 +48,7 @@ export const Default = (args) => {
       </style>
       <div className="example-page">
         <div className="example-page-side-navigation">
-          <SideNavigation {...args}>
+          <SideNavigation ariaLabel="Side Navigation" {...args}>
             <SideNavigation.MainLevel id="main-level-link-1" label="Main level accordion">
               <SideNavigation.SubLevel
                 active={active === '/sub-level-1'}

From 7d9cf168fce7b5b2e2d2ee2d3060689321af9ad9 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Tue, 24 May 2022 15:18:31 +0300
Subject: [PATCH 5/9] Use new ariaLabel properties on new docsite

---
 new-site/src/components/layout.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/new-site/src/components/layout.js b/new-site/src/components/layout.js
index df65eeea20..5cb6ec58c7 100644
--- a/new-site/src/components/layout.js
+++ b/new-site/src/components/layout.js
@@ -191,7 +191,7 @@ const Layout = ({ children, pageContext }) => {
           skipTo={`#${contentId}`}
           skipToContentLabel="Skip to content"
         >
-          <Navigation.Row>
+          <Navigation.Row ariaLabel="Main navigation">
             {uiMenuLinks.map(({ name, link, uiId }) => (
               <Navigation.Item
                 active={withPrefix(currentMenuItem?.link || '') === withPrefix(link)}
@@ -210,6 +210,7 @@ const Layout = ({ children, pageContext }) => {
                 defaultOpenMainLevels={[...Array(uiSubMenuLinks.length).keys()]}
                 id="side-navigation"
                 toggleButtonLabel="Navigate to page"
+                ariaLabel="Side navigation"
               >
                 {uiSubMenuLinks.map(({ name, link, prefixedLink, uiId, withDivider, subLevels }) => {
                   const hasSubLevels = subLevels.length > 0;

From b63da34d2f03b4192ee36327e44303fdf55af221 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Wed, 25 May 2022 14:04:31 +0300
Subject: [PATCH 6/9] Fix docsite navigation aria-labels

---
 new-site/src/components/layout.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/new-site/src/components/layout.js b/new-site/src/components/layout.js
index 5cb6ec58c7..0a6606ad00 100644
--- a/new-site/src/components/layout.js
+++ b/new-site/src/components/layout.js
@@ -191,7 +191,7 @@ const Layout = ({ children, pageContext }) => {
           skipTo={`#${contentId}`}
           skipToContentLabel="Skip to content"
         >
-          <Navigation.Row ariaLabel="Main navigation">
+          <Navigation.Row ariaLabel="Site navigation">
             {uiMenuLinks.map(({ name, link, uiId }) => (
               <Navigation.Item
                 active={withPrefix(currentMenuItem?.link || '') === withPrefix(link)}
@@ -210,7 +210,7 @@ const Layout = ({ children, pageContext }) => {
                 defaultOpenMainLevels={[...Array(uiSubMenuLinks.length).keys()]}
                 id="side-navigation"
                 toggleButtonLabel="Navigate to page"
-                ariaLabel="Side navigation"
+                ariaLabel={`${currentMenuItem.name} pages navigation`}
               >
                 {uiSubMenuLinks.map(({ name, link, prefixedLink, uiId, withDivider, subLevels }) => {
                   const hasSubLevels = subLevels.length > 0;

From 8d2e74d6025719dbd45e05108bb66492c76feec5 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Wed, 25 May 2022 14:14:21 +0300
Subject: [PATCH 7/9] Fix documentation screen readers -> screen reader users

---
 .../src/docs/components/navigation/accessibility.mdx   |  2 +-
 new-site/src/docs/components/navigation/code.mdx       |  8 ++++----
 .../docs/components/side-navigation/accessibility.mdx  |  2 +-
 new-site/src/docs/components/side-navigation/code.mdx  | 10 +++++-----
 .../navigation/navigationRow/NavigationRow.tsx         |  2 +-
 .../src/components/sideNavigation/SideNavigation.tsx   |  2 +-
 site/docs/components/navigation.mdx                    |  2 +-
 site/docs/components/side_navigation.mdx               |  2 +-
 8 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/new-site/src/docs/components/navigation/accessibility.mdx b/new-site/src/docs/components/navigation/accessibility.mdx
index cbbfbe564f..5df047ef30 100644
--- a/new-site/src/docs/components/navigation/accessibility.mdx
+++ b/new-site/src/docs/components/navigation/accessibility.mdx
@@ -12,4 +12,4 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 ### Pay attention to
 - HDS Navigation is designed to support many different brand colours. When customising colours, refer to [colour guidelines](/foundation/design-tokens/colour "Colour") to ensure accessibility.
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
-- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen reader users to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
diff --git a/new-site/src/docs/components/navigation/code.mdx b/new-site/src/docs/components/navigation/code.mdx
index fd9b3bf2e7..8c55c9a9a3 100644
--- a/new-site/src/docs/components/navigation/code.mdx
+++ b/new-site/src/docs/components/navigation/code.mdx
@@ -143,10 +143,10 @@ Note! You can find the full list of properties in the <Link size="M" href="/stor
 | `titleUrl`               | URL to navigate to when the logo or title is clicked.                                      | `string`               | -             |
 [Table 1:Navigation properties]|
 
-| Property              | Description                                                                                                  | Values                                     | Default value |
-| --------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------ | ------------- |
-| `variant`             | Defines where the navigation row will be displayed.                                                          | `"default"`, `"inline"`,                   | `"default"`   |
-| `ariaLabel`           | The aria-label for helping screen readers to distinguish navigation row from other navigational components   | `string`                                   | -             |
+| Property              | Description                                                                                                       | Values                                     | Default value |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------- |
+| `variant`             | Defines where the navigation row will be displayed.                                                               | `"default"`, `"inline"`,                   | `"default"`   |
+| `ariaLabel`           | The aria-label for helping screen reader users to distinguish navigation row from other navigational components   | `string`                                   | -             |
 [Table 2:NavigationRow properties]|
 
 | Property  | Description                                                                                          | Values                                        | Default value |
diff --git a/new-site/src/docs/components/side-navigation/accessibility.mdx b/new-site/src/docs/components/side-navigation/accessibility.mdx
index 0860fdcced..aeb7aaf89b 100644
--- a/new-site/src/docs/components/side-navigation/accessibility.mdx
+++ b/new-site/src/docs/components/side-navigation/accessibility.mdx
@@ -12,4 +12,4 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 ### Pay attention to
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under the top-level. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
 - If you are using both the main (top) and the side navigation, it is a good practice to include an anchor link to the side navigation at the beginning of the main (top) navigation. This way assistive technologies can easily access the side navigation after a page load.
-- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen reader users to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
diff --git a/new-site/src/docs/components/side-navigation/code.mdx b/new-site/src/docs/components/side-navigation/code.mdx
index cc5f15ffa3..6306a3b0f1 100644
--- a/new-site/src/docs/components/side-navigation/code.mdx
+++ b/new-site/src/docs/components/side-navigation/code.mdx
@@ -238,9 +238,9 @@ export default ({ children, pageContext }) => <TabsLayout pageContext={pageConte
 Note! You can find the full list of properties in the <Link size="M" href="/storybook/react/?path=/docs/components-sidenavigation--default" external>React Storybook.</Link>
 
 
-| Property                | Description                                                                                                 | Values     | Default value |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------- | ---------- | ------------- |
-| `defaultOpenMainLevels` | Default value for open main levels.                                                                         | `number[]` | \[]           |
-| `toggleButtonLabel`     | The label for the mobile menu toggle button                                                                 | `string`   | -             |
-| `ariaLabel`             | The aria-label for helping screen readers to distinguish navigation row from other navigational components  | `string`   | -             |
+| Property                | Description                                                                                                      | Values     | Default value |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------- | ------------- |
+| `defaultOpenMainLevels` | Default value for open main levels.                                                                              | `number[]` | \[]           |
+| `toggleButtonLabel`     | The label for the mobile menu toggle button                                                                      | `string`   | -             |
+| `ariaLabel`             | The aria-label for helping screen reader users to distinguish navigation row from other navigational components  | `string`   | -             |
 [Table 1:SideNavigation properties]|
diff --git a/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx b/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
index 5ac33708c7..99b52de1f8 100644
--- a/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
+++ b/packages/react/src/components/navigation/navigationRow/NavigationRow.tsx
@@ -18,7 +18,7 @@ export type NavigationRowProps = React.PropsWithChildren<{
    */
   variant?: NavigationVariant;
   /**
-   * aria-label for helping screen readers to distinguish navigation row from other navigational components
+   * aria-label for helping screen reader users to distinguish navigation row from other navigational components
    */
   ariaLabel?: string;
 }>;
diff --git a/packages/react/src/components/sideNavigation/SideNavigation.tsx b/packages/react/src/components/sideNavigation/SideNavigation.tsx
index f2dd0e814c..1b2cac2611 100644
--- a/packages/react/src/components/sideNavigation/SideNavigation.tsx
+++ b/packages/react/src/components/sideNavigation/SideNavigation.tsx
@@ -45,7 +45,7 @@ export type SideNavigationProps = React.PropsWithChildren<{
    */
   id: string;
   /**
-   * aria-label for helping screen readers to distinguish SideNavigation from other navigational components
+   * aria-label for helping screen reader users to distinguish SideNavigation from other navigational components
    */
   ariaLabel?: string;
   /**
diff --git a/site/docs/components/navigation.mdx b/site/docs/components/navigation.mdx
index 2bfae9a7d4..7765ad435d 100644
--- a/site/docs/components/navigation.mdx
+++ b/site/docs/components/navigation.mdx
@@ -34,7 +34,7 @@ import LargeParagraph from "../../src/components/LargeParagraph";
 
 - HDS Navigation is designed to support many different brand colours. When customising colours, refer to [colour guidelines](/design-tokens/colour "Colour") to ensure accessibility.
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
-- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen reader users to distinguish them from each other. The NavigationRow component has an ariaLabel property for that purpose.
 
 ## Usage and variations
 
diff --git a/site/docs/components/side_navigation.mdx b/site/docs/components/side_navigation.mdx
index 944fc3e0b9..37ae174ef1 100644
--- a/site/docs/components/side_navigation.mdx
+++ b/site/docs/components/side_navigation.mdx
@@ -47,7 +47,7 @@ import Link from "../../src/components/Link";
 ## Accessibility
 - **When designing a menu link hierarchy, always think about keyboard and screen reader users.** First, make sure top-level menu labels are clear, and submenu items contextually fit under the top-level. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.
 - If you are using both the main (top) and the side navigation, it is a good practice to include an anchor link to the side navigation at the beginning of the main (top) navigation. This way assistive technologies can easily access the side navigation after a page load.
-- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen readers to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
+- If there are multiple navigational components on the page, they should have individual aria-labels. This helps screen reader users to distinguish them from each other. The SideNavigation component has an ariaLabel property for that purpose.
 
 ## Usage and variations
 

From 9cdb36726cf68c2d4561d5ee3fe3b1d9baa9862b Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Mon, 30 May 2022 10:26:33 +0300
Subject: [PATCH 8/9] Simplify documentation navigation aria-label

---
 new-site/src/components/layout.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-site/src/components/layout.js b/new-site/src/components/layout.js
index 0a6606ad00..8677e4dbcb 100644
--- a/new-site/src/components/layout.js
+++ b/new-site/src/components/layout.js
@@ -210,7 +210,7 @@ const Layout = ({ children, pageContext }) => {
                 defaultOpenMainLevels={[...Array(uiSubMenuLinks.length).keys()]}
                 id="side-navigation"
                 toggleButtonLabel="Navigate to page"
-                ariaLabel={`${currentMenuItem.name} pages navigation`}
+                ariaLabel={`${currentMenuItem.name}`}
               >
                 {uiSubMenuLinks.map(({ name, link, prefixedLink, uiId, withDivider, subLevels }) => {
                   const hasSubLevels = subLevels.length > 0;

From 51769d7a2125e5d3e4bfe272ff83d0f0f9077f19 Mon Sep 17 00:00:00 2001
From: Mika Nevalainen <mn.nevalainen@gmail.com>
Date: Mon, 30 May 2022 11:46:07 +0300
Subject: [PATCH 9/9] Update SideNavigation story

---
 .../src/components/sideNavigation/SideNavigation.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx b/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
index 4cca52f3f1..9e9af8100f 100644
--- a/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
+++ b/packages/react/src/components/sideNavigation/SideNavigation.stories.tsx
@@ -48,7 +48,7 @@ export const Default = (args) => {
       </style>
       <div className="example-page">
         <div className="example-page-side-navigation">
-          <SideNavigation ariaLabel="Side Navigation" {...args}>
+          <SideNavigation ariaLabel="Getting started" {...args}>
             <SideNavigation.MainLevel id="main-level-link-1" label="Main level accordion">
               <SideNavigation.SubLevel
                 active={active === '/sub-level-1'}