[TextField] Improve WCAG 2.4.7 with error={true} (#35687)

mui · Jan 3, 2023 · bc28242 · bc28242
1 parent a267ed6
commit bc28242
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 7 deletions.
diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js
@@ -95,9 +95,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
  '&:before, &:after': {
  borderBottomColor: (theme.vars || theme).palette.error.main,
  },
- '&:focus-within:after': {
- transform: 'scaleX(1)', // error is always underlined in red
- },
  },
  '&:before': {
  borderBottom: `1px solid ${

diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js
@@ -79,9 +79,6 @@ const InputRoot = styled(InputBaseRoot, {
  '&:before, &:after': {
  borderBottomColor: (theme.vars || theme).palette.error.main,
  },
- '&:focus-within:after': {
- transform: 'scaleX(1)', // error is always underlined in red
- },
  },
  '&:before': {
  borderBottom: `1px solid ${bottomLineColor}`,
@@ -97,7 +94,7 @@ const InputRoot = styled(InputBaseRoot, {
  pointerEvents: 'none', // Transparent to the hover style.
  },
  [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
- borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+ borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
  // Reset on touch devices, it doesn't add specificity
  '@media (hover: none)': {
  borderBottom: `1px solid ${bottomLineColor}`,