Components: stepper(guide): example inaccessible in dark mode

[Splaktar]

Documentation Feedback

The example in the "Creating a custom stepper using the CDK stepper" Guide doesn't display properly or meet WAI a11y standards. The step labels and arrows are unreadable.

Affected documentation page:
https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper

[walvekarnikhil]

@Splaktar , can I help in fixing this?
Currently, styles are provided by example-custom-linear-stepper.css
Should we be using neutral colors that can work with both dark & light modes? or we need to use some styles from the pre-built themes?

[Splaktar]

@walvekarnikhil yes, that would be greatly appreciated!

We should remove the hard coded CSS color overrides.

Then instead of

[class.example-active]="selectedIndex === i"

We can probably do something like

[color]="selectedIndex === i ? 'primary' : undefined"

This would use the theme colors which will account for dark/light mode changes.

[walvekarnikhil]

@Splaktar ,
Since this is the CDK example we will not be able to use [color] property for the step buttons.
In the prebuilt themes, we don't have any class which can set the text color.

Please let me know if I am missing something here.

Should we create a style which will work for both dark and light mode?

[Splaktar]

Ah yes, that's a good point! They are native buttons without any Material classes.

If we remove
https://github.com/angular/components/blob/84bfa7cdf061bb7fae6be25ffd745b6baca7b362/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.css#L18

Chrome still applies the user agent stylesheet of

color: -internal-light-dark-color(buttontext, rgb(170, 170, 170));

Which results in black text for both light and dark themes.

If we change the black to

color: inherit;

Then the button picks up the theme color.

Then for the active step,
https://github.com/angular/components/blob/84bfa7cdf061bb7fae6be25ffd745b6baca7b362/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.css#L21-L24

could be changed to the following

.example-step.example-active {
    color: inherit;
    border-bottom: 1px solid;
    font-weight: 600;
}

to pick up the theme's text color (for both the button text and inkbar border) and use font-weight instead of a theme color, in addition to the inkbar, to indicate that the step is selected.

Additionally,
https://github.com/angular/components/blob/84bfa7cdf061bb7fae6be25ffd745b6baca7b362/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/example-custom-linear-stepper.css#L26-L29

needs to be updated to inherit the theme text color and override the user agent stylesheet:

.example-nav-button {
    background: transparent;
    border: 0;
    color: inherit;
}

[walvekarnikhil]

Thanks @Splaktar ,
Here is how it looks now.
Light mode:

Dark mode:

[Splaktar]

LGTM, does it pass the Lighthouse a11y Audit?

[walvekarnikhil]

@Splaktar ,
I am running this with yarn dev-app, I was not able to run a11y audit with that due to accordions.
I am trying to run this with local build for material.angular.io, will try to run the audit on that.

[Splaktar]

Ah yeah, there is no good way to test an example in this repo with the docs site at this time. I guess that we can take a look after this gets merged in.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}