[ButtonBase] Better keyboard focused story (#11090)

mui · Apr 21, 2018 · 1d9e576 · 1d9e576
1 parent d2ec00d
commit 1d9e576
Show file tree

Hide file tree

Showing 34 changed files with 116 additions and 135 deletions.
diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js
@@ -18,19 +18,20 @@ const styles = theme => ({
       width: '100% !important', // Overrides inline-style
       height: 100,
     },
-    '&:hover': {
+    '&:hover, &$focusVisible': {
       zIndex: 1,
-    },
-    '&:hover $imageBackdrop': {
-      opacity: 0.15,
-    },
-    '&:hover $imageMarked': {
-      opacity: 0,
-    },
-    '&:hover $imageTitle': {
-      border: '4px solid currentColor',
+      '& $imageBackdrop': {
+        opacity: 0.15,
+      },
+      '& $imageMarked': {
+        opacity: 0,
+      },
+      '& $imageTitle': {
+        border: '4px solid currentColor',
+      },
     },
   },
+  focusVisible: {},
   imageButton: {
     position: 'absolute',
     left: 0,
@@ -104,6 +105,7 @@ function ButtonBases(props) {
           focusRipple
           key={image.title}
           className={classes.image}
+          focusVisibleClassName={classes.focusVisible}
           style={{
             width: image.width,
           }}

diff --git a/packages/material-ui/src/AppBar/AppBar.d.ts b/packages/material-ui/src/AppBar/AppBar.d.ts
@@ -1,13 +1,13 @@
 import { PropTypes, StandardProps } from '..';
-import { PaperProps, PaperClassKey } from '../Paper';
+import { PaperProps } from '../Paper';
 
 export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
   color?: PropTypes.Color;
   position?: 'fixed' | 'absolute' | 'sticky' | 'static';
 }
 
 export type AppBarClassKey =
-  | PaperClassKey
+  | 'root'
   | 'positionFixed'
   | 'positionAbsolute'
   | 'positionSticky'

diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigationAction.d.ts b/packages/material-ui/src/BottomNavigation/BottomNavigationAction.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StandardProps } from '..';
-import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
+import { ButtonBaseProps } from '../ButtonBase';
 
 export interface BottomNavigationActionProps
   extends StandardProps<ButtonBaseProps, BottomNavigationActionClassKey, 'onChange'> {
@@ -13,12 +13,7 @@ export interface BottomNavigationActionProps
   value?: any;
 }
 
-export type BottomNavigationActionClassKey =
-  | ButtonBaseClassKey
-  | 'selected'
-  | 'iconOnly'
-  | 'wrapper'
-  | 'label';
+export type BottomNavigationActionClassKey = 'root' | 'selected' | 'iconOnly' | 'wrapper' | 'label';
 
 declare const BottomNavigationAction: React.ComponentType<BottomNavigationActionProps>;
 

diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
-import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
+import { ButtonBaseProps } from '../ButtonBase';
 
 export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
   color?: PropTypes.Color;
@@ -17,13 +17,13 @@ export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassK
 }
 
 export type ButtonClassKey =
-  | ButtonBaseClassKey
+  | 'root'
   | 'label'
   | 'flatPrimary'
   | 'flatSecondary'
   | 'colorInherit'
   | 'raised'
-  | 'keyboardFocused'
+  | 'focusVisible'
   | 'raisedPrimary'
   | 'raisedSecondary'
   | 'disabled'

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -69,7 +69,7 @@ export const styles = theme => ({
     color: theme.palette.getContrastText(theme.palette.grey[300]),
     backgroundColor: theme.palette.grey[300],
     boxShadow: theme.shadows[2],
-    '&$keyboardFocused': {
+    '&$focusVisible': {
       boxShadow: theme.shadows[6],
     },
     '&:active': {
@@ -113,7 +113,7 @@ export const styles = theme => ({
       },
     },
   },
-  keyboardFocused: {},
+  focusVisible: {},
   disabled: {},
   fab: {
     borderRadius: '50%',
@@ -157,6 +157,7 @@ function Button(props) {
     disabled,
     disableFocusRipple,
     fullWidth,
+    focusVisibleClassName,
     mini,
     size,
     variant,
@@ -189,9 +190,7 @@ function Button(props) {
       className={className}
       disabled={disabled}
       focusRipple={!disableFocusRipple}
-      classes={{
-        keyboardFocused: classes.keyboardFocused,
-      }}
+      focusVisibleClassName={classNames(classes.focusVisible, focusVisibleClassName)}
       {...other}
     >
       <span className={classes.label}>{children}</span>
@@ -235,6 +234,10 @@ Button.propTypes = {
    * If `true`, the ripple effect will be disabled.
    */
   disableRipple: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  focusVisibleClassName: PropTypes.string,
   /**
    * If `true`, the button will take up the full width of its container.
    */

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts
@@ -12,11 +12,12 @@ export interface ButtonBaseProps
   component?: React.ReactType<ButtonBaseProps>;
   disableRipple?: boolean;
   focusRipple?: boolean;
+  focusVisibleClassName?: string;
   onKeyboardFocus?: React.FocusEventHandler<any>;
   TouchRippleProps?: Partial<TouchRippleProps>;
 }
 
-export type ButtonBaseClassKey = 'root' | 'disabled' | 'keyboardFocused';
+export type ButtonBaseClassKey = 'root' | 'disabled';
 
 declare const ButtonBase: React.ComponentType<ButtonBaseProps>;
 

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -41,7 +41,6 @@ export const styles = {
     },
   },
   disabled: {},
-  keyboardFocused: {},
 };
 
 /**
@@ -51,18 +50,18 @@ export const styles = {
  */
 class ButtonBase extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
-    if (typeof prevState.keyboardFocused === 'undefined') {
+    if (typeof prevState.focusVisible === 'undefined') {
       return {
-        keyboardFocused: false,
+        focusVisible: false,
         lastDisabled: nextProps.disabled,
       };
     }
 
     // The blur won't fire when the disabled state is set on a focused input.
     // We need to book keep the focused state manually.
-    if (!prevState.prevState && nextProps.disabled && prevState.keyboardFocused) {
+    if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {
       return {
-        keyboardFocused: false,
+        focusVisible: false,
         lastDisabled: nextProps.disabled,
       };
     }
@@ -83,8 +82,8 @@ class ButtonBase extends React.Component {
     if (
       this.props.focusRipple &&
       !this.props.disableRipple &&
-      !prevState.keyboardFocused &&
-      this.state.keyboardFocused
+      !prevState.focusVisible &&
+      this.state.focusVisible
     ) {
       this.ripple.pulsate();
     }
@@ -97,7 +96,7 @@ class ButtonBase extends React.Component {
 
   onKeyboardFocusHandler = event => {
     this.keyDown = false;
-    this.setState({ keyboardFocused: true });
+    this.setState({ focusVisible: true });
 
     if (this.props.onKeyboardFocus) {
       this.props.onKeyboardFocus(event);
@@ -120,13 +119,7 @@ class ButtonBase extends React.Component {
     const key = keycode(event);
 
     // Check if key is already down to avoid repeats being counted as multiple activations
-    if (
-      focusRipple &&
-      !this.keyDown &&
-      this.state.keyboardFocused &&
-      this.ripple &&
-      key === 'space'
-    ) {
+    if (focusRipple && !this.keyDown && this.state.focusVisible && this.ripple && key === 'space') {
       this.keyDown = true;
       event.persist();
       this.ripple.stop(event, () => {
@@ -157,7 +150,7 @@ class ButtonBase extends React.Component {
       this.props.focusRipple &&
       keycode(event) === 'space' &&
       this.ripple &&
-      this.state.keyboardFocused
+      this.state.focusVisible
     ) {
       this.keyDown = false;
       event.persist();
@@ -170,15 +163,15 @@ class ButtonBase extends React.Component {
 
   handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => {
     clearTimeout(this.keyboardFocusTimeout);
-    if (this.state.keyboardFocused) {
-      this.setState({ keyboardFocused: false });
+    if (this.state.focusVisible) {
+      this.setState({ focusVisible: false });
     }
   });
 
   handleMouseUp = createRippleHandler(this, 'MouseUp', 'stop');
 
   handleMouseLeave = createRippleHandler(this, 'MouseLeave', 'stop', event => {
-    if (this.state.keyboardFocused) {
+    if (this.state.focusVisible) {
       event.preventDefault();
     }
   });
@@ -191,8 +184,8 @@ class ButtonBase extends React.Component {
 
   handleBlur = createRippleHandler(this, 'Blur', 'stop', () => {
     clearTimeout(this.keyboardFocusTimeout);
-    if (this.state.keyboardFocused) {
-      this.setState({ keyboardFocused: false });
+    if (this.state.focusVisible) {
+      this.setState({ focusVisible: false });
     }
   });
 
@@ -227,6 +220,7 @@ class ButtonBase extends React.Component {
       disabled,
       disableRipple,
       focusRipple,
+      focusVisibleClassName,
       onBlur,
       onFocus,
       onKeyboardFocus,
@@ -248,7 +242,7 @@ class ButtonBase extends React.Component {
       classes.root,
       {
         [classes.disabled]: disabled,
-        [classes.keyboardFocused]: this.state.keyboardFocused,
+        [focusVisibleClassName]: this.state.focusVisible,
       },
       classNameProp,
     );
@@ -340,6 +334,13 @@ ButtonBase.propTypes = {
    * `disableRipple` must also be `false`.
    */
   focusRipple: PropTypes.bool,
+  /**
+   * This property can help a person know which element has the keyboard focus.
+   * The class name will be applied when the element gain the focus throught a keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+   */
+  focusVisibleClassName: PropTypes.string,
   /**
    * @ignore
    */