Conversation
…into mpopov/calendar-accessibility
…niteui-angular into mpopov/calendar-accessibility � Conflicts: � projects/igniteui-angular/src/lib/calendar/calendar.component.html � projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
…niteui-angular into mpopov/calendar-accessibility � Conflicts: � projects/igniteui-angular/src/lib/calendar/calendar.component.html � projects/igniteui-angular/src/lib/calendar/calendar.component.ts
…niteui-angular into mpopov/calendar-accessibility
…into mpopov/calendar-accessibility
…ickers inside the calendar
…into mpopov/calendar-accessibility
…translated strings
…into mpopov/calendar-accessibility
…nto mpopov/calendar-accessibility
…into mpopov/calendar-accessibility � Conflicts: � projects/igniteui-angular/src/lib/calendar/calendar.component.html
projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html
Show resolved
Hide resolved
zdrawku
left a comment
There was a problem hiding this comment.
As we discussed with Damyan, his comment will be addressed with a future release
zdrawku
left a comment
There was a problem hiding this comment.
@desig9stein could you please update the readme.md file and changelog if necessary
…ster' into mpopov/calendar-accessibility-master
damyanpetev
left a comment
There was a problem hiding this comment.
Requesting changes mainly for the localization strings comments, the rest might be logged as separate issue.
| <div class="igx-calendar__body-row"> | ||
| <div *ngIf="showWeekNumbers" class="igx-calendar__label igx-calendar__label--week-number"> | ||
| <div role="row" class="igx-calendar__body-row"> | ||
| <div role="columnheader" *ngIf="showWeekNumbers" class="igx-calendar__label igx-calendar__label--week-number"> |
There was a problem hiding this comment.
Thanks for adding this 👍, NVDA reads rows and column headers with without the week number being specified a header, you end with 8 columns and 7 weekday headers and the reading is skewed when numbers are active.
| <div class="igx-calendar__body"> | ||
| <div class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)"> | ||
| <span [igxCalendarYear]="year" [date]="date" (onYearSelection)="selectYear($event)" *ngFor="let year of decade; trackBy: yearTracker"> | ||
| <ul class="igx-calendar__body-column" (wheel)="scroll($event)" (pan)="pan($event)"> |
There was a problem hiding this comment.
Okay, something bothers me about this one. It's not quite right describing it as a list. Some AT do read the list when entering and "List with 7 items" or "4 out of 7" are not really descriptive of how this component behaves. It's and endless scroll.. or spin
So quite a lot like this: https://www.w3.org/TR/wai-aria-practices/examples/spinbutton/datepicker-spinbuttons.html
I'd love to say you can get away with reverting these back to div/span and binding the role in the igxCalendarYear directive in a similar way as it's done for the tabindex:
@HostBinding('attr.role')
public get role(): string {
return this.isCurrentYear ? 'spinbutton' : null;
}
@HostBinding('attr.aria-valuenow')
public get valuenow(): number {
return this.isCurrentYear ? this.date.getFullYear() : null;
}This works for the most part, except when navigating the year list items actually shift positions in the DOM for whatever reason - that has the unfortunate effect of announcing the spin button every time since you focus a new element each time :/
PS: Also NVDA insists on navigating lists on its own (haven't found the setting to stop that) and thus swallows the key up/down events and the list never scrolls for me, so that'll fix that as well.
There was a problem hiding this comment.
If this proves too complicated for now I'm down with logging an additional issue to improve the years picker/view.
projects/igniteui-angular/src/lib/calendar/calendar.component.html
Outdated
Show resolved
Hide resolved
projects/igniteui-angular/src/lib/calendar/calendar.component.html
Outdated
Show resolved
Hide resolved
projects/igniteui-angular/src/lib/calendar/calendar.component.html
Outdated
Show resolved
Hide resolved
projects/igniteui-angular/src/lib/core/i18n/calendar-resources.ts
Outdated
Show resolved
Hide resolved
…ster' into mpopov/calendar-accessibility-master
Closes #6272
Additional information (check all that apply):
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)