From f3cc395d1e29e25f694345c03a7b6376b2d88d20 Mon Sep 17 00:00:00 2001
From: kark <49066275+kark@users.noreply.github.com>
Date: Mon, 27 Jun 2022 09:04:01 +0200
Subject: [PATCH] `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
---
 .changeset/dry-planes-fry.md                   |  5 +++++
 .../src/components/tab-header/tab-header.tsx   | 18 +++++-------------
 .../src/components/tab-header/tab.styles.ts    |  4 ++--
 3 files changed, 12 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/dry-planes-fry.md

diff --git a/.changeset/dry-planes-fry.md b/.changeset/dry-planes-fry.md
new file mode 100644
index 0000000000..41ec25b475
--- /dev/null
+++ 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
index 4d1d64bc1a..85a826aeea 100644
--- 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
index 324eb5d2c0..2af12417e9 100644
--- 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;
         }
       }