Description
A critical accessibility error is triggered in the browser console when interacting with the "Reset Statistics" confirmation dialog. The application’s root element (#root) is being marked with aria-hidden="true", while a descendant element—specifically a Material UI styled button—retains or receives focus.
This violates WAI-ARIA standards because assistive technologies are told to ignore the entire tree, yet the user's focus is trapped within it.
Error Log
Blocked aria-hidden on an element because its descendant retained focus.
The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor.
• Focused Element: button.MuiButtonBase-root (Primary Action Button)
• Ancestor with aria-hidden: div#root
Steps to Reproduce
- Open the pgAdmin4 dashboard and navigate to a PostgreSQL database.
- Execute the following SQL script to create a table with a specific payload in the name:
SQL
CREATE TABLE public."<a href=""javascript:alert(1)"">Firefox" ();
ALTER TABLE public."<a href=""javascript:alert(1)"">Firefox" OWNER to postgres;
- Navigate to the newly created table in the Browser tree.
- Click on the Reset Statistics button in the dashboard or properties view.
- Observe the "Are you sure..." confirmation dialog.
- Inspect the browser console to see the ARIA accessibility warning.
Expected Behavior
When a modal or dialog appears, the background content (#root) should be handled such that focus is properly managed without suppressing the active dialog's accessibility tree. Ideally, the inert attribute should be used, or aria-hidden should only be applied to siblings of the modal, not ancestors of the focused element.
Environment
• Application: pgAdmin4
• UI Framework: Material UI (MUI)
• Context: Reset Statistics Confirmation Dialog
Suggested Fix
As per the W3C specification mentioned in the error:
• Avoid applying aria-hidden="true" to the #root container if the dialog is rendered as a child of that container.
• Consider using the inert attribute on the background content to prevent both focus and visibility issues simultaneously.
Description
A critical accessibility error is triggered in the browser console when interacting with the "Reset Statistics" confirmation dialog. The application’s root element (#root) is being marked with aria-hidden="true", while a descendant element—specifically a Material UI styled button—retains or receives focus.
This violates WAI-ARIA standards because assistive technologies are told to ignore the entire tree, yet the user's focus is trapped within it.
Error Log
Blocked aria-hidden on an element because its descendant retained focus.
The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor.
• Focused Element: button.MuiButtonBase-root (Primary Action Button)
• Ancestor with aria-hidden: div#root
Steps to Reproduce
SQL
CREATE TABLE public."<a href=""javascript:alert(1)"">Firefox" ();
ALTER TABLE public."<a href=""javascript:alert(1)"">Firefox" OWNER to postgres;
Expected Behavior
When a modal or dialog appears, the background content (#root) should be handled such that focus is properly managed without suppressing the active dialog's accessibility tree. Ideally, the inert attribute should be used, or aria-hidden should only be applied to siblings of the modal, not ancestors of the focused element.
Environment
• Application: pgAdmin4
• UI Framework: Material UI (MUI)
• Context: Reset Statistics Confirmation Dialog
Suggested Fix
As per the W3C specification mentioned in the error:
• Avoid applying aria-hidden="true" to the #root container if the dialog is rendered as a child of that container.
• Consider using the inert attribute on the background content to prevent both focus and visibility issues simultaneously.