-
Notifications
You must be signed in to change notification settings - Fork 6.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
md-stepper component #508
Comments
@Lordnoname thanks for opening the issue. Here are some initial requirements / thoughts I have for the implementation:
cc @hansl @kara @robertmesserle in case anybody has any further input on the stepper. |
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:
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. |
The first thing I thought when I looked at it was "nice breadcrumbs". If, in fact, those "steps" link to navigation routes using |
@jelbourn @marcysutton Here is an initial version of the design doc i have written: |
Looking forward to this! |
hello, is ther a complete version now? |
@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 :) ) |
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. |
Hi, any news about this component? |
looking forward to this! |
Hi all. Updates? :D |
Hi is there any way to change the numbered svg icons to png images ? |
Is there an ETA for this? |
@eddiejaoude The README lists this feature as a Q3 2017 feature, meaning Jul 1, 2017 – Sep 30, 2017. |
Anything I can do to pitch in on this effort, or is this already close to complete? |
It's already available in |
Closing this since the stepper is in master and will be in the next release |
I have 2 questions:
|
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? |
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. |
@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 :( |
How do you change the icon on this thing ? What's specified in the doc does not work.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
@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) 😄
The text was updated successfully, but these errors were encountered: