Material-ui: [Accordion] Summary low contrast on focus in dark mode

[petermikitsh]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

The summary text should be more legible.

Steps to Reproduce 🕹

Steps:

1. Go to https://material-ui.com/components/expansion-panels/#expansion-panel
2. Enable dark mode
3. Use tab key to navigate to an expansion panel summary element

Context 🔦

The context is accessibility.

Inputting the values into https://webaim.org/resources/contrastchecker/:

[marcosvega91]

Maybe for darken theme is better to use 600: '#757575'; instead of 300: '#e0e0e0';

[oliviertassinari]

Wow, it has been broken like this for 2 years 🙃. How is this even possible. Do people use the accordion or dark mode at all 😱?

What about this diff?

diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
index b61281403..c476e7d30 100644
--- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
+++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js
@@ -25,10 +25,10 @@ export const styles = (theme) => {
         minHeight: 64,
       },
       '&$focused': {
-        backgroundColor: theme.palette.grey[300],
+        backgroundColor: theme.palette.action.focus,
       },
       '&$disabled': {
-        opacity: 0.38,
+        opacity: theme.palette.action.disabledOpacity,
       },
     },
     /* Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */

[marcosvega91]

I have tried and can be good

[marcosvega91]

Am i mistake or I saw a PR for this?