From 10037b44d659445b27f03982898fad66c81a95c3 Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <sangeetha9223@gmail.com>
Date: Fri, 2 Feb 2024 01:33:15 +0530
Subject: [PATCH] fix(dotcom-shell): accessibility issue with dotcom shell
 (#11114)

### Related Ticket(s)

Closes #9036

### Description

accessibility issue with dotcom shell.
Most of the items listed  in the issue are no longer showing.

### Changelog

**New**

- Added aria-label for Legal Navigation

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../src/components/footer/footer-composite.ts      | 13 +++++++++++--
 .../src/components/footer/legal-nav.ts             | 14 +++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
index 9e9982c0ea3..454d71259c2 100644
--- a/packages/web-components/src/components/footer/footer-composite.ts
+++ b/packages/web-components/src/components/footer/footer-composite.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -126,6 +126,12 @@ class C4DFooterComposite extends MediaQueryMixin(
   @property()
   buttonLabel?: string;
 
+  /**
+   * The aria-label to use for the legal-nav
+   */
+  @property()
+  navLabel?: string;
+
   /**
    * The clear button label for language selector.
    *
@@ -356,6 +362,7 @@ class C4DFooterComposite extends MediaQueryMixin(
       links,
       legalLinks,
       adjunctLinks,
+      navLabel,
     } = this;
     return html`
       <c4d-footer
@@ -397,7 +404,9 @@ class C4DFooterComposite extends MediaQueryMixin(
           ? this.renderLanguageSelector()
           : ``}
 
-        <c4d-legal-nav size="${ifDefined(size)}">
+        <c4d-legal-nav
+          size="${ifDefined(size)}"
+          navLabel="${ifDefined(navLabel)}">
           <c4d-footer-logo size="${ifDefined(size)}"></c4d-footer-logo>
           ${legalLinks?.map(
             ({ title, url, titleEnglish }) => html`
diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts
index 97040524f4b..5f04f7c327f 100644
--- a/packages/web-components/src/components/footer/legal-nav.ts
+++ b/packages/web-components/src/components/footer/legal-nav.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,6 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { FOOTER_SIZE } from './footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -30,7 +31,11 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
    */
   @property()
   size = FOOTER_SIZE.REGULAR;
-
+  /**
+   * Navigation label for accessibility.
+   */
+  @property()
+  navLabel = 'Legal Navigation';
   /**
    * The adjunct links container
    */
@@ -67,9 +72,12 @@ class C4DLegalNav extends StableSelectorMixin(LitElement) {
   }
 
   render() {
+    const { navLabel } = this;
     return this.size !== FOOTER_SIZE.MICRO
       ? html`
-          <nav class="${c4dPrefix}--legal-nav">
+          <nav
+            class="${c4dPrefix}--legal-nav"
+            aria-label="${ifDefined(navLabel)}">
             <div class="${this._getTypeClass()}">
               <ul>
                 <slot></slot>