10921: add aria-label to anchor tags inside bx-tabs for accessbility (#…

…11047)

### Related Ticket(s)

Closes #10921 

### Description

This PR adds `aria-label` to the <a> tags inside of `bx-tab` component. Since the text inside the <a> tags is in a slot in the shadow dom, the links are being flagged for not having meaningful text. This PR fixes that. 

### Changelog

**Changed**

- Adds `aria-label` with the link text to <a> tags inside bx-tab component.

### Steps for testing
1. Navigate to [Tabs in Carbon Web Components](https://carbon-web-components.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/11047/index.html?path=/story/components-tabs--default).
2. Click Open Canvas in New Tab box in upper left. 
3. Have IBM Equal Access Accessibility checker installed as Chrome extension. Scan the page.
4. Note the lack of the original accessibility fail ("Interactive component with ARIA role 'tab' does not have a programmatically associated name").
5. Compare by following the same steps at [Carbon Web Components v1 storybook](https://web-components-v1.carbondesignsystem.com/?path=/story/components-tabs--default).

<!-- 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) -->

packages/carbon-web-components/src/components/tabs/tab.ts

@@ -38,6 +38,21 @@ class BXTab extends BXContentSwitcherItem {
   @property({ reflect: true })
   type = TABS_TYPE.REGULAR;
 
+  /**
+   * The tab text content.
+   */
+  @property()
+  tabTitle;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    // Retrieve content of the slot to use for aria-label.
+    let content = (target as HTMLSlotElement).assignedNodes();
+    this.tabTitle = content[0].textContent;
+  }
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -46,16 +61,22 @@ class BXTab extends BXContentSwitcherItem {
   }
 
   render() {
-    const { disabled, selected } = this;
+    const {
+      disabled,
+      selected,
+      tabTitle,
+      _handleSlotChange: handleSlotChange,
+    } = this;
     // No `href`/`tabindex` to not to make this `<a>` click-focusable
     return html`
       <a
         class="${prefix}--tabs__nav-link"
         role="tab"
+        aria-label="${tabTitle}"
         tabindex="${disabled ? -1 : 0}"
         ?disabled="${disabled}"
         aria-selected="${Boolean(selected)}">
-        <slot></slot>
+        <slot @slotchange="${handleSlotChange}"></slot>
       </a>
     `;
   }