Patterns: alternative grid layout to improve keyboard accessibility #52357
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +30 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in e872d85. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5503330560
|
glendaviesnz
changed the title
glendaviesnz
added
[Focus] Accessibility (a11y)
glendaviesnz
changed the title
|
@SaxonF @aaronrobertshaw this is not a perfect alternative to the composite group idea, but I think it has fewer issues, and is something we can improve on over time. A few questions I have:
|
glendaviesnz
commented
Jul 7, 2023
| : undefined | ||
| } | ||
| <li className={ patternClassNames }> | ||
| <button |
There was a problem hiding this comment.
It seems a little odd using a button here, but all the accessibility guidelines I looked at suggested that this is better than trying to make a div behave like a button
There was a problem hiding this comment.
Theoretically, it would be possible to use 'clickable div' elements but to make them fully accessible we should replicate all the native semantics and interaction of a button element, including Enter / Spacebar behaviors, which are different (keydown vs. keyup). That would require an unnecessary amount of ARIA and scripting. Historically, developers started using clickable div elements because a few years ago button elements couldn't be fully styled. Now that modern browsers allow to fully style buttons, it's best to just use a button.
Also, a button element with type="button" had no default action, which allows to not use event.preventDefault().
This was referenced Jul 7, 2023
afercia
reviewed
Jul 7, 2023
| <button | ||
| className={ previewClassNames } | ||
| onClick={ item.type !== PATTERNS ? onClick : undefined } | ||
| onKeyDown={ isUserPattern ? onKeyDown : undefined } |
There was a problem hiding this comment.
Now that the Actions button is keyboard accessible, I'd remove the onKeyDown to delete a pattern via keyboard delete / backspace.
afercia
reviewed
Jul 7, 2023
| <li className={ patternClassNames }> | ||
| <button | ||
| className={ previewClassNames } | ||
| onClick={ item.type !== PATTERNS ? onClick : undefined } |
There was a problem hiding this comment.
When a pattern is not editable, it is good to keep the button focusable for discoverability. Btw, the button doesn't do anything so we should communicate semantically that, with an aria-disabled="true" attribute. Also visually, there should be some indication that the button doesn't do anything.
See Focusability of disabled controls.
afercia
reviewed
Jul 7, 2023
| <Tooltip | ||
| position="top center" | ||
| text={ __( | ||
| 'Theme patterns cannot be edited.' |
There was a problem hiding this comment.
I'm not sure the terminology used here is meaningful for users. What a theme pattern is? As far as I can tell, there's no other reference in the UI to the term theme pattern. The term theme pattern is not presented visually anywhere, nor used in any other non-visual context.
afercia
reviewed
Jul 7, 2023
| </div> | ||
| ) ) } | ||
| <HStack | ||
| aria-hidden="true" |
There was a problem hiding this comment.
Please remove the aria-hidden attribute.. The Actions button is still hidden from assistive technology. When using a screen reader, you can Tab to it but you can't normally nativate to it with native screen reaer arrow navigation.
|
Looks like @afercia already covered most of my thoughts. I'll keep eyes on this once things get a little closer. |
glendaviesnz
force-pushed
the
try/list-for-patterns
branch
from
353bc3a to
e872d85
Compare
glendaviesnz
added
the
Backport to WP 6.7 Beta/RC
|
Thanks for the review @afercia - I think I covered off all the suggestions you made. |
SaxonF
approved these changes
Jul 10, 2023
|
@afercia we had to get this merged to get it into beta4, but can handle any additional tweaks you would like to see as follow up PRs |
glendaviesnz
added
[Type] Bug
tellthemachines
added a commit
that referenced
this pull request
Jul 10, 2023
tellthemachines
removed
Backport to WP 6.7 Beta/RC
|
Cherry-picked to this branch for inclusion in 6.3 I removed the "Needs PHP backport" label as there are no PHP changes in this PR unless I'm missing something 😅 |
Github seems to automatically add that tag sometimes! Definitely no php. |
tellthemachines
added a commit
that referenced
this pull request
Jul 11, 2023
* Post and Comment Template blocks: Change render_block_context priority to 1 (#52364) * Footnotes: fix lingering format boundary attr (#52439) * Footnotes: Fix incorrect anchor position in Firefox (#52425) * Scope CSS rules for the wp admin reset to js support only. (#52376) * Fix: Patterns & template parts: remove "apply globally" option from block settings (#52160) * Advanced styles panel: add an early return * Update index.js * Minor styling changes * Use array of features --------- Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> * make the body of the editor minimmum viewport height so that smaller contents maintain clickability (#52406) * Patterns: Add renaming, duplication, and deletion options (#52270) * Patterns: Update manage pattern links to go to site editor if available (#52403) * [Patterns] Separate sync status into a filter control (#52303) Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> * Patterns: Add missing decoding entities processing in Patterns and Template/Parts pages (#52449) * Fix document title icon appearance (#52424) * Quote block: Add transform to paragraph (#51809) * Add ungroup transform as transform to p * Lint * Update test and snapshot. --------- Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> * remove sidebar group descriptions (#52453) * Patterns: alternative grid layout to improve keyboard accessibility (#52357) * add sync tooltip (#52458) * Patterns: Update section heading levels (#52273) * Ensure that the unsaved title is not persisted when reopening the modal (#52473) * Iframe: avoid asset parsing & fix script localisation (#52405) * Iframe: avoid asset parsing & fix script localisation * Add e2e test for script localisation * Update descriptions (#52468) * Footnotes: show in inserter and placehold (#52445) * Footnotes: show in inserter and placehold * Fix placeholder block membrane; fix copy; add icon, label --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Fix: Focus loss on navigation link label editing on Firefox. (#52428) * Update tooltip (#52465) * Refactor, document, and fix image block deprecations (#52081) * Refactor, document, and fix image block deprecations * Fix v5 attributes & supports * Fix v1 & v2 deprecation tests * Rename deprecated test descriptions * Respect custom aspect ratio (#52286) * add image width and height via css inline style, update width and height attrs to be string * keep width and height as attributes too, keep the attributes as numbers * updates image fixtures * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content (#52241) * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Footnotes: save numbering through the entity provider (#52423) * Footnotes: save numbering through the entity provider * Add sup so no styling is needed at all * Migrate old format * Restore old styles, fix nested attribute queries * Fix anchor selection * Migrate markup in entity provider instead * Fix tests * Fix typo * Fix comment --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Revert "Post editor: Require confirmation before removing Footnotes (#52277)" (#52486) This reverts commit e6426ea. * List block: Fix selected type option (#52472) * Library - make pattern title clickable (#51898) * Use button inside title * Remove href * Preserve roving tab index * Fix link colors to match trunk $gray-600 * Remove redundant var * Amend colors as per review * remove old files again --------- Co-authored-by: scruffian <ben@scruffian.com> * remove status icon (#52457) * Rename block theme activation nonce variable. (#52398) --------- Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Carolina Nymark <myazalea@hotmail.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Rich Tabor <hi@richtabor.com> Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: Héctor <27339341+priethor@users.noreply.github.com> Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: scruffian <ben@scruffian.com> Co-authored-by: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Switches to using a standard
ulwith keyboard tab indexes to try and improve keyboard accessibilityWhy?
Some accessibility issues were identified with the current approach of using a single tab stop.
How?
Replaces
Compositecomponent with a standardulTesting Instructions
My Patternslist still displays and works as expected using the mouseTesting Instructions for Keyboard
My Patternsoption in left navigationScreenshots or screencast
Patterns now has a simple
ulstructure:patterns-keyboard.mp4