Notifications, showing, short selector a11y

packages/app/package.json

@@ -201,7 +201,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;
 }
@@ -23,47 +29,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 }),
@@ -80,19 +66,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,12 +20,20 @@ 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 {
     color: white;
   }
+
+  &:focus {
+    color: white;
+    background-color: ${props => props.theme.secondary.clearer(0.9)};
+    outline: 0;
+  }
 `;
 
 export const OverlayContainer = styled.div`
@@ -39,28 +47,36 @@ export const OverlayContainer = styled.div`
   z-index: 10;
   color: rgba(255, 255, 255, 0.8);
   font-size: 0.875rem;
-
+  margin: 0;
   border-radius: 2px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
 
   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 =>
     props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
 
   margin-bottom: 0.25rem;
 
+  &:focus {
+    color: white;
+    background-color: ${props => props.theme.secondary.clearer(0.9)};
+    outline: 0;
+  }
+
   &:hover {
-    color: rgba(255, 255, 255, 0.9);
+    color: white;
+    background-color: ${props => props.theme.secondary.clearer(0.9)};
 
     ${props =>
       !props.selected &&