Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Guide: Place focus on the guide's container instead of its first tabbable #52300

Merged
merged 2 commits into from
Jul 5, 2023
Merged

Guide: Place focus on the guide's container instead of its first tabbable #52300

merged 2 commits into from
Jul 5, 2023

Conversation

noisysocks
Copy link
Member

What?

Fixes #52284.

Updates the Guide component to place focus on the container when it mounts and when the page changes.

Why?

The Guide component doesn't always have an X button anymore (see #52014) and so the previous focus logic of placing focus on the first tabbable element is no longer correct.

Testing Instructions

  1. Open the site editor and edit a page or template.
  2. Select Options → Welcome Guide to show the welcome guide if necessary.
  3. Note that focus is on the guide's container.
  4. Press Tab.
  5. Note that focus is on the Get started button.
  6. Open the post editor.
  7. Select Options → Welcome Guide to show the welcome guide if necessary.
  8. Note that focus is on the guide's container.
  9. Press Tab.
  10. Note that focus is on the X button.

@noisysocks noisysocks added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] NUX Anything that impacts the new user experience [Type] Regression Related to a regression in the latest release labels Jul 5, 2023
@noisysocks noisysocks added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 5, 2023
tellthemachines
tellthemachines approved these changes Jul 5, 2023
View reviewed changes
Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tested with VoiceOver/Safari and can confirm that focus now lands on the modal element and text content can be read by pressing Down Arrow.

@noisysocks noisysocks enabled auto-merge (squash) July 5, 2023 04:39
@noisysocks noisysocks merged commit 58ba018 into trunk Jul 5, 2023
51 checks passed
@noisysocks noisysocks deleted the fix/guide-focus branch July 5, 2023 06:15
@github-actions github-actions bot added this to the Gutenberg 16.2 milestone Jul 5, 2023
@afercia afercia mentioned this pull request Jul 5, 2023
Open
@afercia
Copy link
Contributor

afercia commented Jul 5, 2023

Thanks @noisysocks for the quick fix ❤️

tellthemachines pushed a commit that referenced this pull request Jul 7, 2023
@noisysocks @tellthemachines
Guide: Place focus on the guide's container instead of its first tabb…
5ab9b67 
…able (#52300)

* Guide: Place focus on the guide's container instead of its first tabbable

* Update CHANGELOG
@tellthemachines tellthemachines removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jul 7, 2023
tellthemachines added a commit that referenced this pull request Jul 7, 2023
@tellthemachines @SaxonF
@noisysocks @glendaviesnz @jameskoster @getdave @Mamaduka @draganescu @hellofromtonya @youknowriad @ellatrix @ramonjd @kevin940726 @richtabor @aaronrobertshaw @scruffian @stokesman @cbravobernal @ntsekouras @t-hamano @TimothyBJacobs @mcsf
Update/first pre beta 4 (#52400)
20ea9f1 
* add hint to show template part move (#52395)

* Page Content Focus: Ignore page content within a Query Loop block (#52351)

* Block Editor: Pass context and className props to editor.BlockEdit filter

* Page Content Focus: Ignore content blocks that are within a Query Loop

* Patterns: stop endless snackbars appearing (#52012)

* Patterns: Distinguish between theme patterns and template parts in category list (#52382)

* Allow opt out of auto-creation of Navigation fallback (#52319)

* Update welcome guide copy (#52282)

* Patterns: Update pattern copy (#52340)

* Post Title: The changes should be reflected when previewing a post (#52369)

* Update fixed block toolbar (#52123)

* update the icons for expanding and collapsing the fixed block toolbar

* hide the tools selector item in document tools for fixed toolbar preference

* reveal undo, redo and list view buttons

* tweaks for show icon labels and hide zoom out for top toolbar option

* improve the responsiveness of the fixed block toolbar

* remove the overflow rule - bad experiment

* update top toolbar test with the new label for buttons

* update the toolbar tests to account for moving the collapse button

* Drop PHP 5.6 CI jobs (#52345)

* Remove PHP 5.6 PHPUnit CI job
* Raise version in phpcs / WPCS

* Patterns: Add handling of sync status to the wp-admin patterns list page (#52346)

* Exit template focus when opening the W menu (#52235)

* wrap buttons (#52249)

* Update the behavior of the cached undo/redo stack (#51644)

Co-authored-by: Ella van Durpe <ella@vandurpe.com>

* Adjust top position (#52248)

* Patterns: add a hint about the rename of reusable blocks to menu and inserter  (#51771)

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>

* Site Editor: update headings hierarchy in the 'Manage all' screens (#52271)

* This commit:
- updates heading levels on the template and template part pages
- passes a `level` prop to Header from Page

* update h2 size

* Rolling back custom sizes

* Rolling back unnecessary classNames
There was a rogue space in trunk. Let's let it live

* Check randomizer experiment is enabled before rendering button (#52306)

* Hide parent selector when parent is 'disabled' or 'contentOnly' (#52264)

* Fix incorrect aria-describedby attributes for theme patterns (#52263)

* Patterns: rename sync_status and move to top level field on rest return instead of a meta field (#52146)

* Fix default block dimensions visibility (#52256)

* core/heading

* core/details

* core/list

* core/table

* core/video

* core/verse

* core/social-links

* core/site-title

* core/site-tagline

* core/site-logo

* core/post-time-to-read

* core/gallery

* core/code

* core/categories

* core/audio

* core/archives

* Patterns: Display all custom template part areas in sidebar nav (#52355)

* Revert phpcs back to PHP 5.6 (#52384)

Reverts phpcs PHP compatibility version back to 5.6.

* Check if experiment enabled fr this time (#52315)

* Navigation: Remove one preloaded endpoint (#52115)

* default to showing status (#52226)

* Command palette: rename (#52153)

* Revise use of “command menu” to “command palette”.

Dropping "global" where it was used as well.

* Find “command center” and replace with “command palette”

* Image block and behaviors: Fix some warnings (#52109)

* Fix first warning

* Fix second warning - dividing a NaN

* Turn off DFM for style book and style editing (#52117)

* Add confirmation step when deleting a Template (#52236)

* [Command Palette]: Remove suggestion for deleting templates/parts (#52168)

* Update stepper styling in Home template details panel (#51972)

* Update stepper styling

* Remove !important

* [Edit Post]: Add toggle fullscreen mode and list view commands (#52184)

* Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu (#52222)

* Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu

* Move lines

* !important (#52025)

* Navigation in Site View: Readd the edit button (#52111)

* Fix UnitControl crashing on regex control characters.

Units are now escaped using `escapeRegExp` before concatenating them into a regular expression.

Fixes #52211.
---------

Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>

* Patterns: rename wp_block sync_status postmeta to wp_pattern_sync_status (#52232)

---------

Co-authored-by: Kai Hao <kai@kaihao.dev>

* Site Editor Frame: Ignore Spotlight in view mode (#52262)

* Guide: Place focus on the guide's container instead of its first tabbable (#52300)

* Guide: Place focus on the guide's container instead of its first tabbable

* Update CHANGELOG

* Post editor: Require confirmation before removing Footnotes (#52277)

* Post editor: Require confirmation before removing Footnotes

Context: #52176

* BlockRemovalWarningModal: Limit width to 40rem

* Explain that footnotes are preserved. Add warning to Site Editor

* Fix react-dropdown-menu version to avoid breaking change from one of … (#52356)

* Fix react-dropdown-menu version to avoid breaking change from one if its dependencies.

* Changelog update

* move changelog entry to the right place

* Update package-lock

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
Co-authored-by: Robert Anderson <robert@noisysocks.com>
Co-authored-by: Glen Davies <glendaviesnz@users.noreply.github.com>
Co-authored-by: James Koster <james@jameskoster.co.uk>
Co-authored-by: Dave Smith <getdavemail@gmail.com>
Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com>
Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>
Co-authored-by: Tonya Mork <tonya.mork@automattic.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Ella van Durpe <ella@vandurpe.com>
Co-authored-by: Ramon <ramonjd@users.noreply.github.com>
Co-authored-by: Kai Hao <kevin830726@gmail.com>
Co-authored-by: Rich Tabor <hi@richtabor.com>
Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Co-authored-by: Ben Dwyer <ben@scruffian.com>
Co-authored-by: Mitchell Austin <mr.fye@oneandthesame.net>
Co-authored-by: Carlos Bravo <37012961+c4rl0sbr4v0@users.noreply.github.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Timothy Jacobs <timothy@ironbounddesigns.com>
Co-authored-by: Kai Hao <kai@kaihao.dev>
Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tellthemachines tellthemachines tellthemachines approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Feature] NUX Anything that impacts the new user experience [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Regression Related to a regression in the latest release
Projects
None yet
Milestone
Gutenberg 16.2
Development

Successfully merging this pull request may close these issues.

Welcome guides: improve initial focus to avoid skipping content
3 participants
@noisysocks @afercia @tellthemachines