Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(datepicker): inconsistent announcement of start date and end #23445

Closed
zarend opened this issue Aug 25, 2021 · 2 comments
Closed

bug(datepicker): inconsistent announcement of start date and end #23445

zarend opened this issue Aug 25, 2021 · 2 comments
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
Accessibility 2021 Datepicker Accessibility

Comments

@zarend
Copy link
Contributor

zarend commented Aug 25, 2021

copied from internal bug report: http://b/195600297

  1. Browse the Datepicker demo URL
  2. Navigate to the "Date range selection" section
  3. Activate "Open calendar" button from date range section, say, "Date range selection"
  4. Choose any start date and end dates
  5. Focus again on the start date and end date text boxes

Actual result:

  1. It is not announcing the state date on state date edit box with date using VoiceOver, NVDA and JAWS with linear navigation
  2. It is announcing "Enter a date range, edit text" and then with a long pause of 2-3 seconds & announcing "start date", where as it is announcing "End date, Edit text, Enter a date range" when focus on End Date editbox using ChromeVox

EXPECTED result:
It should announce consistently on both start date and end date edit boxes. Also, there should not be delay in announcing the start date
@zarend zarend added Accessibility This issue is related to accessibility (a11y) needs triage This issue needs to be triaged by the team area: material/datepicker labels Aug 25, 2021
@zarend zarend added this to Not started in Accessibility 2021 via automation Aug 25, 2021
@zarend zarend changed the title bug(COMPONENT): TITLE bug(datepicker): inconsistent announcement of start date and end Aug 25, 2021
@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Aug 26, 2021
@zarend zarend added this to Not started in Datepicker Accessibility via automation Dec 9, 2021
@zarend zarend moved this from Not started to only affects comparison, range-selection, or restricted-dates use cases in Datepicker Accessibility Dec 9, 2021
@zarend zarend moved this from only affects comparison, range-selection, or restricted-dates use cases to Not started in Datepicker Accessibility May 18, 2022
@zarend zarend moved this from Not started to only affects date ranges and comparison ranges in Datepicker Accessibility May 18, 2022
@zarend zarend moved this from only affects comparison ranges to Not started in Datepicker Accessibility May 18, 2022
zarend added a commit to zarend/components that referenced this issue May 21, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
c289214 
…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
@zarend zarend mentioned this issue May 21, 2022
Closed
@zarend zarend moved this from Not started to In progress (review, presubmit) in Datepicker Accessibility May 23, 2022
zarend added a commit to zarend/components that referenced this issue May 25, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
f417783 
…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
zarend added a commit to zarend/components that referenced this issue May 25, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
ba2f2c8 
…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
zarend added a commit to zarend/components that referenced this issue Jun 7, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
31909cc 
…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
zarend added a commit to zarend/components that referenced this issue Jun 8, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
134a4d8 
…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
zarend added a commit to zarend/components that referenced this issue Jun 13, 2022
@zarend
fix(material/datepicker): add aria labels to <input/>s for Start/En…
13434c5 
…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
zarend added a commit to zarend/components that referenced this issue Aug 9, 2022
@zarend
wip: giving aria-description on calendar UI to clarify start vs end date
b4047a5 
Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 12, 2022
@zarend
fix(material/datepicker): add aria-descriptions to calendar for start…
e99bd68 
…/end dates

For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
@zarend zarend mentioned this issue Aug 12, 2022
Merged
zarend added a commit to zarend/components that referenced this issue Aug 12, 2022
@zarend
fix(material/datepicker): add aria-descriptions to calendar for start…
4a8580f 
…/end dates

For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 18, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
8ab5e84 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 18, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
38792a6 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 19, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
314b631 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 19, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
b943338 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 26, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
f807adb 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit to zarend/components that referenced this issue Aug 26, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date
b85f75a 
For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
zarend added a commit that referenced this issue Aug 26, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date (#…
67212ba 
…25457)

For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes #23442 and #23445
@zarend zarend moved this from In progress (review, presubmit) to Done in Datepicker Accessibility Aug 26, 2022
@zarend
Copy link
Contributor Author

zarend commented Sep 16, 2022

This was fixed by #25457

@zarend zarend closed this as completed Sep 16, 2022
Accessibility 2021 automation moved this from Not started to Done Sep 16, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Sep 16, 2022
@zarend
fix(material/datepicker): calendar aria-descriptions start/end date (a…
06758eb 
…ngular#25457)

For date ranges, add aria-descriptions to the cell of the current start
date and also for end date.

Popuplate aria descriptions with the expected value of the ARIA accessible name of the
`matStartDate` and `matEndDate` inputs. Introduces `_computeAriaAccessibleName` function to
implement ARIA acc-name-1.2 specificiation.

Fixes angular#23442 and angular#23445
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 17, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
Accessibility 2021
Done
Datepicker Accessibility
Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/datepicker): add aria labels to <input/>s for Start/En… zarend/components
2 participants
@jelbourn @zarend