Fix disabled-text scss styling to meet a11y standards

[josephperrott]

disabled-text usage should be replaced to meet accessibility contrast requirements

Replace disabled text usage to new shared constant:

• badge
• datepicker
• form field
• input
• select
• stepper
• tabs

[jelbourn]

@josephperrott do you remember at all what prompted this issue? Did we get a report about the contrast being poor?

[josephperrott]

I discovered the issue while performing aXe tests across the codebase. The disabled-text check failed in its usages here.

If I remember correctly, we determined that for many of these we would need to consult with the Material team to determine if it was a spec issue or something in our implementation.

[Splaktar]

For inputs now I see

• a 4.57:1 contrast ratio on disabled text in dark mode. This is okay.
• a 2.66:1 contrast ratio on disabled text in light mode. This is failing.

Taking a look...

[Splaktar]

What are the latest thoughts on disabled-text styles (light and dark) not meeting a11y contrast guidelines?

components/src/material/core/theming/_palette.scss

Lines 29 to 36 in 40ceda2

	$dark-primary-text: rgba(black, 0.87);
	$dark-secondary-text: rgba(black, 0.54);
	$dark-disabled-text: rgba(black, 0.38);
	$dark-dividers: rgba(black, 0.12);
	$dark-focused: rgba(black, 0.12);
	$light-primary-text: white;
	$light-secondary-text: rgba(white, 0.7);
	$light-disabled-text: rgba(white, 0.5);

This issue doesn’t have much detail, but seems to hint at there being a need to change the opacity value for these disabled-text styles. It seems like the short term workaround, was to change most things to just use secondary-text instead. But this has been in this state for about 3 years. Did we determine that this was too breaking, did we never get design feedback, or did we just not follow up on it until now?

We could

1. Update the disabled-text opacities to be the same as those for secondary-text
2. We could change a lot of usages of disabled-text to secondary-text like in this PR.
3. Or we should change both secondary-text and disabled-text to new opacity values.

It seems like the spec doesn’t constrain us to a specific set of opacity values anymore? It only gives examples via some of their custom themes.