From a0229b974cabbca8db366b998d3f2e63f483cf5f Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Mon, 26 Jul 2021 12:47:07 +0200
Subject: [PATCH] Improve sidebar accessibility by adding link labels

Indicate non-interactive status icons

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../core-components/src/components/Status/Status.tsx   |  6 ++++++
 packages/core-components/src/layout/Sidebar/Items.tsx  | 10 ++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx
index 3d79c38581..0b370a1397 100644
--- a/packages/core-components/src/components/Status/Status.tsx
+++ b/packages/core-components/src/components/Status/Status.tsx
@@ -69,6 +69,7 @@ export const StatusOK = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.ok)}
       aria-label="Status ok"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -80,6 +81,7 @@ export const StatusWarning = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.warning)}
       aria-label="Status warning"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -91,6 +93,7 @@ export const StatusError = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.error)}
       aria-label="Status error"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -102,6 +105,7 @@ export const StatusPending = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.pending)}
       aria-label="Status pending"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -113,6 +117,7 @@ export const StatusRunning = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.running)}
       aria-label="Status running"
+      aria-hidden="true"
       {...props}
     />
   );
@@ -124,6 +129,7 @@ export const StatusAborted = (props: PropsWithChildren<{}>) => {
     <span
       className={classNames(classes.status, classes.aborted)}
       aria-label="Status aborted"
+      aria-hidden="true"
       {...props}
     />
   );
diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 3944df0b50..1a7b4ebdb5 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -204,7 +204,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   if (isButtonItem(props)) {
     return (
-      <button {...childProps} ref={ref}>
+      <button aria-label={text ? text : props.to} {...childProps} ref={ref}>
         {content}
       </button>
     );
@@ -216,6 +216,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
       activeClassName={classes.selected}
       to={props.to}
       ref={ref}
+      aria-label={text ? text : props.to}
       {...navLinkProps}
     >
       {content}
@@ -261,7 +262,12 @@ export const SidebarSearchField = (props: SidebarSearchFieldProps) => {
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon} to={props.to} onClick={handleItemClick}>
+      <SidebarItem
+        icon={SearchIcon}
+        to={props.to}
+        onClick={handleItemClick}
+        text="Search"
+      >
         <TextField
           placeholder="Search"
           value={input}