From ccbc7f96bdfdd08c4a940c0e739ca4f89c185053 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 9 Dec 2020 22:50:27 +0100 Subject: [PATCH] fix(material/datepicker): a couple of accessibility issues in touch UI mode Resolves the following accessibility issues when the datepicker is in touch UI mode: * Focus was going directly to the close button, because that's the first element that the dialog's focus trap was running into. I've disabled the automatic focus redirection since the calendar has its own. * The calendar close button for screen readers was off-screen, because the dialog container has `position: static` and `overflow: auto`. Apart from the two issues above, I've also made it so the screen reader button's theme color matches the one of the calendar. This is mostly so the button doesn't look out of place if the calendar has a different theme and the user tabs into it. --- src/material/datepicker/calendar-body.scss | 6 ++++++ src/material/datepicker/datepicker-base.ts | 5 ++++- src/material/datepicker/datepicker-content.html | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index 56129cbb2096..c3bb7bae9e0c 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -185,6 +185,12 @@ $mat-calendar-range-end-body-cell-size: } } +// Allows for the screen reader close button to be seen in touch UI mode. +.mat-datepicker-dialog .mat-dialog-container { + position: relative; + overflow: visible; +} + @include cdk-high-contrast(active, off) { .mat-datepicker-popup:not(:empty), .mat-calendar-body-selected { diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts index a1a2e2494d5f..39a7f68f2dd3 100644 --- a/src/material/datepicker/datepicker-base.ts +++ b/src/material/datepicker/datepicker-base.ts @@ -570,7 +570,10 @@ export abstract class MatDatepickerBase, S, maxWidth: '80vw', maxHeight: '', position: {}, - autoFocus: true, + + // Disable the dialog's automatic focus capturing, because it'll go to the close button + // automatically. The calendar will move focus on its own once it renders. + autoFocus: false, // `MatDialog` has focus restoration built in, however we want to disable it since the // datepicker also has focus restoration for dropdown mode. We want to do this, in order diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html index b7343f46f3d0..5dbe68075210 100644 --- a/src/material/datepicker/datepicker-content.html +++ b/src/material/datepicker/datepicker-content.html @@ -22,7 +22,7 @@