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

Filter inputs in component should have aria-label for accessibility #5811

Closed
paraskt opened this issue May 28, 2018 · 1 comment
Closed

Filter inputs in component should have aria-label for accessibility #5811

paraskt opened this issue May 28, 2018 · 1 comment
Assignees
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@paraskt
Copy link

paraskt commented May 28, 2018

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior
Search textbox in p-dropdown does not have associated label, so the screen reader cant read that this is a search text box. People relying only on screen readers will not know what this textbox is for.

Expected behavior
Search textbox in p-dropdown must have associated label

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
https://dequeuniversity.com/rules/axe/2.6/label
Adding effective form labels is absolutely necessary to make forms accessible. The purpose of form elements such as a checkboxes, radio buttons, input fields, etc. is often clear for sighted users, even if the form element is not programmatically labeled. This isn't usually the case for screen reader users. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

Please tell us about your environment:

  • Angular version: 5.X
    5.1.3

  • PrimeNG version: 5.X
    5.2.5

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    chrome, edge

  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

@cagataycivici cagataycivici self-assigned this Jan 11, 2019
@cagataycivici cagataycivici added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Jan 11, 2019
@cagataycivici cagataycivici added this to the 7.0.5 milestone Jan 11, 2019
@cagataycivici cagataycivici changed the title Accessibility: Search textbox in p-dropdown does not have associated label Filter inputs in component should have aria-label for accessibility Jan 24, 2019
@cagataycivici
Copy link
Member

Let's expand it to dropdown, multiselect, listbox, picklist and orderlist as well by adding new ariaFilterLabel prop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

2 participants