chore(helpers): ignore specific attributes with inheritAriaAttributes (#26080)

core/src/utils/helpers.spec.ts

@@ -0,0 +1,42 @@
+import { inheritAriaAttributes } from './helpers';
+
+describe('inheritAriaAttributes', () => {
+  it('should inherit aria attributes', () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('aria-label', 'parent');
+    parent.setAttribute('aria-hidden', 'true');
+    parent.setAttribute('role', 'button');
+
+    const inheritedAriaAttributes = inheritAriaAttributes(parent);
+
+    expect(inheritedAriaAttributes).toEqual({
+      'aria-label': 'parent',
+      'aria-hidden': 'true',
+      role: 'button',
+    });
+  });
+
+  it('should not inherit non-aria attributes', () => {
+    const parent = document.createElement('button');
+    parent.setAttribute('type', 'submit');
+
+    const inheritedAriaAttributes = inheritAriaAttributes(parent);
+
+    expect(inheritedAriaAttributes).toEqual({});
+  });
+
+  it('attributes that are ignored should not be returned', () => {
+    const parent = document.createElement('div');
+    parent.setAttribute('aria-label', 'parent');
+    parent.setAttribute('aria-hidden', 'true');
+    parent.setAttribute('role', 'button');
+
+    const ignoreList = ['aria-hidden'];
+    const inheritedAriaAttributes = inheritAriaAttributes(parent, ignoreList);
+
+    expect(inheritedAriaAttributes).toEqual({
+      'aria-label': 'parent',
+      role: 'button',
+    });
+  });
+});

core/src/utils/helpers.ts

@@ -167,9 +167,15 @@ const ariaAttributes = [
  * Returns an array of aria attributes that should be copied from
  * the shadow host element to a target within the light DOM.
  * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
  */
-export const inheritAriaAttributes = (el: HTMLElement) => {
+export const inheritAriaAttributes = (el: HTMLElement, ignoreList?: string[]) => {
-  return inheritAttributes(el, ariaAttributes);
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes(el, attributesToInherit);
 };
 
 export const addEventListener = (el: any, eventName: string, callback: any, opts?: any) => {