keyboard navigation: feature/focus states (#589)

* prototype focus styling for header elements

* use custom dropdown wrapper to keep stylesheets dry

* focus style on AICS logo button

* updated focus and hover stylings for header buttons and dropdown items

* remove commented code

* remove unused imports

* remove narrow property on CustomDropdown to style with fit-content

* use focus-visible selector for keyboard navigation styling in stead of :focus

* unused import

src/components/CustomDropdown/index.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode } from "react";
+import { Dropdown, DropDownProps, MenuProps } from "antd";
+import { ButtonClass } from "../../constants/interfaces";
+import NavButton from "../NavButton";
+
+import styles from "./style.css";
+
+interface CustomDropdownProps {
+    items: MenuProps["items"];
+    titleText: string;
+    icon: ReactNode;
+    buttonType: ButtonClass;
+    placement?: DropDownProps["placement"];
+    disabled?: boolean;
+}
+
+const CustomDropdown: React.FC<CustomDropdownProps> = ({
+    items,
+    titleText,
+    icon,
+    buttonType,
+    placement,
+    disabled,
+}) => {
+    return (
+        <Dropdown
+            menu={{ items, theme: "dark", className: styles.menu }}
+            placement={placement}
+            disabled={disabled}
+        >
+            <NavButton
+                titleText={titleText}
+                icon={icon}
+                buttonType={buttonType}
+            />
+        </Dropdown>
+    );
+};
+
+export default CustomDropdown;

src/components/CustomDropdown/style.css

@@ -0,0 +1,44 @@
+.menu {
+    width: fit-content;
+    background-color: var(--dark-theme-dropdown-menu-bg);
+    border-radius: 3px;
+    padding: 8px;
+}
+
+.menu svg {
+    fill: var(--dark-theme-menu-text-color);
+}
+
+.menu :global(.ant-dropdown-menu-item),
+.menu :global(.ant-dropdown-menu-submenu) {
+    border: 2px solid var(--dark-theme-dropdown-menu-item-bg);
+    border-radius: 4px;
+    height: 32px;
+}
+
+.menu :global(.ant-dropdown-menu-item) :global(.ant-btn) {
+    color: var(--dark-theme-dropdown-menu-item-color);
+    padding: 0px;
+}
+
+.menu :global(.ant-dropdown-menu-item):hover,
+.menu :global(.ant-dropdown-menu-submenu):hover {
+    background-color: var(--dark-theme-dropdown-menu-item-hover-bg);
+}
+
+.menu :global(.ant-dropdown-menu-item):hover *,
+.menu :global(.ant-dropdown-menu-submenu):hover * {
+    color: var(--dark-theme-dropdown-menu-item-hover-color);
+    fill: var(--dark-theme-dropdown-menu-item-hover-color);
+}
+
+.menu :global(.ant-dropdown-menu-item):focus-within,
+.menu :global(.ant-dropdown-menu-submenu):focus-within {
+    z-index: 1000;
+    background-color: var(--dark-theme-dropdown-menu-item-focus-bg);
+    outline: 1px solid var(--dark-theme-dropdown-menu-item-focus-outline);
+}
+
+.menu :global(.ant-dropdown-menu-item) *:focus-visible {
+    color: var(--dark-theme-dropdown-menu-item-focus-color);
+}

src/components/HelpMenu/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useLocation, Link } from "react-router-dom";
-import { Dropdown, MenuProps } from "antd";
+import { MenuProps } from "antd";
 
 import { TUTORIAL_PATHNAME } from "../../routes";
 import {
@@ -13,8 +13,7 @@ import { ButtonClass } from "../../constants/interfaces";
 import { DownArrow } from "../Icons";
 import VersionModal from "../VersionModal";
 import NavButton from "../NavButton";
-
-import styles from "./style.css";
+import CustomDropdown from "../CustomDropdown";
 
 const HelpMenu = (): JSX.Element => {
     const [modalVisible, setModalVisible] = React.useState(false);
@@ -57,7 +56,6 @@ const HelpMenu = (): JSX.Element => {
         {
             key: "submit-issue",
             label: "Submit issue",
-            popupClassName: styles.submenu,
             popupOffset: [-0.45, -4],
             children: [
                 {
@@ -89,26 +87,25 @@ const HelpMenu = (): JSX.Element => {
         {
             key: "version",
             label: (
-                <a
-                    onClick={() => {
+                <NavButton
+                    titleText={"Version info"}
+                    clickHandler={() => {
                         setModalVisible(!modalVisible);
                     }}
-                >
-                    Version info
-                </a>
+                    buttonType={ButtonClass.DropdownItem}
+                />
             ),
         },
     ];
 
     return (
         <>
-            <Dropdown menu={{ items, theme: "dark", className: styles.menu }}>
-                <NavButton
-                    titleText={"Help "}
-                    icon={DownArrow}
-                    buttonType={ButtonClass.Secondary}
-                />
-            </Dropdown>
+            <CustomDropdown
+                items={items}
+                titleText={"Help"}
+                icon={DownArrow}
+                buttonType={ButtonClass.Secondary}
+            />
             {modalVisible && <VersionModal setModalVisible={setModalVisible} />}
         </>
     );

src/components/LoadFileMenu/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link, useLocation, useHistory } from "react-router-dom";
 import { ActionCreator } from "redux";
-import { Dropdown, Button, MenuProps } from "antd";
+import { MenuProps } from "antd";
 
 import TRAJECTORIES from "../../constants/networked-trajectories";
 import { URL_PARAM_KEY_FILE_NAME } from "../../constants";
@@ -21,8 +21,7 @@ import { VIEWER_PATHNAME } from "../../routes";
 import { DownArrow } from "../Icons";
 import FileUploadModal from "../FileUploadModal";
 import NavButton from "../NavButton";
-
-import styles from "./style.css";
+import CustomDropdown from "../CustomDropdown";
 
 interface LoadFileMenuProps {
     isBuffering: boolean;
@@ -73,7 +72,6 @@ const LoadFileMenu = ({
         {
             key: "from-examples",
             label: "Example models",
-            popupClassName: styles.submenu,
             popupOffset: [-0.45, -4],
             children: TRAJECTORIES.map((trajectory) => ({
                 key: trajectory.id,
@@ -94,9 +92,11 @@ const LoadFileMenu = ({
         {
             key: "file-upload",
             label: (
-                <Button type="ghost" onClick={showModal}>
-                    Simularium file
-                </Button>
+                <NavButton
+                    titleText={"Simularium file"}
+                    clickHandler={showModal}
+                    buttonType={ButtonClass.DropdownItem}
+                />
             ),
         },
         {
@@ -117,18 +117,14 @@ const LoadFileMenu = ({
 
     return (
         <>
-            <Dropdown
-                menu={{ items, theme: "dark", className: styles.menu }}
+            <CustomDropdown
+                items={items}
+                titleText={"Load model"}
+                icon={DownArrow}
+                buttonType={ButtonClass.Primary}
                 placement="bottomRight"
                 disabled={isDisabled}
-            >
-                <NavButton
-                    titleText={"Load model"}
-                    icon={DownArrow}
-                    buttonType={ButtonClass.Primary}
-                    isDisabled={isDisabled}
-                />
-            </Dropdown>
+            />
             {/* 
                 Conditionally rendering the modal this way instead of as a `visible` prop
                 forces it to re-render every time it is opened, resetting the form inside.

src/components/NavButton/style.css

@@ -6,14 +6,18 @@
     background-color: var(--dark-theme-action-button-bg);
     border: none;
     color: var(--dark-theme-action-button-color);
-    padding: 0px;
+    padding: 4px 8px;
 }
 
-.nav-button.action-button:global(.ant-btn:hover),
-.nav-button.action-button:global(.ant-btn:focus) {
+.nav-button.action-button:global(.ant-btn:hover) {
     color: var(--dark-theme-action-button-hover-color);
 }
 
+.nav-button.action-button:global(.ant-btn:focus-visible) {
+    color: var(--dark-theme-action-button-focus-color);
+    outline: 1px solid var(--dark-theme-primary-button-focus-outline);
+}
+
 .nav-button.action-button:global(.ant-btn).disabled {
     color: var(--dark-theme-action-button-disabled-color);
     cursor: not-allowed;
@@ -26,13 +30,20 @@
     color: var(--dark-theme-primary-button-color);
 }
 
-.nav-button.primary-button:global(.ant-btn:hover),
-.nav-button.primary-button:global(.ant-btn:focus) {
+.nav-button.primary-button:global(.ant-btn:hover) {
     color: var(--dark-theme-primary-button-hover-color);
     background-color: var(--dark-theme-primary-button-hover-bg);
     border-color: var(--dark-theme-primary-button-hover-border);
 }
 
+.nav-button.primary-button:global(.ant-btn:focus-visible) {
+    color: var(--dark-theme-primary-button-focus-color);
+    background-color: var(--dark-theme-primary-button-focus-bg);
+    border-color: var(--dark-theme-primary-button-focus-border);
+    outline: 1px solid var(--dark-theme-primary-button-focus-outline);
+    outline-offset: 2px;
+}
+
 .nav-button.primary-button:global(.ant-btn).disabled {
     color: var(--dark-theme-primary-button-disabled-color);
     background-color: var(--dark-theme-primary-button-disabled-bg);
@@ -47,16 +58,28 @@
     color: var(--dark-theme-secondary-button-color);
 }
 
-.nav-button.secondary-button:global(.ant-btn:hover),
-.nav-button.secondary-button:global(.ant-btn:focus) {
+.nav-button.secondary-button:global(.ant-btn:hover) {
     color: var(--dark-theme-secondary-button-hover-color);
     background-color: var(--dark-theme-secondary-button-hover-bg);
     border-color: var(--dark-theme-secondary-button-hover-border);
 }
 
+.nav-button.secondary-button:global(.ant-btn:focus-visible) {
+    color: var(--dark-theme-secondary-button-focus-color);
+    background-color: var(--dark-theme-secondary-button-focus-bg);
+    border-color: var(--dark-theme-secondary-button-focus-border);
+    outline: 1px solid var(--dark-theme-secondary-button-focus-outline);
+    outline-offset: 2px;
+}
+
 .nav-button.secondary-button:global(.ant-btn).disabled {
     color: var(--dark-theme-secondary-button-disabled-color);
     background-color: var(--dark-theme-secondary-button-disabled-bg);
     border-color: var(--dark-theme-secondary-button-disabled-border);
     cursor: not-allowed;
+}
+
+.nav-button.dropdown-item-button:global(.ant-btn) {
+    background-color: inherit;
+    border: inherit;
 }

src/constants/interfaces.ts

@@ -45,6 +45,7 @@ export enum ButtonClass {
     Primary = "primary-button",
     Secondary = "secondary-button",
     Action = "action-button",
+    DropdownItem = "dropdown-item-button",
 }
 
 export enum IconGlyphs {

src/containers/AppHeader/style.css

@@ -26,6 +26,15 @@
     margin-right: 2em;
 }
 
+.left-links img {
+    padding: 6px;
+    border-radius: 6px;
+}
+
+.left-links a:focus-visible img {
+    outline: 1px solid var(--dark-theme-primary-button-focus-outline);
+}
+
 .home {
     margin-left: 2px;
     margin-right: 20px;

src/styles/ant-vars.less

@@ -73,13 +73,6 @@ https://github.com/ant-design/ant-design/blob/master/components/style/themes/def
 @layout-trigger-background-light: #fff;
 @layout-trigger-color-light     : @text-color;
 
-//Dropdown
-@dropdown-menu-bg: @dark-four;
-@dropdown-vertical-padding: 5px;
-@dropdown-edge-child-vertical-padding: 4px;
-@dropdown-font-size: @font-size-base;
-@dropdown-line-height: 22px;
-
 // Buttons
 @btn-font-weight        : 400;
 @btn-border-radius-base : 3px;