accessibility improvements

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
 

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;

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 && (

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;

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 = () => {

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}

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}