Change <Select> component styles for accessibility

packages/core/basic/Field/index.tsx

@@ -20,6 +20,7 @@ function Field(props: Types.PrivateProps, ref: React.ForwardedRef<HTMLDivElement
     label,
     clearable = false,
     notFocusable,
+    className,
   } = props
 
   const {
@@ -70,7 +71,7 @@ function Field(props: Types.PrivateProps, ref: React.ForwardedRef<HTMLDivElement
   )
 
   return (
-    <div css={classes.container}>
+    <div className={className} css={classes.container}>
       {label !== undefined && labelType === 'outside' && labelJSX}
 
       <div css={classes.field} {...attributes} {...events} ref={ref}>

packages/core/control/Select/index.tsx

@@ -7,12 +7,14 @@ import React, {
   useState,
 } from 'react'
 
-import { Drop, ScrollView } from '@stage-ui/core'
+import { Button, Drop, ScrollView } from '@stage-ui/core'
 import Field from '@stage-ui/core/basic/Field'
 import DropTypes from '@stage-ui/core/layout/Drop/types'
 import { ChevronDown, Close } from '@stage-ui/icons'
 import { useSystem, createID } from '@stage-ui/system'
 
+import { FocusTrap } from 'focus-trap-react'
+
 import SharedZIndex from '../../utils/SharedZIndex'
 
 import styles from './styles'
@@ -114,33 +116,34 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
     }
   }, [isOpen, searchValue, options?.map((value) => value.value).join()])
 
+  /**
+   * Open and close select drop
+   */
+  function toggleOpen(e?: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    e?.stopPropagation()
+    if (!isOpen && disabled) {
+      return
+    }
+    setOpen(!isOpen)
+  }
+
   /*
    * Keyboard control
    * TODO: handle keyboard control
    */
   function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
     switch (event.key) {
       case 'Enter':
+      case ' ':
+        toggleOpen()
         break
       case 'ArrowUp':
-        break
       case 'ArrowDown':
-        break
       case 'Backspace':
         break
+      default:
+        onKeyDown?.(event)
     }
-    onKeyDown?.(event)
-  }
-
-  /**
-   * Open and close select drop
-   */
-  function toggleOpen(e?: React.MouseEvent<HTMLDivElement, MouseEvent>) {
-    e?.stopPropagation()
-    if (!isOpen && disabled) {
-      return
-    }
-    setOpen(!isOpen)
   }
 
   /**
@@ -196,7 +199,7 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
   const renderOption = (option: Types.Option) => {
     const isThisOptionSelected = values.map((item) => item.value).includes(option.value)
     return (
-      <div
+      <Button
         css={classes.option({
           selected: isThisOptionSelected,
         })}
@@ -205,11 +208,16 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
           e.stopPropagation()
           setOption(option)
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            setOption(option)
+          }
+        }}
       >
         {customRenderOption
           ? customRenderOption(option, isThisOptionSelected)
           : option.text}
-      </div>
+      </Button>
     )
   }
 
@@ -231,6 +239,7 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
 
   return (
     <Field
+      className="select__field"
       {...fieldProps}
       ref={fieldRef}
       size={size}
@@ -350,6 +359,13 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
         target={fieldRef}
       >
         <div css={classes.drop}>
+          {/* @ts-expect-error - containerElements works using querySelector reference, but throws type error */}
+          <FocusTrap
+            containerElements={['.select__field', '.select__scroll-view']}
+            focusTrapOptions={{
+              fallbackFocus: '.select__field',
+            }}
+          />
           {!!dropHeader && <div css={classes.dropHeader}>{dropHeader}</div>}
           <ScrollView
             preventStageEvents
@@ -358,6 +374,7 @@ const Select: ForwardRefRenderFunction<Types.Ref, Types.Props> = (props, ref) =>
             overrides={{
               content: classes.scrollContent,
             }}
+            className="select__scroll-view"
           >
             {options.map(renderOption)}
             {options.length === 0 && (

packages/core/control/Select/styles.ts

@@ -15,7 +15,11 @@ const createClasses: Stage.CreateClasses<Types.Classes, Types.Props> = (
   return {
     container: {},
     label: {},
-    field: {},
+    field: {
+      '&:focus, &#focused:focus': {
+        boxShadow: `0px 0px 2px 2px ${theme.color.blue[500].string()} !important`,
+      },
+    },
     rightChild: {},
     leftChild: {},
     selectedArea: {
@@ -42,6 +46,7 @@ const createClasses: Stage.CreateClasses<Types.Classes, Types.Props> = (
         '&::placeholder': {
           color: theme.color.light.rgb().string(),
         },
+        userSelect: 'none',
       },
       state.searchMode && {
         color: theme.color.hard.rgb().string(),
@@ -161,6 +166,9 @@ const createClasses: Stage.CreateClasses<Types.Classes, Types.Props> = (
     scrollContent: {
       maxHeight: maxScrollHeight,
       padding: `calc(${theme.assets.field[size].indent} / 2)`,
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.25rem',
     },
 
     option: (state) => [
@@ -170,11 +178,16 @@ const createClasses: Stage.CreateClasses<Types.Classes, Types.Props> = (
         cursor: 'pointer',
         userSelect: 'none',
         borderRadius: theme.radius.s,
+        backgroundColor: 'transparent',
+        width: '100%',
+        justifyContent: 'flex-start',
+        color: theme.color.primary.rgb().string(),
+
+        padding: `calc(${theme.assets.field[size].indent} / 2)`,
         ':hover': {
           color: theme.color.primary.rgb().string(),
-          backgroundColor: theme.color.primary.alpha(0.1).rgb().string(),
+          backgroundColor: `${theme.color.primary.alpha(0.1).rgb().string()}`,
         },
-        padding: `calc(${theme.assets.field[size].indent} / 2)`,
       },
       theme.assets.typography.text[size],
       state.selected && {

packages/testbed/src/index.tsx

@@ -1,7 +1,8 @@
-import { light } from './theme'
-import { DatePicker, Modal, modal, Viewport } from '@stage-ui/core'
+import { modal, Viewport } from '@stage-ui/core'
+
 import ReactDOM from 'react-dom'
-import { useState } from 'react'
+
+import { light } from './theme'
 
 const App: React.FC = () => {
   const handleOpen = () => {