Improve a11y (#1841)

Improve accessibility by removing unnecessary tags without hrefs. Also remove many eslint errors and warnings.

scm-ui/ui-components/src/navigation/MenuContext.tsx

@@ -33,7 +33,7 @@ export const MenuContext = React.createContext<MenuContext>({
   isCollapsed() {
     return false;
   },
-  setCollapsed() {}
+  setCollapsed() {},
 });
 
 export const StateMenuContextProvider: FC = ({ children }) => {
@@ -43,7 +43,7 @@ export const StateMenuContextProvider: FC = ({ children }) => {
     isCollapsed() {
       return collapsed;
     },
-    setCollapsed
+    setCollapsed,
   };
 
   return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;

scm-ui/ui-components/src/navigation/NavAction.tsx

@@ -39,17 +39,17 @@ class NavAction extends React.Component<Props> {
     if (icon) {
       showIcon = (
         <>
-          <i className={icon}></i>{" "}
+          <i className={icon} />{" "}
         </>
       );
     }
 
     return (
       <li>
-        <a onClick={action} href="javascript:void(0);">
+        <button onClick={action}>
           {showIcon}
           {label}
-        </a>
+        </button>
       </li>
     );
   }

scm-ui/ui-components/src/navigation/SecondaryNavigation.stories.tsx

@@ -53,8 +53,8 @@ const withRoute = (route: string) => {
 };
 
 storiesOf("Secondary Navigation", module)
-  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
-  .addDecorator(story => (
+  .addDecorator((story) => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
+  .addDecorator((story) => (
     <Columns className="columns">
       <div className="column is-3">{story()}</div>
     </Columns>
@@ -92,7 +92,7 @@ storiesOf("Secondary Navigation", module)
       <SecondaryNavigation label="Hitchhiker">
         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
         <SecondaryNavigationItem
-          activeWhenMatch={route => route.location.pathname === "/hog"}
+          activeWhenMatch={(route) => route.location.pathname === "/hog"}
           to="/heart-of-gold"
           icon="fas fa-star"
           label="Heart Of Gold"

scm-ui/ui-components/src/navigation/SubNavigation.tsx

@@ -44,7 +44,7 @@ const SubNavigation: FC<Props> = ({
   title,
   label,
   children,
-  testId
+  testId,
 }) => {
   const context = useMenuContext();
   const collapsed = context.isCollapsed();
@@ -56,7 +56,7 @@ const SubNavigation: FC<Props> = ({
   const active = useActiveMatch({
     to: parent,
     activeOnlyWhenExact,
-    activeWhenMatch
+    activeWhenMatch,
   });
 
   let defaultIcon = "fas fa-cog";