[a11y] Open picker by space click (#1266)

* Open picker by space/enter click * Change new prop name to not conflict with current onOpen * Use only enter to open * Fix comment
mui · Aug 17, 2019 · f8a4b63 · f8a4b63
1 parent 142cb5f
commit f8a4b63
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 13 deletions.
diff --git a/lib/src/_shared/KeyboardDateInput.tsx b/lib/src/_shared/KeyboardDateInput.tsx
@@ -11,7 +11,7 @@ export interface KeyboardDateInputProps
   extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
   format: string;
   onChange: (value: string | null) => void;
-  onClick?: () => void;
+  openPicker?: () => void;
   validationError?: React.ReactNode;
   inputValue: string;
   inputProps?: TextFieldProps['inputProps'];
@@ -56,7 +56,7 @@ export const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps>
   validationError,
   KeyboardButtonProps,
   InputAdornmentProps,
-  onClick,
+  openPicker: onOpen,
   onChange,
   InputProps,
   mask,
@@ -105,7 +105,7 @@ export const KeyboardDateInput: React.FunctionComponent<KeyboardDateInputProps>
             ...InputProps,
             [`${position}Adornment`]: (
               <InputAdornment position={position} {...InputAdornmentProps}>
-                <IconButton disabled={disabled} {...KeyboardButtonProps} onClick={onClick}>
+                <IconButton disabled={disabled} {...KeyboardButtonProps} onClick={onOpen}>
                   {keyboardIcon}
                 </IconButton>
               </InputAdornment>

diff --git a/lib/src/_shared/PureDateInput.tsx b/lib/src/_shared/PureDateInput.tsx
@@ -2,6 +2,15 @@ import * as React from 'react';
 import TextField, { BaseTextFieldProps, TextFieldProps } from '@material-ui/core/TextField';
 import { ExtendMui } from '../typings/extendMui';
 
+export type NotOverridableProps =
+  | 'openPicker'
+  | 'inputValue'
+  | 'onChange'
+  | 'format'
+  | 'validationError'
+  | 'format'
+  | 'forwardedRef';
+
 export interface PureDateInputProps
   extends ExtendMui<BaseTextFieldProps, 'variant' | 'onError' | 'onChange' | 'value'> {
   /** Pass material-ui text field variant down, bypass internal variant prop */
@@ -12,13 +21,15 @@ export interface PureDateInputProps
   inputProps?: TextFieldProps['inputProps'];
   inputValue: string;
   validationError?: React.ReactNode;
+  openPicker: () => void;
 }
 
 export const PureDateInput: React.FC<PureDateInputProps> = ({
   inputValue,
   inputVariant,
   validationError,
   InputProps,
+  openPicker: onOpen,
   TextFieldComponent = TextField,
   ...other
 }) => {
@@ -36,9 +47,17 @@ export const PureDateInput: React.FC<PureDateInputProps> = ({
       helperText={validationError}
       {...other}
       // do not overridable
+      onClick={onOpen}
       value={inputValue}
       variant={inputVariant as any}
       InputProps={PureDateInputProps}
+      onKeyDown={e => {
+        // space
+        if (e.keyCode === 32) {
+          e.stopPropagation();
+          onOpen();
+        }
+      }}
     />
   );
 };

diff --git a/lib/src/_shared/hooks/useKeyDown.ts b/lib/src/_shared/hooks/useKeyDown.ts
@@ -16,19 +16,17 @@ export function runKeyHandler(e: KeyboardEvent, keyHandlers: KeyHandlers) {
 
 export function useKeyDown(active: boolean, keyHandlers: KeyHandlers) {
   const keyHandlersRef = React.useRef(keyHandlers);
-  useIsomorphicEffect(() => {
-    keyHandlersRef.current = keyHandlers;
-  });
+  keyHandlersRef.current = keyHandlers;
 
-  React.useEffect(() => {
+  useIsomorphicEffect(() => {
     if (active) {
       const handleKeyDown = (event: KeyboardEvent) => {
-        runKeyHandler(event, keyHandlers);
+        runKeyHandler(event, keyHandlersRef.current);
       };
       window.addEventListener('keydown', handleKeyDown);
       return () => {
         window.removeEventListener('keydown', handleKeyDown);
       };
     }
-  }, [active, keyHandlers]);
+  }, [active]);
 }
diff --git a/lib/src/_shared/hooks/usePickerState.ts b/lib/src/_shared/hooks/usePickerState.ts
@@ -102,7 +102,7 @@ export function usePickerState(props: BasePickerProps, options: StateHookOptions
     () => ({
       inputValue,
       validationError,
-      onClick: () => !disabled && setIsOpen(true),
+      openPicker: () => !disabled && setIsOpen(true),
     }),
     [disabled, inputValue, setIsOpen, validationError]
   );

diff --git a/lib/src/views/Calendar/Calendar.tsx b/lib/src/views/Calendar/Calendar.tsx
@@ -6,6 +6,7 @@ import CalendarHeader from './CalendarHeader';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SlideTransition, { SlideDirection } from './SlideTransition';
 import { Theme } from '@material-ui/core/styles';
+import { VariantContext } from '../../wrappers/Wrapper';
 import { MaterialUiPickersDate } from '../../typings/date';
 import { runKeyHandler } from '../../_shared/hooks/useKeyDown';
 import { IconButtonProps } from '@material-ui/core/IconButton';
@@ -85,6 +86,7 @@ const KeyDownListener = ({ onKeyDown }: { onKeyDown: (e: KeyboardEvent) => void
 };
 
 export class Calendar extends React.Component<CalendarProps, CalendarState> {
+  static contextType = VariantContext;
   static propTypes: any = {
     renderDay: PropTypes.func,
     shouldDisableDate: PropTypes.func,
@@ -306,7 +308,9 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
     return (
       <React.Fragment>
-        {allowKeyboardControl && <KeyDownListener onKeyDown={this.handleKeyDown} />}
+        {allowKeyboardControl && this.context !== 'static' && (
+          <KeyDownListener onKeyDown={this.handleKeyDown} />
+        )}
 
         <CalendarHeader
           currentMonth={currentMonth!}

diff --git a/lib/src/wrappers/Wrapper.tsx b/lib/src/wrappers/Wrapper.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Omit } from '@material-ui/core';
 import { StaticWrapper } from './StaticWrapper';
-import { PureDateInputProps } from '../_shared/PureDateInput';
 import { ModalWrapper, ModalWrapperProps } from './ModalWrapper';
 import { InlineWrapper, InlineWrapperProps } from './InlineWrapper';
 import { KeyboardDateInputProps } from '../_shared/KeyboardDateInput';
+import { PureDateInputProps, NotOverridableProps } from '../_shared/PureDateInput';
 
 export type WrapperVariant = 'dialog' | 'inline' | 'static';
 
@@ -38,7 +38,7 @@ export type ExtendWrapper<TInput extends PureDateInputProps | KeyboardDateInputP
   variant?: WrapperVariant
 } & ModalRoot
   & InlineRoot
-  & Omit<TInput, 'inputValue' | 'onChange' | 'format' | 'validationError' | 'format' | 'forwardedRef'>
+  & Omit<TInput, NotOverridableProps>
 
 export function getWrapperFromVariant<T>(
   variant?: WrapperVariant