md-stepper component

Question

md-stepper component

thielpa opened this issue 8 years ago · comments

@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) 😄

Jeremy Elbourn · Answer 1 · Tue May 24 2016 23:49:44 GMT+0800 (China Standard Time)

@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.

Marcy Sutton-Todd · Answer 2 · Sat May 28 2016 03:34:21 GMT+0800 (China Standard Time)

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.

Paul Grenier · Answer 3 · Sat May 28 2016 05:16:06 GMT+0800 (China Standard Time)

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.

Paul Thiel · Answer 4 · Tue May 31 2016 01:05:26 GMT+0800 (China Standard Time)

@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!

Christian Stewart · Answer 5 · Tue Jun 07 2016 00:33:56 GMT+0800 (China Standard Time)

Looking forward to this!

Daniel · Answer 6 · Mon Jul 11 2016 05:02:33 GMT+0800 (China Standard Time)

hello, is ther a complete version now?

Paul Thiel · Answer 7 · Thu Oct 06 2016 02:22:38 GMT+0800 (China Standard Time)

@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 :) )

Jeremy Elbourn · Answer 8 · Thu Oct 06 2016 02:42:48 GMT+0800 (China Standard Time)

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 · Answer 9 · Wed Jan 11 2017 19:07:21 GMT+0800 (China Standard Time)

Hi, any news about this component?

Jeffrey Michelson · Answer 10 · Wed Mar 01 2017 22:14:47 GMT+0800 (China Standard Time)

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

Kun Shao · Answer 11 · Sat Apr 22 2017 04:14:46 GMT+0800 (China Standard Time)

looking forward to this!

Cedric · Answer 12 · Wed May 10 2017 19:29:02 GMT+0800 (China Standard Time)

Hi all. Updates? :D

invaderdevil · Answer 13 · Mon Jun 05 2017 17:39:25 GMT+0800 (China Standard Time)

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

Eddie Jaoude · Answer 14 · Fri Jun 23 2017 20:53:29 GMT+0800 (China Standard Time)

Is there an ETA for this?

CaerusKaru · Answer 15 · Wed Jul 05 2017 01:54:38 GMT+0800 (China Standard Time)

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

Jeremy Keiper · Answer 16 · Fri Sep 08 2017 21:50:19 GMT+0800 (China Standard Time)

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

Rafael Santana · Answer 17 · Fri Sep 08 2017 22:15:56 GMT+0800 (China Standard Time)

It's already available in material2-builds.

Ji Won Shin · Answer 18 · Sat Sep 09 2017 00:47:31 GMT+0800 (China Standard Time)

@jlkeiper #6594

Jeremy Elbourn · Answer 19 · Wed Sep 20 2017 02:57:06 GMT+0800 (China Standard Time)

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

Luis Fernando Planella Gonzalez · Answer 20 · Fri Sep 22 2017 23:07:20 GMT+0800 (China Standard Time)

I have 2 questions:

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);
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?

Jeremy Elbourn · Answer 21 · Sat Sep 23 2017 00:27:16 GMT+0800 (China Standard Time)

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?

Luis Fernando Planella Gonzalez · Answer 22 · Sat Sep 23 2017 01:37:38 GMT+0800 (China Standard Time)

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.

Carlos (Goodwine) · Answer 23 · Sat Sep 23 2017 01:46:58 GMT+0800 (China Standard Time)

@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 · Answer 24 · Fri Nov 03 2017 18:33:33 GMT+0800 (China Standard Time)

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 · Answer 25 · Sat Sep 07 2019 21:02:49 GMT+0800 (China Standard Time)

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.}