Notifications, showing, short selector a11y (codesandbox#2652)

* use reakit overlay

* drop button styles

* update document usage

* use menu and migrate to ts

* add focus menuitems

* fix list elements

* fix typos

* new sandbox haspopup

* add disclosure type

* fix typecheck

Author: yeion7

packages/app/package.json

@@ -193,7 +193,7 @@
     "react-tagsinput": "^3.19.0",
     "react-use": "^9.7.2",
     "react-virtualized": "^9.19.1",
-    "reakit": "^1.0.0-beta.4",
+    "reakit": "^1.0.0-beta.8",
     "rebound": "^0.1.0",
     "resize-observer-polyfill": "^1.5.1",
     "sha1": "^1.1.1",

packages/app/src/app/components/Overlay/Overlay.tsx

@@ -1,14 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useTransition, animated, config } from 'react-spring';
 import track from '@codesandbox/common/lib/utils/analytics';
+import {
+  usePopoverState,
+  Popover,
+  PopoverDisclosure,
+  PopoverDisclosureHTMLProps,
+} from 'reakit/Popover';
 import { Container } from './elements';
 
 interface IOverlayProps {
   event: string;
   isOpen?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
-  children: (handleOpen: () => void) => React.ReactNode;
+  children: (props: PopoverDisclosureHTMLProps) => React.ReactNode;
   content: React.ComponentType;
   noHeightAnimation?: boolean;
 }
@@ -22,47 +28,27 @@ export const Overlay: React.FC<IOverlayProps> = ({
   content: Content,
   noHeightAnimation = true,
 }) => {
-  const [open, setOpen] = useState(isOpen === undefined ? false : isOpen);
   const isControlled = isOpen !== undefined;
-  const openState = isControlled ? isOpen : open;
-
-  useEffect(() => {
-    const handleClick = (e: MouseEvent) => {
-      if (!e.defaultPrevented && openState) {
-        if (event) {
-          track(`Closed ${event}`);
-        }
-        if (isControlled) {
-          if (onClose) {
-            onClose();
-          }
-        } else {
-          setOpen(false);
-        }
-      }
-    };
-
-    document.addEventListener('mousedown', handleClick);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [isOpen, onClose, event, openState, isControlled]);
+  const popover = usePopoverState({
+    visible: isControlled ? isOpen : undefined,
+    placement: 'bottom-end',
+  });
 
-  const handleOpen = () => {
-    if (event) {
+  React.useEffect(() => {
+    if (popover.visible) {
       track(`Opened ${event}`);
-    }
-    if (isControlled) {
-      if (onOpen) {
+      if (isControlled) {
         onOpen();
       }
     } else {
-      setOpen(true);
+      track(`Closed ${event}`);
+      if (isControlled) {
+        onClose();
+      }
     }
-  };
+  }, [event, isControlled, onClose, onOpen, popover.visible]);
 
-  const transitions = useTransition(openState, null, {
+  const transitions = useTransition(popover.visible, null, {
     config: config.default,
     from: {
       ...(noHeightAnimation ? {} : { height: 0 }),
@@ -79,19 +65,23 @@ export const Overlay: React.FC<IOverlayProps> = ({
   });
 
   return (
-    <Container onMouseDown={e => e.preventDefault()}>
-      {children(handleOpen)}
-      {transitions.map(({ item, props }, i) =>
-        item ? (
-          // eslint-disable-next-line
-          <animated.div key={i} style={props}>
-            <Content />
-          </animated.div>
-        ) : (
-          // eslint-disable-next-line
-          <animated.span key={i} style={props} />
-        )
-      )}
+    <Container>
+      <PopoverDisclosure {...popover}>
+        {props => children(props)}
+      </PopoverDisclosure>
+      <Popover unstable_portal {...popover} aria-label={event}>
+        {transitions.map(({ item, props }, i) =>
+          item ? (
+            // eslint-disable-next-line
+            <animated.div key={i} style={props}>
+              <Content />
+            </animated.div>
+          ) : (
+            // eslint-disable-next-line
+            <animated.span key={i} style={props} />
+          )
+        )}
+      </Popover>
     </Container>
   );
 };

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/Option.tsx

@@ -11,32 +11,34 @@ interface Props {
   toggleTemplate: (name: string, selected: boolean) => void;
 }
 
-export const Option = ({
-  color,
-  id,
-  style,
-  niceName,
-  selected,
-  toggleTemplate,
-}: Props) => {
-  const checkBoxName = `${id}-checkbox`;
-  return (
-    <Container
-      selected={selected}
-      onClick={e => {
-        e.preventDefault();
-        toggleTemplate(id, !selected);
-      }}
-      onMouseDown={e => {
-        e.preventDefault();
-      }}
-      style={style}
-    >
-      <label htmlFor={checkBoxName} style={{ display: 'none' }}>
-        {checkBoxName}
-      </label>
-      <CheckBox id={checkBoxName} color={color} selected={selected} />
-      <OptionName style={{ fontWeight: 500 }}>{niceName}</OptionName>
-    </Container>
-  );
-};
+export const Option = React.forwardRef<HTMLDivElement, Props>(
+  ({ color, id, style, niceName, selected, toggleTemplate, ...props }, ref) => {
+    const checkBoxName = `${id}-checkbox`;
+    return (
+      <Container
+        as="li"
+        {...props}
+        ref={ref}
+        selected={selected}
+        onClick={e => {
+          e.preventDefault();
+          toggleTemplate(id, !selected);
+        }}
+        style={style}
+        aria-label={`${checkBoxName} ${selected ? 'selected' : ''}`}
+      >
+        <CheckBox
+          tabIndex={0}
+          aria-checked={selected}
+          role="checkbox"
+          id={checkBoxName}
+          color={color}
+          selected={selected}
+        />
+        <OptionName htmlFor={checkBoxName} style={{ fontWeight: 500 }}>
+          {niceName}
+        </OptionName>
+      </Container>
+    );
+  }
+);

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/elements.ts

@@ -20,7 +20,9 @@ export const Container = styled.div<{ hideFilters: boolean }>`
 export const TemplatesName = styled.span`
   transition: 0.3s ease color;
   color: rgba(255, 255, 255, 0.8);
-
+  appearance: none !important;
+  background: none;
+  border: none;
   cursor: pointer;
 
   &:hover {
@@ -46,12 +48,13 @@ export const OverlayContainer = styled.div`
   background-color: ${props => props.theme.background};
 `;
 
-export const OptionName = styled.span`
+export const OptionName = styled.label`
   font-weight: 600;
   cursor: pointer;
 `;
 
 export const Option = styled.div<{ selected: boolean }>`
+  list-style: none;
   transition: 0.3s ease color;
   cursor: pointer;
   color: ${props =>

packages/app/src/app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { orderBy } from 'lodash-es';
 import { useOvermind } from 'app/overmind';
-import { Overlay as OverlayComponent } from 'app/components/Overlay';
+import { useMenuState, Menu, MenuItem, MenuDisclosure } from 'reakit/Menu';
 import { Container, TemplatesName, OverlayContainer } from './elements';
 import { Option } from './Option';
 import { ITemplate } from '../../types';
@@ -15,6 +15,10 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
   possibleTemplates,
   hideFilters,
 }: IFilterOptionsProps) => {
+  const menu = useMenuState({
+    placement: 'bottom-end',
+  });
+
   const {
     state: {
       dashboard: { isTemplateSelected, filters },
@@ -40,49 +44,8 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
 
   const allSelected = possibleTemplates.every(t => isTemplateSelected(t.id));
 
-  const Overlay = () => (
-    <OverlayContainer>
-      {possibleTemplates.length > 0 ? (
-        <>
-          {orderBy(possibleTemplates, 'niceName').map(template => {
-            const selected = isTemplateSelected(template.id);
-
-            return (
-              <Option
-                toggleTemplate={toggleTemplate}
-                selected={selected}
-                key={template.name}
-                color={template.color}
-                id={template.id}
-                niceName={template.niceName || template.name}
-              />
-            );
-          })}
-
-          <Option
-            toggleTemplate={() => {
-              if (!allSelected) {
-                blacklistedTemplatesCleared();
-              } else {
-                blacklistedTemplatesChanged({
-                  templates: possibleTemplates.map(t => t.id) || [],
-                });
-              }
-            }}
-            selected={allSelected}
-            color="#374140"
-            id="all"
-            style={{ marginTop: '1rem' }}
-            niceName="Select All"
-          />
-        </>
-      ) : (
-        'No environments found'
-      )}
-    </OverlayContainer>
-  );
-
   const { blacklistedTemplates } = filters;
+
   const templateCount = possibleTemplates.length - blacklistedTemplates.length;
   const templateMessage =
     templateCount === possibleTemplates.length && templateCount > 0
@@ -92,14 +55,68 @@ const FilterOptionsComponent: React.FC<IFilterOptionsProps> = ({
         }`;
 
   return (
-    <OverlayComponent event="Dashboard - Order By" content={Overlay}>
-      {open => (
-        <Container hideFilters={hideFilters}>
-          Showing{' '}
-          <TemplatesName onClick={open}>{templateMessage}</TemplatesName>
-        </Container>
-      )}
-    </OverlayComponent>
+    <>
+      <MenuDisclosure {...menu}>
+        {disclosureProps => (
+          <Container hideFilters={hideFilters}>
+            <span aria-hidden>Showing </span>
+            <TemplatesName
+              {...disclosureProps}
+              aria-label={`select showing sandboxes, current ${templateMessage}`}
+            >
+              {templateMessage}
+            </TemplatesName>
+          </Container>
+        )}
+      </MenuDisclosure>
+      <Menu unstable_portal {...menu} aria-label="Dashboard - Order By">
+        <OverlayContainer as="ul">
+          {possibleTemplates.length > 0 ? (
+            <>
+              {orderBy(possibleTemplates, 'niceName').map(template => {
+                const selected = isTemplateSelected(template.id);
+
+                return (
+                  <MenuItem
+                    as={Option}
+                    {...menu}
+                    toggleTemplate={toggleTemplate}
+                    selected={selected}
+                    key={template.name}
+                    color={template.color}
+                    id={template.id}
+                    niceName={template.niceName || template.name}
+                  />
+                );
+              })}
+
+              <MenuItem
+                as={Option}
+                {...menu}
+                toggleTemplate={() => {
+                  if (!allSelected) {
+                    blacklistedTemplatesCleared();
+                  } else {
+                    blacklistedTemplatesChanged({
+                      templates: possibleTemplates.map(t => t.id) || [],
+                    });
+                  }
+                }}
+                selected={allSelected}
+                color="#374140"
+                id="all"
+                style={{ marginTop: '1rem' }}
+                niceName="Select All"
+              />
+            </>
+          ) : (
+            <MenuItem {...menu} disabled>
+              No environments found
+            </MenuItem>
+          )}
+        </OverlayContainer>
+      </Menu>
+    </>
   );
 };