feat(a11ly): ➜ Pass aria atts and tabindex to link

alleyinteractive · Jul 6, 2021 · 090e78f · 090e78f
1 parent 1c35d6d
commit 090e78f
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/styled-components/components/link/index.jsx b/packages/styled-components/components/link/index.jsx
@@ -39,6 +39,7 @@ const Link = (props) => {
     rel,
     target,
     theme,
+    tabIndex,
   } = props;
   const {
     onClick: defaultOnClick,
@@ -71,15 +72,18 @@ const Link = (props) => {
   };
 
   const ariaProps = Object.keys(props).reduce((acc, propName) => {
-    if (!propName.includes('aria')) {
+    if (!propName.startsWith('aria')) {
       return acc;
     }
 
+    // Convert aria values to kebab case as camelCase aria key do not work.
+    const kebabAria = `aria-${propName.replace('aria', '').toLocaleLowerCase()}`;
+
     return {
       ...acc,
-      [propName]: props[propName],
+      [kebabAria]: props[propName],
     };
-  });
+  }, {});
 
   return (
     <LinkWrapper
@@ -89,6 +93,7 @@ const Link = (props) => {
       onClick={handleClick}
       rel={rel}
       target={target}
+      tabIndex={tabIndex}
     >
       {children}
     </LinkWrapper>