Spin-off from #2917777-23: Improvements to the styling, grouping, etc. of the Layout Builder UI actions form.
Problem/Motivation
"Save layout" is a button, but "discard changes" and "revert to default" are links. All three look like buttons though. This has a few problems:
- Links which look like buttons don't behave as expected. Buttons, when focused, are operated with enter or the space key, but links can only be operated with the enter key.
- Buttons which look like links can confuse (partially) sighted screen reader users; they are announced as links, and are missing from the "list all buttons" tool. It can also make conversations about the UI confusing (e.g. tech support says it's a button, but it isn't).
Proposed resolution
Use HTML buttons for "discard changes" and "revert to defaults"
Remaining tasks
TODO
User interface changes
Better semantics for assistive technology. More predictable operation for sighted keyboard users.
API changes
TODO
Data model changes
TODO
Comment | File | Size | Author |
---|---|---|---|
#13 | Edit layout for qwer Drupal 2019-03-05(2).png | 166.53 KB | tim.plunkett |
#13 | Edit layout for qwer Drupal 2019-03-05(3).png | 165.94 KB | tim.plunkett |
#10 | 3037113-button-10-interdiff.txt | 1.55 KB | tim.plunkett |
#10 | 3037113-button-10.patch | 8.44 KB | tim.plunkett |
#8 | 3037113-button-8-interdiff.txt | 1.03 KB | tim.plunkett |
Comments
Comment #2
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedComment #3
tim.plunkettI'd have to find where I copied this behavior from, but it was because both of those links redirect to a confirmation form. Whereas the save button is an action
Comment #4
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThe button vs. link distinction is about actions vs navigation. Revert-to-defaults and discard-changes are actions, not navigation.
The fact that an action goes via an intermediate confirmation form, or a separate URL, doesn't warrant a link. It's OK for buttons to result in moving to a different URL; that's normal form behaviour.
.
Comment #5
drummCorrecting the accessibility tag. There was a duplicate tag named “accessibility.”
Comment #6
tim.plunkettComment #8
tim.plunkettWhoops, only finished part of my own refactor.
Comment #10
tim.plunkettComment #11
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedPatch #10 looks good to me, the code changes are easy to understand. I manually tested it in Firefox 65 and Chrome 72.
Comment #12
xjmScreenshots pretty-please. :)
Comment #13
tim.plunkettI honestly don't know which is which screenshot...
The point is that we styled them as buttons before, but now the markup is different.
Before
After
Before?
After?
Comment #15
webchickAwesome-sauce! An accessibility fix that's simple to review and visually identical!
Committed and pushed to 8.7.x. Thanks!
Comment #16
andrewmacpherson CreditAttribution: andrewmacpherson as a volunteer and at Annertech commentedThe buttons vs links problem is widespread in Drupal core. The approach here could be applied in lots of other places, but may run afoul of backwards compatibility problems. The cool thing about experimental modules is we can address this before BC is relevant. I'll start a broader plan for to address this elsewhere in core.