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.

Sign up for GitHub

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

Jump to bottom

IgxDatePicker accessibility issue #8080

Closed
teodosiah opened this issue Sep 2, 2020 · 1 comment · Fixed by #8182
Closed

IgxDatePicker accessibility issue #8080

teodosiah opened this issue Sep 2, 2020 · 1 comment · Fixed by #8182
Assignees
@IvayloG
Labels
🐛 bug Any issue that describes a bug 📅 date-picker 🔥 severity: high version: 9.1.x version: 10.1.x version: 10.2.x ♿ a11y When the issue or PR is related to accessibility ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.

Comments

@teodosiah
Copy link
Contributor

Description

Using the following code for igx-datepicker

 <igx-date-picker
            [label]="'Date of Birth'"
            name="dateOfBirth"
            [(ngModel)]="generalInfoObj.retailMemberPii.dateOfBirth"
          ></igx-date-picker>

Unfortunately generated code fails accessibility testing.

  • igniteui-angular version: 10.1.2

Expected result

Input fields should always have a description that is explicitly associated with the field to make sure that users of assistive technologies will also know what the field is for.
If the input field has a visible description indicating the purpose of the field, this description should be explicitly associated to the input field either as an HTML label or using the WAI-ARIA attribute 'aria-labelledby'.
If it is not possible to add a visible description, either add a mouseover text ('title' attribute) to the input field or create an invisible label using the WAI-ARIA attribute 'aria-label'.
@valadzhov valadzhov self-assigned this Sep 9, 2020
@valadzhov valadzhov added 🛠️ status: in-development Issues and PRs with active development on them and removed 🆕 status: new labels Sep 9, 2020
@Lipata Lipata assigned IvayloG and unassigned wnvko and valadzhov Sep 14, 2020
@IvayloG IvayloG added 🛠️ status: in-development Issues and PRs with active development on them and removed 🆕 status: new labels Sep 16, 2020
@IvayloG
Copy link
Contributor

IvayloG commented Sep 18, 2020

A complete ARIA implementation for this component will be implemented as part of the #6346

IvayloG added a commit that referenced this issue Sep 18, 2020
@IvayloG
fix(datepicker): Add aria-labelledby #8080
4e0c734
@IvayloG IvayloG mentioned this issue Sep 18, 2020
Merged
14 tasks
@IvayloG IvayloG added ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged. ❌ status: awaiting-test PRs awaiting manual verification and removed 🛠️ status: in-development Issues and PRs with active development on them labels Sep 18, 2020
@IvayloG IvayloG removed the ❌ status: awaiting-test PRs awaiting manual verification label Sep 18, 2020
IvayloG added a commit that referenced this issue Sep 21, 2020
@IvayloG
chore(datepicker): Fix merge and test issues #8080
1b81e13
IvayloG added a commit that referenced this issue Sep 23, 2020
@IvayloG
fix(datepcker): Add aria attribute #8080
1ac5f8f
@IvayloG IvayloG mentioned this issue Sep 23, 2020
Merged
14 tasks
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
fix(datepicker): Add aria-labelledby #8080
4509500 
chore(datepicker): Fix merge and test issues #8080

chore(datepicker): Set prop public
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
test(datepicker): fix ARIA tests #8080
a3b47a0
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
test(datepicker): fix ARIA tests #8080
5058f4d 
# Conflicts:
#	projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
fix(datepcker): Add aria attribute #8080
cc5002f
@IvayloG IvayloG mentioned this issue Sep 24, 2020
Merged
14 tasks
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
fix(datepcker): Add aria attribute #8080
5ac80c8 
# Conflicts:
#	CHANGELOG.md
IvayloG added a commit that referenced this issue Sep 24, 2020
@IvayloG
test(datepicker): fix ARIA tests #8080
27fb0b2 
# Conflicts:
#	projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

# Conflicts:
#	projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
Lipata pushed a commit that referenced this issue Sep 25, 2020
@IvayloG
feat(datepcker): Add aria attribute #8080 (#8199)
625b3ef
Lipata pushed a commit that referenced this issue Sep 25, 2020
@IvayloG
feat(datepcker): Add aria-labelledby attribute #8080 (#8199)
a23069b
Lipata pushed a commit that referenced this issue Sep 25, 2020
@IvayloG
feat(datepcker): Add aria-labelledby attribute #8080 (#8199)
503ed7a
@Lipata Lipata removed their assignment Oct 1, 2020
@kdinev kdinev added ♿ a11y When the issue or PR is related to accessibility and removed accessibility labels Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IvayloG IvayloG

Labels
🐛 bug Any issue that describes a bug 📅 date-picker 🔥 severity: high version: 9.1.x version: 10.1.x version: 10.2.x ♿ a11y When the issue or PR is related to accessibility ✅ status: resolved Applies to issues that have pending PRs resolving them, or PRs that have already merged.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add aria-labelledby for input field IgniteUI/igniteui-angular
6 participants
@kdinev @Lipata @IvayloG @wnvko @valadzhov @teodosiah