Skip to content

Autocomplete accessibility: aria-hidden #19577

@fkwq34

Description

@fkwq34

Describe the bug

PrimeNG Autocomplete sets aria-hidden="true" on the clear icon render path, including the wrapper used for custom pTemplate="clearicon" content.

When consumers provide a custom clear icon template that contains focusable content (for example a button, link, or element with tabindex="0"), accessibility scanners report:

Rule: aria-hidden-focus
WCAG: 4.1.2 Name, Role, Value
This creates a hidden-from-AT container that can still contain keyboard-focusable descendants.

Pull Request Link

#19578

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-tfu5gxqq?file=src%2Fapp%2Fapp.component.html

Environment

A library that wraps primeng and provide its own styling.

Angular version

21.0.0

PrimeNG version

v21

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  1. Use p-autocomplete with showClear.
  2. Provide a custom clear icon template via pTemplate="clearicon" containing a focusable element.
  3. Run accessibility checks. And check dev tools to see 'aria-hidden' is present.
  4. Observe aria-hidden-focus on .p-autocomplete-clear-icon.

Expected behavior

Autocomplete clear icon container should not enforce aria-hidden="true" on the wrapper used for custom clear icon templates, because consumers may provide interactive/focusable template content.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: AccessibilityIssue or pull request is related to WCAG or ARIAType: BugIssue contains a bug related to a specific component. Something about the component is not working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions