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.

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

Dropdown: Support aria-describedby #3319

Closed
2ne opened this issue Sep 14, 2022 · 3 comments · Fixed by #3186 or #3323
Closed

Dropdown: Support aria-describedby #3319

2ne opened this issue Sep 14, 2022 · 3 comments · Fixed by #3186 or #3323
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@2ne
Copy link

2ne commented Sep 14, 2022

Describe the feature you would like to see added

InputText supports aria-describedby and it would be helpful if dropdown and other inputs also supported this property as there is no other way to offer help text to describe the dropdown to a user using a screen reader

Is your feature request related to a problem?

No response

Describe the solution you'd like

Add property aria-describedby to dropdown and all other input types

@2ne 2ne added Status: Discussion Issue or pull request needs to be discussed by Core Team Type: New Feature Issue contains a new feature or new component request labels Sep 14, 2022
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 14, 2022
@melloware melloware added Component: Accessibility Issue or pull request is related to WCAG or ARIA and removed Type: New Feature Issue contains a new feature or new component request labels Sep 14, 2022
@melloware
Copy link
Member

melloware commented Sep 14, 2022

Don't you want ariaLabelledBy which already exists on dropdown not ARIA Described By?

<label value="My Dropdown" id="my-label" />
<Dropdown ariaLabelledBy="my-label"...

@melloware melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 14, 2022
@melloware melloware changed the title Dropdown does not support aria-describedby Dropdown: Support aria-describedby Sep 14, 2022
@2ne
Copy link
Author

2ne commented Sep 14, 2022

aria-labelledby and aria-describedby attributes both reference other elements to calculate text alternatives.

  • aria-labelledby is for the label
  • aria-describedby is for the description

So for the inputText component you use aria-describedby for text underneath the input to explain it. But for inputText you don't need aria-labelledby as you have the id and htmlfor.

<label for="email"/>Email Address</label>
<Dropdown id="email" aria-describedby="email-description></Dropdown>
<p id="email-description">We'll only use this for spam.</p>

@melloware
Copy link
Member

Got it! Let me come up with something clever.

@melloware melloware self-assigned this Sep 14, 2022
@melloware melloware removed the Status: Discussion Issue or pull request needs to be discussed by Core Team label Sep 14, 2022
@melloware melloware added this to the 8.6.0 milestone Sep 14, 2022
melloware added a commit to melloware/primereact that referenced this issue Sep 14, 2022
@mertsincan mertsincan added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Sep 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
3 participants