From 51daf3efaeb7709e6ed711c787cbb9929f45d908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tao=20Bojl=C3=A9n?=
 <2803708-tao_oat@users.noreply.gitlab.com>
Date: Tue, 21 Apr 2020 20:31:29 +0100
Subject: [PATCH] accessibility improvements

---
 CHANGELOG.md                                           | 1 +
 frontend/src/components/atoms/GraphHideEdgesButton.tsx | 2 +-
 frontend/src/components/atoms/GraphKey.tsx             | 9 ++++++++-
 frontend/src/components/atoms/GraphResetButton.tsx     | 2 +-
 frontend/src/components/organisms/Graph.tsx            | 2 +-
 frontend/src/components/screens/InstanceScreen.tsx     | 2 +-
 frontend/src/components/screens/SearchScreen.tsx       | 5 ++++-
 7 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 678f535..cef9dba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Bring back `develop` staging backup (now managed in DNS)
 - Increase default number of concurrent crawlers to 100
+- Accessibility improvements (according to axe review)
 
 ### Deprecated
 
diff --git a/frontend/src/components/atoms/GraphHideEdgesButton.tsx b/frontend/src/components/atoms/GraphHideEdgesButton.tsx
index c566e4e..f901b44 100644
--- a/frontend/src/components/atoms/GraphHideEdgesButton.tsx
+++ b/frontend/src/components/atoms/GraphHideEdgesButton.tsx
@@ -13,7 +13,7 @@ interface IGraphHideEdgesButtonProps {
 }
 const GraphHideEdgesButton: React.FC<IGraphHideEdgesButtonProps> = ({ isShowingEdges, toggleEdges }) => (
   <FloatingCard>
-    <StyledSwitch checked={isShowingEdges} label="Show connections" onChange={toggleEdges} />
+    <StyledSwitch checked={isShowingEdges} label="Show connections" onChange={toggleEdges} tabIndex={-1} />
   </FloatingCard>
 );
 export default GraphHideEdgesButton;
diff --git a/frontend/src/components/atoms/GraphKey.tsx b/frontend/src/components/atoms/GraphKey.tsx
index b290924..10d15f0 100644
--- a/frontend/src/components/atoms/GraphKey.tsx
+++ b/frontend/src/components/atoms/GraphKey.tsx
@@ -74,8 +74,15 @@ const GraphKey: React.FC<IGraphKeyProps> = ({ current, colorSchemes, ranges, onI
           text={(current && current.name) || "Select..."}
           icon={IconNames.TINT}
           rightIcon={IconNames.CARET_DOWN}
+          tabIndex={-1}
+        />
+        <Button
+          icon={IconNames.SMALL_CROSS}
+          minimal={true}
+          onClick={unsetColorScheme}
+          disabled={!current}
+          tabIndex={-1}
         />
-        <Button icon={IconNames.SMALL_CROSS} minimal={true} onClick={unsetColorScheme} disabled={!current} />
       </ColorSchemeSelect>
       <br />
       {!!current && !!key && (
diff --git a/frontend/src/components/atoms/GraphResetButton.tsx b/frontend/src/components/atoms/GraphResetButton.tsx
index dfcbd38..cbf6a32 100644
--- a/frontend/src/components/atoms/GraphResetButton.tsx
+++ b/frontend/src/components/atoms/GraphResetButton.tsx
@@ -7,7 +7,7 @@ interface IGraphResetButtonProps {
 }
 const GraphResetButton: React.FC<IGraphResetButtonProps> = ({ onClick }) => (
   <FloatingCard>
-    <Button icon="compass" title="Reset graph view" onClick={onClick} />
+    <Button icon="compass" title="Reset graph view" onClick={onClick} tabIndex={-1} />
   </FloatingCard>
 );
 export default GraphResetButton;
diff --git a/frontend/src/components/organisms/Graph.tsx b/frontend/src/components/organisms/Graph.tsx
index 5adc715..aae286c 100644
--- a/frontend/src/components/organisms/Graph.tsx
+++ b/frontend/src/components/organisms/Graph.tsx
@@ -76,7 +76,7 @@ class GraphImpl extends React.PureComponent<IGraphProps, IGraphState> {
       );
     }
 
-    return <GraphDiv>{content}</GraphDiv>;
+    return <GraphDiv aria-hidden={true}>{content}</GraphDiv>;
   }
 
   private loadGraph = () => {
diff --git a/frontend/src/components/screens/InstanceScreen.tsx b/frontend/src/components/screens/InstanceScreen.tsx
index b493ecb..0991faf 100644
--- a/frontend/src/components/screens/InstanceScreen.tsx
+++ b/frontend/src/components/screens/InstanceScreen.tsx
@@ -250,7 +250,7 @@ class InstanceScreenImpl extends React.PureComponent<IInstanceScreenProps, IInst
       return;
     }
     return (
-      <StyledGraphContainer>
+      <StyledGraphContainer aria-hidden={true}>
         <Cytoscape
           elements={localGraph!}
           currentNodeId={this.props.instanceName}
diff --git a/frontend/src/components/screens/SearchScreen.tsx b/frontend/src/components/screens/SearchScreen.tsx
index 7741a6f..964406b 100644
--- a/frontend/src/components/screens/SearchScreen.tsx
+++ b/frontend/src/components/screens/SearchScreen.tsx
@@ -104,7 +104,9 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
     if (isLoadingResults) {
       rightSearchBarElement = <Spinner size={Spinner.SIZE_SMALL} />;
     } else if (query || error) {
-      rightSearchBarElement = <Button minimal={true} icon={IconNames.CROSS} onClick={this.clearQuery} />;
+      rightSearchBarElement = (
+        <Button minimal={true} icon={IconNames.CROSS} onClick={this.clearQuery} aria-label="Search" />
+      );
     } else {
       rightSearchBarElement = (
         <Button
@@ -127,6 +129,7 @@ class SearchScreen extends React.PureComponent<ISearchScreenProps, ISearchScreen
             rightElement={rightSearchBarElement}
             large={true}
             placeholder="Search instance names and descriptions"
+            aria-label="Search instance names and descriptions"
             type="search"
             value={this.state.currentQuery}
             onChange={this.handleInputChange}