md-stepper component

[thielpa]

@jelbourn Here is the component request issue for the MdStepper component with all information needed (hopefully).
Material Specs
There is already an issue in material1 with many upvotes.
So I begin now with a basic design doc.
BTW I already made parts of the component in the 48h of horror-coding (ng-attack) 😄

[jelbourn]

@Lordnoname thanks for opening the issue. Here are some initial requirements / thoughts I have for the implementation:

• It's effectively the same behavior as Tabs, so the two components should share as much code as possible, in addition to having a similar API surface. @robertmesserle recently committed the initial version of tabs. You can see the design doc here.
• The stepper must be accessible for people using only a keyboard and screen-reader. I'm not sure how a stepper is generally presented from an accessibility context; this will likely require some research and experimentation. (cc @marcysutton)
• Any text and ARIA labels need to be internationalized. Our current approach for this is to create a class named something like StepperLocale that's injected by the component that contains any locale-specific information and can be provided by the user (while we have a default implementation in en-US).
• The labels for the steps should support any arbitrary template, similar to how the tabs support arbitrary templates for tab labels (in addition to supporting a straight text label property).
• We probably want to support having the stepper part of the UI separate from the content (similar how we're going to support having the tab-bar and the tab-content in separate places).
• While not necessary in an initial version, users should be able to set a custom icon for a step.
• Avoid bundling any icons in the initial version- we're not quite settled on how we want to bundle icons into components yet.
• As far as I can tell, the different flavors of stepper are are exactly the same behavior, just with different templates. This should probably be implemented as a single class that contains all of the logic, with child component classes that add no behavior and just include a specific template.
• I'm thinking that the actual buttons to move between steps should be inside the step content with the stepper providing APIs to move between steps. This will be the most flexible approach to letting users do whatever they want with the component.

cc @hansl @kara @robertmesserle in case anybody has any further input on the stepper.

[marcysutton]

There is a lot going on with this spec in terms of user interaction. I don't think it's as simple as "reuse tabs" for accessibility, particularly when you get into editable steps and mobile. Here are a few things I noted from looking at the design spec:

First off, ARIA tabs may work but they are only worth considering if the interaction isn't confusing for actual screen reader users. There has been a lot written about this pattern recently, I recommend reading up on it before implementing. Particularly, be aware that the tabs pattern requires one tab stop and the arrow keys/space bar to navigate, and that the content must make sense in tabpanels. The various mobile designs deviate the most from this.

Other random thoughts:

• The label for the stepper icon button (which I believe takes focus, but I couldn't tell from the spec) must include the text to the right of it.
• There is no "aria-optional" property, so you'll have to indicate something is optional with a localized string as part of the icon button. Basically you can't semantically require all tabs or make one optional. aria-required is for custom form controls.
• If you do go with ARIA tabs, editable steps will have to be indicated with a text input, such as a native input or contenteditable element (with an accessible name). This will take some experimentation.
• Error states will have to be indicated somehow. aria-invalid only works for form controls. I'm starting to notice a theme here: form controls may play a larger role (no pun intended)
• Interactive content in inactive steps should be disabled/hidden (just like inactive Tabs)

Maybe they should be driven by radio buttons instead of tabs? It may require everything be wrapped in a form element to ensure screen readers enter forms mode, but it's worth considering for what you'd get for free.

[AutoSponge]

The first thing I thought when I looked at it was "nice breadcrumbs". If, in fact, those "steps" link to navigation routes using a tags, I think many of @marcysutton's concerns may get handled. How to make a "step" required may still cause issues but my first crack at it would probably involve a message (aria-live for screen readers) followed by the navigation to the required "step" route when needing to complete a skipped step and a warning when the user attempts to navigate away without completing a required step.

[thielpa]

@jelbourn @marcysutton Here is an initial version of the design doc i have written:
https://docs.google.com/document/d/1QBzoua3HgPdlTZHqOgWK2C5eJUygFZxW18LpYjQfkWM/edit?usp=sharing
Feel free to improve and add the final accessibility thoughts!

[paralin]

Looking forward to this!

[odyright]

hello, is ther a complete version now?

[thielpa]

@jelbourn @marcysutton Ping on reviewing my initial version of the design doc (I can understand, that there are currently other issues/topics with higher priorities :) )

[jelbourn]

Sorry for this falling to the back-burner; stepper isn't one of the components we consider to be critical, and we've been focusing on getting those done to get to beta.

My main concern with the design was the accessibility story. You mention keyboard shortcuts, but the more important question is how the stepper presents itself to a screen reader. Marcy made some good points about it being different enough from tabs that the approach isn't really the same. Somehow the component as a whole has to present itself as stepper to the screen-reader user in a sensible way, requiring more semantic presentation than just adding aria-labels to the step headers.

For now we don't really have the cycles to work on this ourselves, but I'd be happy to see more ideas on the a11y workflow.

[tomasgarzon]

Hi, any news about this component?

[ccpony]

Check out https://teradata.github.io/covalent/#/components/steps

[kunshao-msft]

looking forward to this!

[cedpoilly]

Hi all. Updates? :D

[invaderdevil]

Hi is there any way to change the numbered svg icons to png images ?

[eddiejaoude]

Is there an ETA for this?

[CaerusKaru]

@eddiejaoude The README lists this feature as a Q3 2017 feature, meaning Jul 1, 2017 – Sep 30, 2017.

[jlkeiper]

Anything I can do to pitch in on this effort, or is this already close to complete?

[rafaelss95]

It's already available in material2-builds.

[g1shin]

@jlkeiper #6594

[jelbourn]

Closing this since the stepper is in master and will be in the next release

[luisfpg]

I have 2 questions:

1. Maybe a bit late, but why doing distinct components for md-vertical-stepper and md-horizontal-stepper instead of setting the orientation via attribute?
   This way making responsive steppers is hard, as one needs to duplicate all steps inside the stepper for both cases. An example of a responsive stepper can be found on https://teradata.github.io/covalent/#/components/steps (but I'm sticking with the 'official' material components);

2. I didn't find any EventEmitters called when a step changes. For example, if I need to fetch data dynamically based on the previous step, how can that be done?

[jelbourn]

For why separate components: we wanted to leave the stepper open to adding more variants without ballooning the size/complexity of a single component.

For the event: can you open a feature-request issue?

[luisfpg]

Regarding the separated components, I understand it from the library maintainers POV, but it complicates things for users of Angular Material, because the horizontal steppers are a no-go on portrait mobile screens, and being mobile-first, in order to support both cases, each step needs to be duplicated because of the 2 components. Has other effects, such as using the *ngIf effectively destroys the component state and instantiates new ones. So, for example, if the user rotates the phone with something filled in, and the stepper changes orientation, the state is lost.

Regarding the event, I've reported #7259.

[Goodwine]

@luisfpg I would expect the horizontal stepper to transform in mobile screens to something like the material guide mentions, but it looks like it doesn't :(
(from: https://material.io/guidelines/components/steppers.html#steppers-types-of-steps)

[cedvdb]

How do you change the icon on this thing ? What's specified in the doc does not work.

<mat-horizontal-stepper icon="done">
    <mat-step label="Introduction" icon="done">
      <info-request-intro-app></info-request-intro-app>
    </mat-step>

    <mat-step label="from" icon="done">
      <info-request-form-app></info-request-form-app>
    </mat-step>

    <mat-step label="Validation" icon="done">
      <info-request-validation-app></info-request-validation-app>
    </mat-step>
  </mat-horizontal-stepper>

[angular-automatic-lock-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.}