Skip to content

Few accessibility features for date picker for better 508 compatibility #16317

Closed
@kesava885

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    AccessibilityThis issue is related to accessibility (a11y)area: material/datepickerfeatureThis issue represents a new feature or feature request rather than a bug or bug fixneeds: clarificationThe issue does not contain enough information for the team to determine if it is a real bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions