TabHeader component accessibility improvements (#2654)

* refactor: component accessibility improvements * style: active, focus & hover state font color * style: use explicitly h4 selector for hover, focus and active link styles
commercetools · Jun 27, 2022 · f3cc395 · f3cc395 · github-actions · Jun 27, 2022
1 parent 8769e72
commit f3cc395
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git a/.changeset/dry-planes-fry.md b/.changeset/dry-planes-fry.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Accessibility improvements of the `TabHeader` component.
diff --git a/packages/application-components/src/components/tab-header/tab-header.tsx b/packages/application-components/src/components/tab-header/tab-header.tsx
@@ -19,10 +19,6 @@ const warnIfMissingContent = (props: TTabHeaderProps) => {
   );
 };
 
-const getDisabledTabHeaderAriaAttributes = (
-  isDisabled: TTabHeaderProps['isDisabled']
-) => (isDisabled ? { 'aria-disabled': true } : {});
-
 const getDisabledLinkAtributes = (isDisabled: TTabHeaderProps['isDisabled']) =>
   isDisabled ? { tabIndex: -1, 'aria-disabled': true } : {};
 
@@ -84,20 +80,16 @@ export const TabHeader = (props: TTabHeaderProps) => {
 
   return (
     <Link
+      role="tab"
+      aria-selected={isActive}
       to={props.to}
       css={getLinkStyles(isActive, isDisabled)}
       {...getDisabledLinkAtributes(isDisabled)}
       {...dataAttributeProps}
     >
-      <div
-        role="tab"
-        aria-selected={isActive}
-        {...getDisabledTabHeaderAriaAttributes(isDisabled)}
-      >
-        <Text.Subheadline as="h4" truncate={true}>
-          {label}
-        </Text.Subheadline>
-      </div>
+      <Text.Subheadline as="h4" truncate={true}>
+        {label}
+      </Text.Subheadline>
     </Link>
   );
 };

diff --git a/packages/application-components/src/components/tab-header/tab.styles.ts b/packages/application-components/src/components/tab-header/tab.styles.ts
@@ -42,7 +42,7 @@ export const getLinkStyles = (
   isActive &&
     css`
       ${getBottomBorderStyles(customProperties.colorPrimary)}
-      > * > * {
+      & h4 {
         color: ${customProperties.colorPrimary} !important;
       }
     `,
@@ -63,7 +63,7 @@ export const getLinkStyles = (
       :hover,
       :focus,
       :active {
-        > * > * {
+        & h4 {
           color: ${customProperties.colorPrimary} !important;
         }
       }