fix: allow rendered anchors to be aria-hidden

adobe · May 7, 2021 · 2e9aa23 · 2e9aa23
1 parent fb52cea
commit 2e9aa23
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
@@ -122,6 +122,7 @@ export class ButtonBase extends LikeAnchor(
             ${this.buttonContent}
             ${super.renderAnchor({
                 id: 'button',
+                ariaHidden: true,
                 className: 'button anchor hidden',
             })}
         `;

diff --git a/packages/shared/src/like-anchor.ts b/packages/shared/src/like-anchor.ts
@@ -23,17 +23,20 @@ type Constructor<T = Record<string, unknown>> = {
     prototype: T;
 };
 
+type RenderAnchorOptions = {
+    id: string;
+    className?: string;
+    ariaHidden?: boolean;
+    anchorContent?: TemplateResult | TemplateResult[];
+};
+
 export interface LikeAnchorInterface {
     download?: string;
     label?: string;
     href?: string;
     rel?: string;
     target?: '_blank' | '_parent' | '_self' | '_top';
-    renderAnchor(options: {
-        id: string;
-        className?: string;
-        anchorContent?: TemplateResult | TemplateResult[];
-    }): TemplateResult;
+    renderAnchor(options: RenderAnchorOptions): TemplateResult;
 }
 
 export function LikeAnchor<T extends Constructor<UpdatingElement>>(
@@ -58,13 +61,10 @@ export function LikeAnchor<T extends Constructor<UpdatingElement>>(
         public renderAnchor({
             id,
             className,
+            ariaHidden,
             // prettier-ignore
-            anchorContent = html`<slot></slot>`
-        }: {
-            id: string;
-            className?: string;
-            anchorContent: TemplateResult | TemplateResult[];
-        }): TemplateResult {
+            anchorContent = html`<slot></slot>`,
+        }: RenderAnchorOptions): TemplateResult {
             // prettier-ignore
             return html
                 `<a
@@ -74,6 +74,7 @@ export function LikeAnchor<T extends Constructor<UpdatingElement>>(
                     download=${ifDefined(this.download)}
                     target=${ifDefined(this.target)}
                     aria-label=${ifDefined(this.label)}
+                    aria-hidden=${ifDefined(ariaHidden ? 'true' : undefined)}
                     rel=${ifDefined(this.rel)}
                 >${anchorContent}</a>`;
         }