docs(material/datepicker): require communicating date format for a11y #24682
Conversation
zarend
added
Accessibility
zarend
requested review from
andrewseguin,
mmalerba and
crisbeto
as code owners
zarend
force-pushed
the
display-date-formats
branch
from
d032234 to
70181bb
Compare
src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html
Outdated
Show resolved
Hide resolved
| @@ -1,5 +1,6 @@ | |||
| <mat-form-field class="example-form-field" appearance="fill"> | |||
| <mat-label>First campaign</mat-label> | |||
| <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint> | |||
There was a problem hiding this comment.
I'm wondering if users would actually infer that this is a date format. I would assume that the screen reader will read it out as an abbreviation.
There was a problem hiding this comment.
This is what is looks like visually.
The hint visually matches the input above it. I tested this on VoiceOver and it announced this as an abbreviation.
There was a problem hiding this comment.
That's what I meant. Would users actually know that the abbreviation refers to the date format?
There was a problem hiding this comment.
Hmmm. Showing the date format as an abbreviation is fairly conventional AFAIK.
As far as screen readers as concerned, I would recommend not dictating exactly how it is announced. People get used to how screen readers work and trying to control too much what the screenreader says can make it worse.
There was a problem hiding this comment.
Using abbreviations is not necessarily the only correct way to communicate the date format. What I'm going for, is keeping things conventional for these examples.
There was a problem hiding this comment.
This seems standard to me as well, I see many websites showing hints like this
There was a problem hiding this comment.
FWIW, we have another component internally that uses abbreviations.
zarend
force-pushed
the
display-date-formats
branch
from
70181bb to
8d7314f
Compare
zarend
force-pushed
the
display-date-formats
branch
from
8d7314f to
9869f46
Compare
In the accessibility section of the datepicker documentation, require communicating the date format string (e.g. 'MM/DD/YYYY'). Update datepicker examples to show the date format string via `<mat-hint>` and use 'en-US' as the locale. This commit only changes examples and does not affect source code. Addresses angular#11127
zarend
force-pushed
the
display-date-formats
branch
from
9869f46 to
c6a7aaa
Compare
…#24682) In the accessibility section of the datepicker documentation, require communicating the date format string (e.g. 'MM/DD/YYYY'). Update datepicker examples to show the date format string via `<mat-hint>` and use 'en-US' as the locale. This commit only changes examples and does not affect source code. Addresses #11127 (cherry picked from commit 6118b68)
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
In the accessibility section of the datepicker documentation, require communicating the date format
string (e.g. 'MM/DD/YYYY'). Update datepicker examples to show the date format string via
<mat-hint>and use 'en-US' as the locale.This commit only changes examples and does not affect source code.
Addresses #11127