Few accessibility features for date picker for better 508 compatibility

[kesava885]

Feature Description

1. 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.
   

2. 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.
   

3. 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.
   

4. 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.
   

5. 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.
   

[jelbourn]

Thanks for the report! In the future, it would be great to file these things as separate issues.

For 1, are you referring to the abbr HTML element? As far as I know, there's no specific attribute for abbreviations.

For 4, you actually can open the datepicker from the text input via keyboard shortcut Alt + Down arrow. Our understanding is that this is a generally well-known shortcut for this type of picker.

For 5, it's not quite clear what you're referring to. Could you clarify which element?

[kesava885]

@jelbourn, Thanks for the update and sure will take a note of that.

For 1, Yeah I mean to say abbr element for the abbreviations. That would be helpful for readers.

For 5, Here is a picture that can help you.

[jelbourn]

I created #16355 for the <abbr> issue

[jelbourn]

For 5, the td element you're referring to is marked as aria-hidden="true". Is it still being read anyway? Does changing it to role="presentation" locally resolve the issue you're seeing?

[jelbourn]

Created #16356 for the years in year-view not being buttons.

[jelbourn]

For 3, we do set focus to the selected year (the <td> specifically). If the screen-reader announces the entire table, that is something out of our control.

[andrewseguin]

@jelbourn Were all the relevant issues broken out into separate issues? Should this be closed?

[jelbourn]

IIRC we did break the this into separate separate issues so it can be closed

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}