docs(list-group): Remove disabled for readonly example and fix SR for disabled link #41142
Conversation
|
Hello @julien-deramond , I am working on the accessibility in my project and noticed that with list-group there is an issue with SR while reading the disabled link + the disabled on readonly doesn't make sense (saw that it is mentioned in the #40752). I wonder what do you think about a small rearrangement with disabled state ? We can also add the note that with |
|
@julien-deramond I think this makes sense, I'm fine to consolidate the docs here. Also /cc @patrickhlauke for quick eyes. |
|
|
||
| Use `<a>`s or `<button>`s to create _actionable_ list group items with hover, disabled, and active states by adding `.list-group-item-action`. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like `<li>`s or `<div>`s) don't provide a click or tap affordance. | ||
|
|
||
| Add `.disabled` to a `.list-group-item` to make it _appear_ disabled and `aria-disabled="true"` to inform the assistive technology that the element is disabled. |
There was a problem hiding this comment.
this would then be a good place to reintroduce the will also require custom JavaScript to fully disable their click events... that was removed
There was a problem hiding this comment.
and can preface this with "for links, ...". then do a separate paragraph for buttons, with the actual disabled attribute
There was a problem hiding this comment.
Fully agree with the links ! For the buttons there is a paragraph just after the link example, probably it is more fitting to keep it there to have the natural flow of context. What do you think?
MarkoOleksiyenko
force-pushed
the
a11y-list-group
branch
from
6f7131f to
8dcfc83
Compare
3 participants
Description
Moving the Disabled section into Links and Buttons and fixing the SR for disabled link example
Motivation & Context
List-group non-interactive examples should not be disabled and are ignored by the assistive technology.
I propose to move the Disabled section into the Links and buttons with a precision on how to disable it.
In addition to that the Disabled Link example has to include the href="#" for the SR to properly announce that it is unavailable.
Type of changes
Checklist
npm run lint)Live previews
Related issues
#40752