fix(material/datepicker): add aria labels to `<input/>`s for Start/En… by zarend · Pull Request #24949 · angular/components

zarend · 2022-05-21T01:24:50Z

Description

Give matDateStart aria label of "Start Date" and give matDateEnd
a label of "End Date" by wrapping in a <label> element. Apply the aria
label of the form field to the <mat-date-range-input> component, which
has role of group. Previously the placeholder was used to communicate
which of the inputs was the start date and which was the end date.

Only affects the DOM structure and a11y tree. Does not change the visual appearance.

Consider the Basic date range picker
example:

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  ...
</mat-form-field>

Previously, it would produce an accessibility tree that looks something
like this.

group "Enter a date range"
  LabelText
    StaticText "Enter a date range"
    textbox "Enter a date range"
  Textbox "End date"

Problems with this approach.

Screen reader does not announce "Start Date" right away or not at
"Start date"/"End date" come from the placeholder put a label would
be more appropriate.

With this commit applied, accessibility is consistent between both
inputs, and it is easier to tell which of the two is the start and which
is the end.

group "Enter a date range"
  LabelText
    textbox "Start Date"
  LabelText
    textbox "End Date"

Fixes: #23445

Note to reviewers

The first commit can be ignored as it is from another PR

github-actions · 2022-05-25T22:59:50Z

Deployed dev-app to: https://ng-comp-dev--pr-24949-13434c5536a22c070e071137a9ad0281-dltkcrvm.web.app

crisbeto · 2022-05-26T09:45:25Z

+  constructor(
+    private _elementRef: ElementRef<HTMLElement>,
+    private _ngZone: NgZone,
+    private _intl: MatDatepickerIntl,


Since the calendar body is exposed as a public API, this will have to be marked as optional initially. Here's an example of how it should be done: https://github.com/angular/components/blob/main/src/cdk/table/table.ts#L518

Or just use the new inject() style? I think that's probably what we want to start doing. As a reference, see #24941

Okay, I made it optional. (This commit is on another PR, #24950).

Would switching all of Datepicker to the new inject() style be considered a breaking change?

Not necessarily, but the shape of the constructor would have to stay the same. You can try changing it to something like:

constructor(...args: any[]) {}

Okay, I used inject() to add the MatDatepickerIntl dependency in a non-breaking way. No changes to the constructor are required.

crisbeto · 2022-05-26T09:52:33Z

  }

+  /** Gets the value for the aria label for the start date input. */
+  _getStartDateLabel() {


I wonder if it wouldn't make more sense for the start/end date labels to be configurable either on mat-date-range-input or on matStartDate/matEndDate, instead of through MatDatepickerIntl. The problem with having it be in the provider is that it affects all range inputs in the app, but they may represent different things. E.g. in a travel site the flights search might say "Departure" and "Return" while the hotel search would say "Check in" and "Check out".

That's good point, didn't think of that. MatDatepickerIntl is injectable, so if there were a Flights pages and a Hotel pages in the same app. The Flight page could inject "Departure"/"Arrival" and the hotel page could inject "Check in"/"Check out". It seems like we have this case covered, but I should definitely add a unit test for that.

There are other cases where this wouldn't work though. Like if you had two different range inputs on the same page.

I still don't get it; I think I might not be understanding how DI works. If there were two different range inputs rendered by two different components, couldn't the two inject their own values for "Start Date"/"End Date"?

Something like injecting either HotelMatDatepickerIntl or AirlineMatDatepickerIntl depending on the need.

I don't think it would be necessary to make the labels configurable on mat-date-range-input or on matStartDate/matEndDate, instead of through MatDatepickerIntl.

On the one hand, it makes sense for developers to be able to able to set the descriptions for each individual inputs. On the other hand, we would also need a way to specify an aria-description on the calendar pop-up for date ranges of length 1, where the start date and end date are on the same day (e.g. "Start and end date"). In general, is there a requirement for how customizable the matStartDate/matEndDate are?

The problem with doing it through DI is if you have more than one date range input in the same component. E.g.

@Component({ providers: [{provide: MatDatepickerIntl, useClass: CustomDatepickerIntl}], template: ` <mat-date-range-input></mat-date-range-input> <mat-date-range-input></mat-date-range-input> ` }) class Comp {}

In this case both range inputs will end up with the same descriptions, even though they might not represent the same values.

…d Date Give `matDateStart` aria label of "Start Date" and give `matDateEnd` a label of "End Date" by wrapping in a `<label>` element. Apply the aria label of the form field to the `<mat-date-range-input>` component, which has role of group. Previously the placeholder was used to communicate which of the inputs was the start date and which was the end date. Only affects the DOM structure and a11y tree. Does not change the visual appearance. Consider the [Basic date range picker example](https://material.angular.io/components/datepicker/overview#date-range-picker-overview): ``` <mat-form-field appearance="fill"> <mat-label>Enter a date range</mat-label> <mat-date-range-input [rangePicker]="picker"> <input matStartDate placeholder="Start date"> <input matEndDate placeholder="End date"> </mat-date-range-input> ... </mat-form-field> ``` Previously, it would produce an accessibility tree that looks something like this. ``` group "Enter a date range" LabelText StaticText "Enter a date range" textbox "Enter a date range" Textbox "End date" ``` Problems with this approach. 1. Screen reader does not announce "Start Date" right away or not at 2. "Start date"/"End date" come from the placeholder put a label would be more appropriate. With this commit applied, accessibility is consistent between both inputs, and it is easier to tell which of the two is the start and which is the end. ``` group "Enter a date range" LabelText textbox "Start Date" LabelText textbox "End Date" ``` Fixes: angular#23445

crisbeto · 2022-06-14T07:40:50Z

The discussion on date-range-input.ts wasn't resolved so that's why I haven't been re-reviewing.

angular-automatic-lock-bot · 2022-09-02T00:03:48Z

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

zarend added Accessibility This issue is related to accessibility (a11y) target: patch This PR is targeted for the next patch release area: material/datepicker labels May 21, 2022

zarend force-pushed the date-range-input-group branch 2 times, most recently from f417783 to ba2f2c8 Compare May 25, 2022 22:38

zarend added dev-app preview When applied, previews of the dev-app are deployed to Firebase target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels May 25, 2022

zarend marked this pull request as ready for review May 25, 2022 22:56

zarend requested review from crisbeto and mmalerba as code owners May 25, 2022 22:56

crisbeto reviewed May 26, 2022

View reviewed changes

zarend force-pushed the date-range-input-group branch 2 times, most recently from 31909cc to 134a4d8 Compare June 8, 2022 18:03

zarend force-pushed the date-range-input-group branch from 134a4d8 to 13434c5 Compare June 13, 2022 22:58

zarend requested a review from crisbeto June 13, 2022 22:58

zarend closed this Aug 2, 2022

angular-automatic-lock-bot Bot locked and limited conversation to collaborators Sep 2, 2022

Conversation

zarend commented May 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Note to reviewers

Uh oh!

github-actions Bot commented May 25, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zarend Jun 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

crisbeto commented Jun 14, 2022

Uh oh!

angular-automatic-lock-bot Bot commented Sep 2, 2022

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zarend commented May 21, 2022 •

edited

Loading

github-actions Bot commented May 25, 2022 •

edited

Loading

zarend Jun 14, 2022 •

edited

Loading