Description
Feature Description
-
In the current markup of material date picker, ABBR attribute is missing from it's column headers.
The table used here has number dates as it's row data and acronyms of weekdays as its's column data. In here an ABBR attribute can be added to better assist the screen reader in providing context when navigating within the table.<thead class="mat-calendar-table-header"> <tr> <th aria-label="Sunday" class="ng-star-inserted">S</th> <th aria-label="Monday" class="ng-star-inserted">M</th> <th aria-label="Tuesday" class="ng-star-inserted">T</th> <th aria-label="Wednesday" class="ng-star-inserted">W</th> <th aria-label="Thursday" class="ng-star-inserted">T</th> <th aria-label="Friday" class="ng-star-inserted">F</th> <th aria-label="Saturday" class="ng-star-inserted">S</th> </tr>
Use Case
In here an ABBR attribute can be added to better assist the screen reader in providing context when navigating within the table.
-
In the current markup of material date picker, Please update each of the year div's to include the role of button so that the keyboard and screen reader user can navigate to and be provided proper context and useability.
Use Case
By setting the role attribute to button on the year's markup screen reader can identify and announce it as a button. So that the users can it to their advantage.
-
After launching the date picker and clicking on the Month/Year button, focus is currently set within the section that contains the year selection controls. The issue is that the entire section is read after the selection and not set to the current year as done visually. So after the selection of a year, please set focus to the selected year as done visually.
Use Case
By this change users can be notified visually and contextually since it helps the screen readers to announce and makes more 508 compatible.
-
In the current markup of material date picker, aria-haspopup attribute is currently added incorrectly on the input field instead of the button that triggers the opening of the control. This is confusing since the user will only open the control via the button and not by the input. So suggestion is to remove the aria markup from the input and add it to only the button that actually triggers the opening of the control.
<input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill- monitored ng-pristine ng-valid ng-touched" id="date" matinput="" placeholder="MM/DD/YYYY" aria-haspopup="true" aria-invalid="false" aria-required="false">
Use Case
This change helps the users with screen readers to announce functionality keeps them away from confusing and thus makes more 508 compatible.
-
In the current markup of material date picker, There is a row and TD cells within the data table of the control. There is no need to include the empty row and the TD cell containing the Month name since it does not provide value to the user using the screen reader. So, removing this from the table data will assist the screen reader in announcing the data effectively to the end user.
Use Case
This change helps the screen reader in announcing the data effectively to the end user and helps more towards 508 compatibility.