[Accordion] Normalize focusVisible logic (#22567)

Author: oliviertassinari

docs/pages/api-docs/accordion-summary.md

@@ -31,6 +31,7 @@ The `MuiAccordionSummary` name can be used for providing [default props](/custom
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the accordion summary. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">expandIcon</span> | <span class="prop-type">node</span> |  | The icon to display as the expand indicator. |
+| <span class="prop-name">focusVisibleClassName</span> | <span class="prop-type">string</span> |  | This prop can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md). A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components if needed. |
 | <span class="prop-name">IconButtonProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Props applied to the `IconButton` element wrapping the expand icon. |
 
 The `ref` is forwarded to the root element.
@@ -43,7 +44,7 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAccordionSummary-root</span> | Styles applied to the root element.
 | <span class="prop-name">expanded</span> | <span class="prop-name">.Mui-expanded</span> | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.
-| <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Pseudo-class applied to the root element if `focused={true}`.
+| <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to the root element if `disabled={true}`.
 | <span class="prop-name">content</span> | <span class="prop-name">.MuiAccordionSummary-content</span> | Styles applied to the children wrapper element.
 | <span class="prop-name">expandIcon</span> | <span class="prop-name">.MuiAccordionSummary-expandIcon</span> | Styles applied to the `IconButton` component when `expandIcon` is supplied.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -314,6 +314,17 @@ const theme = createMuitheme({
   +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
   ```
 
+- Rename `focused` to `focusVisible` for consistency:
+
+  ```diff
+  <Accordion
+    classes={{
+  -    focused: 'custom-focus-visible-classname',
+  +    focusVisible: 'custom-focus-visible-classname',
+    }}
+  />
+  ```
+
 ### Fab
 
 - Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:

packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts

@@ -20,8 +20,8 @@ export type AccordionSummaryTypeMap<
       root?: string;
       /** Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
       expanded?: string;
-      /** Pseudo-class applied to the root element if `focused={true}`. */
-      focused?: string;
+      /** Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+      focusVisible?: string;
       /** Pseudo-class applied to the root element if `disabled={true}`. */
       disabled?: string;
       /** Styles applied to the children wrapper element. */

packages/material-ui/src/AccordionSummary/AccordionSummary.js

@@ -25,7 +25,7 @@ export const styles = (theme) => {
       '&$expanded': {
         minHeight: 64,
       },
-      '&$focused': {
+      '&$focusVisible': {
         backgroundColor: theme.palette.action.focus,
       },
       '&$disabled': {
@@ -34,8 +34,8 @@ export const styles = (theme) => {
     },
     /* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
     expanded: {},
-    /* Pseudo-class applied to the root element if `focused={true}`. */
-    focused: {},
+    /* Pseudo-class applied to the ButtonBase root element if the button is keyboard focused. */
+    focusVisible: {},
     /* Pseudo-class applied to the root element if `disabled={true}`. */
     disabled: {},
     /* Styles applied to the children wrapper element. */
@@ -71,29 +71,12 @@ const AccordionSummary = React.forwardRef(function AccordionSummary(props, ref)
     classes,
     className,
     expandIcon,
+    focusVisibleClassName,
     IconButtonProps = {},
-    onBlur,
     onClick,
-    onFocusVisible,
     ...other
   } = props;
 
-  const [focusedState, setFocusedState] = React.useState(false);
-  const handleFocusVisible = (event) => {
-    setFocusedState(true);
-
-    if (onFocusVisible) {
-      onFocusVisible(event);
-    }
-  };
-  const handleBlur = (event) => {
-    setFocusedState(false);
-
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-
   const { disabled = false, expanded, toggle } = React.useContext(AccordionContext);
   const handleChange = (event) => {
     if (toggle) {
@@ -116,12 +99,10 @@ const AccordionSummary = React.forwardRef(function AccordionSummary(props, ref)
         {
           [classes.disabled]: disabled,
           [classes.expanded]: expanded,
-          [classes.focused]: focusedState,
         },
         className,
       )}
-      onFocusVisible={handleFocusVisible}
-      onBlur={handleBlur}
+      focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
       onClick={handleChange}
       ref={ref}
       {...other}
@@ -171,23 +152,24 @@ AccordionSummary.propTypes = {
    * The icon to display as the expand indicator.
    */
   expandIcon: PropTypes.node,
+  /**
+   * This prop can help a person know which element has the keyboard focus.
+   * The class name will be applied when the element gain the focus through a keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   /**
    * Props applied to the `IconButton` element wrapping the expand icon.
    * @default {}
    */
   IconButtonProps: PropTypes.object,
-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-  /**
-   * @ignore
-   */
-  onFocusVisible: PropTypes.func,
 };
 
 export default withStyles(styles, { name: 'MuiAccordionSummary' })(AccordionSummary);

packages/material-ui/src/AccordionSummary/AccordionSummary.test.js

@@ -80,41 +80,6 @@ describe('<AccordionSummary />', () => {
     expect(expandIcon).toBeInaccessible();
   });
 
-  it('focusing adds the `focused` class if focused visible', () => {
-    // TODO v5: Rename `focused` -> `focus-visible`
-    // `focused` is a global state which is applied on focus
-    // only here do we constrain it to focus-visible. THe name is also not consistent
-    // with :focus
-    const { getByRole } = render(<AccordionSummary />);
-    fireEvent.mouseDown(document.body); // pointer device
-    const button = getByRole('button');
-
-    act(() => {
-      fireEvent.keyDown(document.body, { key: 'Tab' }); // not actually focusing (yet)
-      button.focus();
-    });
-
-    expect(button).toHaveFocus();
-    expect(button).to.have.class(classes.focused);
-  });
-
-  it('blur should unset focused state', () => {
-    const { getByRole } = render(<AccordionSummary />);
-    fireEvent.mouseDown(document.body); // pointer device
-    fireEvent.keyDown(document.body, { key: 'Tab' }); // not actually focusing (yet)
-    const button = getByRole('button');
-
-    act(() => {
-      button.focus();
-    });
-    act(() => {
-      button.blur();
-    });
-
-    expect(button).not.toHaveFocus();
-    expect(button).not.to.have.class(classes.focused);
-  });
-
   it('should fire onBlur when the button blurs', () => {
     const handleBlur = spy();
     const { getByRole } = render(<AccordionSummary onBlur={handleBlur} />);