From 98b90841be1d7112beb54c26acef8b177121796c Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Thu, 21 Jan 2021 08:33:01 -0800
Subject: [PATCH] fix(language-selector): added clear label attribute (#4914)

### Related Ticket(s)
#4889

### Description

The component now has the role of `edit combo` to ensure the screen readers convey its purpose to the users. The clear button also lacked a label to convey functionality upon click/enter.

### Changelog

**New**

- added clear button label property

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../footer/__stories__/footer.stories.ts       | 18 ++++++++++++++++--
 .../src/components/footer/footer-composite.ts  | 15 ++++++++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/footer/__stories__/footer.stories.ts b/packages/web-components/src/components/footer/__stories__/footer.stories.ts
index 87b8822001b..1739fc70b0c 100644
--- a/packages/web-components/src/components/footer/__stories__/footer.stories.ts
+++ b/packages/web-components/src/components/footer/__stories__/footer.stories.ts
@@ -21,8 +21,18 @@ import readme from './README.stories.mdx';
 import styles from './footer.stories.scss';
 
 export const base = ({ parameters }) => {
-  const { langDisplay, language, size, langList, legalLinks, links, localeList, languageSelectorLabel, selectedLanguage } =
-    parameters?.props?.FooterComposite ?? {};
+  const {
+    langDisplay,
+    language,
+    size,
+    langList,
+    legalLinks,
+    links,
+    localeList,
+    clearSelectionLabel,
+    languageSelectorLabel,
+    selectedLanguage,
+  } = parameters?.props?.FooterComposite ?? {};
   const { useMock } = parameters?.props?.Other ?? {};
 
   return html`
@@ -40,6 +50,7 @@ export const base = ({ parameters }) => {
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
             language-selector-label="${ifNonNull(languageSelectorLabel)}"
+            clear-selection-label="${ifNonNull(clearSelectionLabel)}"
             selected-language="${ifNonNull(selectedLanguage)}"
           >
           </dds-footer-composite>
@@ -54,6 +65,7 @@ export const base = ({ parameters }) => {
             .links="${ifNonNull(links)}"
             .localeList="${ifNonNull(localeList)}"
             language-selector-label="${ifNonNull(languageSelectorLabel)}"
+            clear-selection-label="${ifNonNull(clearSelectionLabel)}"
             selected-language="${ifNonNull(selectedLanguage)}"
           >
           </dds-footer-container>
@@ -77,6 +89,7 @@ export const defaultLanguageOnly = ({ parameters }) => {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.REGULAR,
     languageSelectorLabel: 'Choose a language',
+    clearSelectionLabel: 'Clear language selection',
     selectedLanguage: 'English',
     langList: mockLangList,
   };
@@ -99,6 +112,7 @@ export const shortDefaultLanguageOnly = ({ parameters }) => {
     ...(props.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
     languageSelectorLabel: 'Choose a language',
+    clearSelectionLabel: 'Clear language selection',
     selectedLanguage: 'English',
     langList: mockLangList,
   };
diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
index 689955d8048..0d2c98cca46 100644
--- a/packages/web-components/src/components/footer/footer-composite.ts
+++ b/packages/web-components/src/components/footer/footer-composite.ts
@@ -101,6 +101,14 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   @property()
   buttonLabel?: string;
 
+  /**
+   * The clear button label for language selector.
+   *
+   * @internal
+   */
+  @property({ attribute: 'clear-selection-label' })
+  clearSelectionLabel?: string;
+
   /**
    * The g11n collator to use for sorting contry names.
    */
@@ -229,6 +237,7 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
   renderLightDOM() {
     const {
       buttonLabel,
+      clearSelectionLabel,
       disableLocaleButton,
       langDisplay,
       langList,
@@ -262,7 +271,11 @@ class DDSFooterComposite extends ModalRenderMixin(HybridRenderMixin(HostListener
               >
             `
           : html`
-              <dds-language-selector-desktop trigger-content="${languageSelectorLabel}" value="${selectedLanguage}">
+              <dds-language-selector-desktop
+                trigger-content="${languageSelectorLabel}"
+                value="${selectedLanguage}"
+                clear-selection-label="${clearSelectionLabel}"
+              >
                 ${langList?.map(
                   language => html`
                     <bx-combo-box-item value="${ifNonNull(language)}">${ifNonNull(language)}</bx-combo-box-item>