pgadmin-org / pgadmin-org/pgadmin4

Accessibility Error: aria-hidden="true" conflict with focused descendant on <button> element.

Open
#9,865 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug
Dominant language
Python
Stars
3.8k
Forks
891
Avg merge
4d 7h
Merged PRs (30d)
8

Description

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

  1. Open the pgAdmin4 dashboard and navigate to a PostgreSQL database.
  2. 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;
  3. Navigate to the newly created table in the Browser tree.
  4. Click on the Reset Statistics button in the dashboard or properties view.
  5. Observe the "Are you sure..." confirmation dialog.
  6. 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.

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Reset Statistics confirmation dialog in the pgAdmin dashboard with the PostgreSQL table name from the report, then inspect the browser console and the #root element. Trace the Material UI dialog and focused button behavior. Done means the accessibility warning is gone and focus remains available to assistive technologies when the dialog opens.

Written by the indexing model from the issue text.

Assessment

Tech stack
postgresql
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.