chore: use data-aria-label instead to avoid audit conflicts

tyler-technologies-oss · Jun 12, 2024 · c9057bd · c9057bd
1 parent 1349f46
commit c9057bd
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/src/lib/tabs/tab-bar/tab-bar-adapter.ts b/src/lib/tabs/tab-bar/tab-bar-adapter.ts
@@ -57,8 +57,8 @@ export class TabBarAdapter extends BaseAdapter<ITabBarComponent> implements ITab
   }
 
   public initialize(): void {
-    this._forwardObserver = forwardAttributes(this._component, TAB_BAR_CONSTANTS.forwardedAttributes, (name, value) => {
-      toggleAttribute(this._scrollContainer, !!value, name, value ?? undefined);
+    this._forwardObserver = forwardAttributes(this._component, Object.keys(TAB_BAR_CONSTANTS.forwardedAttributes), (name, value) => {
+      toggleAttribute(this._scrollContainer, !!value, TAB_BAR_CONSTANTS.forwardedAttributes[name], value ?? undefined);
     });
   }
 

diff --git a/src/lib/tabs/tab-bar/tab-bar-constants.ts b/src/lib/tabs/tab-bar/tab-bar-constants.ts
@@ -18,7 +18,9 @@ const attributes = {
   ...observedAttributes
 };
 
-const forwardedAttributes = ['aria-label'];
+const forwardedAttributes = {
+  'data-aria-label': 'aria-label'
+};
 
 const selectors = {
   ROOT: '.forge-tab-bar',

diff --git a/src/lib/tabs/tab-bar/tab-bar.ts b/src/lib/tabs/tab-bar/tab-bar.ts
@@ -65,6 +65,7 @@ declare global {
  * @attribute {boolean} [secondary=false] - Controls whether the tabs are styled as secondary tab navigation.
  * @attribute {boolean} [auto-activate=false] - Controls whether the tabs are automatically activated when receiving focus.
  * @attribute {boolean} [scroll-buttons=false] - Controls whether scroll buttons are displayed when the tabs overflow their container.
+ * @attribute {string} [data-aria-label] - The ARIA label to forward to the internal tablist element.
  *
  * @event {CustomEvent<ITabBarChangeEventData>} forge-tab-bar-change - Dispatches when the active tab changes.
  *

diff --git a/src/lib/tabs/tabs.test.ts b/src/lib/tabs/tabs.test.ts
@@ -30,7 +30,7 @@ describe('Tabs', () => {
 
     expect(scrollContainerEl.hasAttribute('aria-label')).to.be.false;
 
-    el.setAttribute('aria-label', 'Test');
+    el.setAttribute('data-aria-label', 'Test');
     await elementUpdated(el);
 
     expect(scrollContainerEl.getAttribute('aria-label')).to.equal('Test');

diff --git a/src/stories/components/tabs/Tabs.stories.ts b/src/stories/components/tabs/Tabs.stories.ts
@@ -39,6 +39,7 @@ const meta = {
 
     return html`
       <forge-tab-bar
+        data-aria-label="Demo tabs"
         .disabled=${args.disabled}
         .activeTab=${args.activeTab}
         .vertical=${args.vertical}