Add steps component #696
Add steps component #696
Conversation
🦋 Changeset detectedLatest commit: 2cc4d51 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| border-radius: $border-radius-rounded; | ||
| background-color: $secondary; | ||
|
|
||
| &.step-selected { |
There was a problem hiding this comment.
What do you think about something like step-current instead to indicate current progress? Feel free to resolve if you don't see a difference.
| <div class="step"></div> | ||
| <div class="step step-selected"></div> | ||
| </div> | ||
| ``` |
There was a problem hiding this comment.
I'm thinking that that our examples need to be paired with some element containing the description of the current state of the steps: such as <p class="visually-hidden">Step 1 of 5</p>.
Then I think we could add something like at the bottom. But we should also have the main example contain the accessible markup too.
## Accessibility concerns
Although the step component is not interactive, it is also not entirely presentational. Thus, it's recommended that you put `aria-hidden` on the component, while including a `aria-hidden` element that communicates the current state of the user's progress through the steps.
There was a problem hiding this comment.
Nit to @wibjorn's suggestion, this should be
-while including a `aria-hidden` element that communicates the current state of the user's progress through the steps.
+while including a `visually-hidden` element that communicates the current state of the user's progress through the steps.There was a problem hiding this comment.
since I was exactly wrong :D
Task: task-[work-item-number]
Link: preview
Add the steps component
Testing
Additional information
[Optional]
Contributor checklist