diff --git a/docs/pages/api-docs/accordion-summary.md b/docs/pages/api-docs/accordion-summary.md
index efdf65f42bd5eb..bb7a3b2173c889 100644
--- a/docs/pages/api-docs/accordion-summary.md
+++ b/docs/pages/api-docs/accordion-summary.md
@@ -44,6 +44,7 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
|:-----|:-------------|:------------|
| root | .MuiAccordionSummary-root | Styles applied to the root element.
| expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.
+| focused | .Mui-focused | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
| focusVisible | .Mui-focusVisible | Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`.
| content | .MuiAccordionSummary-content | Styles applied to the children wrapper element.
diff --git a/packages/material-ui/src/Accordion/Accordion.js b/packages/material-ui/src/Accordion/Accordion.js
index 59cd563bc450c8..19fd000c8f3454 100644
--- a/packages/material-ui/src/Accordion/Accordion.js
+++ b/packages/material-ui/src/Accordion/Accordion.js
@@ -172,19 +172,7 @@ Accordion.propTypes = {
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
- classes: chainPropTypes(PropTypes.object, (props) => {
- if (props.classes && props.classes.focused) {
- throw new Error(
- [
- 'Material-UI: the classes.focused key is deprecated.',
- 'Use `classes.focusedVisible` instead',
- 'The name of the pseudo-class was changed for consistency.',
- ].join('\n'),
- );
- }
-
- return null;
- }),
+ classes: PropTypes.object,
/**
* @ignore
*/
diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts b/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts
index 75ee975e173e39..edfa4c92238d15 100644
--- a/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts
+++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.d.ts
@@ -41,6 +41,8 @@ declare const AccordionSummary: ExtendButtonBase;
export type AccordionSummaryClassKey =
| 'root'
| 'expanded'
+ // deprecated
+ | 'focused'
| 'focusVisible'
| 'disabled'
| 'content'
diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.js
index d37bd392224dc9..d2f730e8610835 100644
--- a/packages/material-ui/src/AccordionSummary/AccordionSummary.js
+++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.js
@@ -2,6 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
+import { chainPropTypes } from '@material-ui/utils';
import ButtonBase from '../ButtonBase';
import IconButton from '../IconButton';
import withStyles from '../styles/withStyles';
@@ -25,7 +26,7 @@ export const styles = (theme) => {
'&$expanded': {
minHeight: 64,
},
- '&$focusVisible': {
+ '&$focused, &$focusVisible': {
backgroundColor: theme.palette.action.focus,
},
'&$disabled': {
@@ -35,6 +36,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 ButtonBase root element if the button is keyboard focused. */
+ 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: {},
@@ -140,7 +143,19 @@ AccordionSummary.propTypes = {
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
- classes: PropTypes.object,
+ classes: chainPropTypes(PropTypes.object, (props) => {
+ if (props.classes.focused.indexOf(' ') !== -1) {
+ return new Error(
+ [
+ 'Material-UI: The `classes.focused` key is deprecated.',
+ 'Use `classes.focusVisible` instead.',
+ 'The name of the pseudo-class was changed for consistency.',
+ ].join('\n'),
+ );
+ }
+
+ return null;
+ }),
/**
* @ignore
*/
diff --git a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js b/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js
index 43f9627288dbe6..529f0d7e7ec717 100644
--- a/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/material-ui/src/AccordionSummary/AccordionSummary.test.js
@@ -1,9 +1,11 @@
import * as React from 'react';
+import PropTypes from 'prop-types';
import { expect } from 'chai';
import { spy } from 'sinon';
import { getClasses } from 'test/utils';
import createMount from 'test/utils/createMount';
import describeConformance from 'test/utils/describeConformance';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
import { createClientRender, fireEvent } from 'test/utils/createClientRender';
import Accordion from '../Accordion';
import AccordionSummary from './AccordionSummary';
@@ -98,4 +100,38 @@ describe('', () => {
expect(handleFocusVisible.callCount).to.equal(1);
});
+
+ describe('warnings', () => {
+ beforeEach(() => {
+ consoleErrorMock.spy();
+ PropTypes.resetWarningCache();
+ });
+
+ afterEach(() => {
+ consoleErrorMock.reset();
+ });
+
+ it('should when using the `focused` class', () => {
+ PropTypes.checkPropTypes(
+ AccordionSummary.Naked.propTypes,
+ {
+ classes: {
+ focused:
+ // `Mui-focused` is the class generated by jss
+ // `focused` is the custom class
+ // i.e. this is the focused class when using ``
+ 'Mui-focused focused',
+ },
+ children: ,
+ },
+ 'prop',
+ 'MockedName',
+ );
+
+ expect(consoleErrorMock.callCount()).to.equal(1);
+ expect(consoleErrorMock.messages()[0]).to.include(
+ 'Material-UI: The `classes.focused` key is deprecated.\nUse `classes.focusVisible` instead.',
+ );
+ });
+ });
});