Accessibility: Mini Cart does not return keyboard focus to the button that triggers it when closed.

[amberhinds]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

When closing the Mini Cart modal either via the close button or the escape key, keyboard focus is not returned to the mini cart button. Instead, users are dumped into the footer of the website.

Expected behavior

When a modal is closed, focus must be returned to the element that triggered it.

This ensures that keyboard-only and screen reader users don't lose their place in the page.

See these references for more information:

• ARIA Authoring Practices Guide Dialog (Modal) Pattern
• Focus Modal Not Returned on Deque

Actual behavior

When the modal is closed focus is lost. Hitting Tab puts the user in the address bar.

Steps to reproduce

1. Add the Mini Cart button to a page.
2. Open the Mini Cart modal.
3. Close the modal with the escape key or close button.
4. Hit the Tab key and see that instead of going to the next focusable element on the page, you'll be in the browser address bar.

WordPress Environment

`

WordPress Environment

WordPress address (URL): https://shop.equalizedigital.com
Site address (URL): https://shop.equalizedigital.com
WC Version: 8.4.0
REST API Version: ✔ 8.4.0
WC Blocks Version: ✔ 11.6.2
Action Scheduler Version: ✔ 3.7.1
Log Directory Writable: ✔
WP Version: 6.4.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: ✔

Server Environment

Server Info: nginx
PHP Version: 8.2.14
PHP Post Max Size: 100 MB
PHP Time Limit: 43300
PHP Max Input Vars: 10000
cURL Version: 7.81.0
OpenSSL/3.0.2

SUHOSIN Installed: –
MySQL Version: 8.0.35-27
Max Upload Size: 50 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 8.4.0
WC Database Prefix: wp_
Total Database Size: 11.55MB
Database Data Size: 7.50MB
Database Index Size: 4.05MB
wp_woocommerce_sessions: Data: 0.08MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_ac_segments: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_accessibility_checker: Data: 1.44MB + Index: 0.02MB + Engine InnoDB
wp_accessibility_checker_audit_history: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_accessibility_checker_global_ignores: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_actionscheduler_actions: Data: 1.50MB + Index: 0.83MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.42MB + Index: 0.36MB + Engine InnoDB
wp_admin_columns: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_gf_draft_submissions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_gf_entry: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_entry_meta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_gf_entry_notes: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_form: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gf_form_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gf_form_revisions: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_form_view: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_rest_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.45MB + Index: 0.06MB + Engine InnoDB
wp_postmeta: Data: 1.52MB + Index: 0.56MB + Engine InnoDB
wp_posts: Data: 0.42MB + Index: 0.14MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_addresses: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_operational_data: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_orders: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_wc_orders_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.06MB + Index: 0.05MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.06MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woo_shippment_provider: Data: 0.14MB + Index: 0.00MB + Engine InnoDB
wp_wpforms_payment_meta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wpforms_payments: Data: 0.02MB + Index: 0.14MB + Engine InnoDB
wp_wpforms_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wpmailsmtp_debug_events: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wpmailsmtp_tasks_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_yoast_indexable: Data: 0.05MB + Index: 0.09MB + Engine InnoDB
wp_yoast_indexable_hierarchy: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_yoast_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_yoast_primary_term: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_yoast_seo_links: Data: 0.02MB + Index: 0.03MB + Engine InnoDB

Post Type Counts

attachment: 127
custom_css: 1
customize_changeset: 26
page: 13
post: 3
product: 14
product_variation: 257
shop_order_placehold: 1
wp_global_styles: 1
wp_navigation: 5
wp_template: 5
wp_template_part: 2

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

Active Plugins (16)

Gravity Forms: by Gravity Forms – 2.8.1
Accessibility Checker: Audit History: by Equalize Digital – 1.0.2
Accessibility Checker Pro: by Equalize Digital – 1.5.2
Accessibility Checker: by Equalize Digital – 1.7.0
Accessibility New Window Warnings: by Equalize Digital – 1.0.8
Admin Columns Pro: by AdminColumns.com – 6.4.3
WP Engine Smart Plugin Manager: by WP Engine – 5.17.30
Font Awesome: by Font Awesome – 4.4.0
Gravity Forms Zero Spam: by GravityKit – 1.4.1
Printful Integration for WooCommerce: by Printful – 2.2.7
SimpleTOC - Table of Contents Block: by Marc Tönsing – 6.0.14
Advanced Shipment Tracking for WooCommerce: by zorem – 3.6.5
WooCommerce Stripe Gateway: by WooCommerce – 7.9.0
WooCommerce: by Automattic – 8.4.0
Yoast SEO: by Team Yoast – 21.8
WP Mail SMTP: by WP Mail SMTP – 3.11.0

Inactive Plugins (2)

Akismet Anti-spam: Spam Protection: by Automattic - Anti-spam Team – 5.3
Variation Swatches for WooCommerce: by Emran Ahmed – 2.0.29

Dropin Plugins (2)

advanced-cache.php: advanced-cache.php
object-cache.php: Memcached Redux

Must Use Plugins (5)

Force Strong Passwords - WPE Edition: by Jason Cosper – 1.8.0
WP Engine Cache Plugin: by WP Engine – 1.1.4
WP Engine Seamless Login Plugin: by WP Engine – 1.6.1
WP Engine Security Auditor: by wpengine – 1.1.1
WP Engine System: by WP Engine – 5.0.1

Settings

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to Woo.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

WC Pages

Shop base: #31 - /shop/
Cart: #32 - /cart/
Checkout: #33 - /checkout/
My account: #34 - /my-account/
Terms and conditions: #35 - /refund-returns/

Theme

Name: Twenty Twenty-Four
Version: 1.0
Author URL: https://wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ❌ Not declared

Templates

Overrides: /nas/content/live/edshopprd/wp-content/plugins/woocommerce/packages/woocommerce-blocks/templates/notices/error.php
/nas/content/live/edshopprd/wp-content/plugins/woocommerce/packages/woocommerce-blocks/templates/notices/notice.php
/nas/content/live/edshopprd/wp-content/plugins/woocommerce/packages/woocommerce-blocks/templates/notices/success.php

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
product-variation-management
product-virtual-downloadable
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: customize-store
minified-js
new-product-management-experience
product-external-affiliate
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2024-01-12 22:12:37 -06:00
Options: ✔
Notes: 70
Onboarding: completed

Action Scheduler

Complete: 2,712
Oldest: 2023-12-18 21:21:19 -0600
Newest: 2024-01-12 09:31:39 -0600

Failed: 2
Oldest: 2024-01-03 00:25:12 -0600
Newest: 2024-01-03 00:25:12 -0600

Pending: 5
Oldest: 2024-01-12 09:32:39 -0600
Newest: 2024-01-12 20:50:19 -0600

Status report information

Generated at: 2024-01-12 09:31:52 -06:00
`

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[tarunvijwani]

@amberhinds Thank you for letting us know about the issue. I was able to reproduce it and have moved the ticket to our backlog for future development.

[amberhinds]

Thanks @tarunvijwani. Out of curiosity, how long would you expect a resolution to take?

[ralucaStan]

@pmcpinto I'm including this as a proposal for next cycle

[pmcpinto]

@pmcpinto I'm including this as a proposal for next cycle

I think we should move it to cycle 3, considering the team's bandwidth for the upcoming weeks.

[amberhinds]

What's the ETA for this out of curiosity?

[senadir]

I spent some time trying to get this to work but I'm still not sure. @Aljullu you initially built this so I'm asking for help.

I initally started converting the drawer to dialog element but wasn't sure if that would fix it or not.

it seems the drawer component is correctly using useFocusReturn which should in theory return the focus, modifying that hook I can see that it remembers what triggered the dialog but isn't returning to it.