diff --git a/src/material-experimental/mdc-button/_button-base.scss b/src/material-experimental/mdc-button/_button-base.scss index 5f81f8ce8804..b6c6e664e1d3 100644 --- a/src/material-experimental/mdc-button/_button-base.scss +++ b/src/material-experimental/mdc-button/_button-base.scss @@ -40,6 +40,11 @@ .mdc-button__label { z-index: 1; } + + // The focus indicator should match the bounds of the entire button. + .mat-mdc-focus-indicator { + @include mat-fill(); + } } // MDC's disabled buttons define a default cursor with pointer-events none. However, they select diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.scss b/src/material-experimental/mdc-helpers/_focus-indicators.scss index 026f54bac810..771c95c72fbb 100644 --- a/src/material-experimental/mdc-helpers/_focus-indicators.scss +++ b/src/material-experimental/mdc-helpers/_focus-indicators.scss @@ -2,7 +2,6 @@ @import '../../material/core/style/layout-common'; @import '../../material/core/focus-indicators/focus-indicators'; - /// Mixin that turns on strong focus indicators. /// /// @example diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index 00cf85c502d0..692c25c7ff6b 100644 --- a/src/material/core/_core.scss +++ b/src/material/core/_core.scss @@ -5,6 +5,7 @@ // Core styles that can be used to apply material design treatments to any element. @import './style/elevation'; @import './ripple/ripple'; +@import './focus-indicators/focus-indicators'; @import './option/option-theme'; @import './option/optgroup-theme'; @import './selection/pseudo-checkbox/pseudo-checkbox-theme'; @@ -17,6 +18,9 @@ @include cdk-a11y(); @include cdk-overlay(); @include cdk-text-field(); + + @include _mat-strong-focus-indicators-positioning(); + @include _mat-mdc-core(); } @mixin mat-core-color($config-or-theme) { @@ -67,3 +71,17 @@ } } } + +// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`. +@mixin _mat-mdc-core() { + @include _mat-mdc-strong-focus-indicators-positioning(); +} + +// Mixin that ensures focus indicator host elements are positioned so that the focus indicator +// pseudo element within is positioned relative to the host. Private mixin included within +// `_mat-mdc-core`. +@mixin _mat-mdc-strong-focus-indicators-positioning() { + .mat-mdc-focus-indicator { + position: relative; + } +} diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss index 5f16d508a6d1..c68ab6cef86f 100644 --- a/src/material/core/focus-indicators/_focus-indicators.scss +++ b/src/material/core/focus-indicators/_focus-indicators.scss @@ -45,14 +45,11 @@ margin: -($border-width + 2px); } - .mat-focus-indicator.mat-stroked-button::before { + .mat-focus-indicator.mat-stroked-button::before, + .mat-focus-indicator.mat-calendar-body-cell-content::before { margin: -($border-width + 3px); } - .mat-focus-indicator.mat-calendar-body-cell::before { - margin: -$border-width; - } - .mat-focus-indicator.mat-tab-link::before, .mat-focus-indicator.mat-tab-label::before { margin: 5px; @@ -71,8 +68,9 @@ // is present. .mat-focus-indicator.mat-option.mat-active::before, - // The focus indicator in the calendar is placed on an element inside the cell. - .mat-calendar-body-active .mat-focus-indicator::before, + // For calendar cells, render the focus indicator when the parent cell is + // focused. + .mat-calendar-body-cell:focus .mat-focus-indicator::before, // For all other components, render the focus indicator on focus. .mat-focus-indicator:focus::before { @@ -122,3 +120,12 @@ } } } + +// Mixin that ensures focus indicator host elements are positioned so that the focus indicator +// pseudo element within is positioned relative to the host. Private mixin included within +// `mat-core`. +@mixin _mat-strong-focus-indicators-positioning() { + .mat-focus-indicator { + position: relative; + } +} diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss index fdac6e027a4d..56129cbb2096 100644 --- a/src/material/datepicker/calendar-body.scss +++ b/src/material/datepicker/calendar-body.scss @@ -153,7 +153,6 @@ $mat-calendar-range-end-body-cell-size: } .mat-calendar-body-cell-content { - position: absolute; top: $mat-calendar-body-cell-content-margin; left: $mat-calendar-body-cell-content-margin; z-index: 1; @@ -175,6 +174,12 @@ $mat-calendar-range-end-body-cell-size: // Choosing a value clearly larger than the height ensures we get the correct capsule shape. border-radius: $mat-calendar-body-cell-radius; + // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can + // potentially overwrite the absolute position of the container. + &.mat-focus-indicator { + position: absolute; + } + @include cdk-high-contrast(active, off) { border: none; } diff --git a/src/material/expansion/expansion-panel-header.scss b/src/material/expansion/expansion-panel-header.scss index 430fc1621e2b..7ef3faa99e1b 100644 --- a/src/material/expansion/expansion-panel-header.scss +++ b/src/material/expansion/expansion-panel-header.scss @@ -6,7 +6,6 @@ align-items: center; padding: 0 24px; border-radius: inherit; - position: relative; // Necessary for the strong focus indication. transition: height $mat-expansion-panel-header-transition; &:focus, diff --git a/src/material/expansion/expansion-panel.scss b/src/material/expansion/expansion-panel.scss index 0fbe62fa203b..cbe572981f69 100644 --- a/src/material/expansion/expansion-panel.scss +++ b/src/material/expansion/expansion-panel.scss @@ -13,7 +13,8 @@ transition: margin 225ms $mat-fast-out-slow-in-timing-function, mat-elevation-transition-property-value(); - // Required so that the `box-shadow` works after we add `position: relative` to the header. + // Required so that the `box-shadow` works after the focus indicator relatively positions the + // header. position: relative; .mat-accordion & { diff --git a/src/material/list/list.scss b/src/material/list/list.scss index 221c8525dde2..b96afa988828 100644 --- a/src/material/list/list.scss +++ b/src/material/list/list.scss @@ -48,9 +48,6 @@ $mat-list-item-inset-divider-offset: 72px; width: 100%; padding: 0; - // Required for focus indicator. - position: relative; - .mat-list-item-content { display: flex; flex-direction: row; diff --git a/src/material/sort/sort-header.scss b/src/material/sort/sort-header.scss index dd3386c518bd..c1928991a26b 100644 --- a/src/material/sort/sort-header.scss +++ b/src/material/sort/sort-header.scss @@ -32,9 +32,6 @@ $mat-sort-header-arrow-hint-opacity: 0.38; font: inherit; color: currentColor; - // Required for focus indicator. - position: relative; - // Usually we could rely on the arrow showing up to be focus indication, but if a header is // active, the arrow will always be shown so the user has no way of telling the difference. [mat-sort-header].cdk-keyboard-focused &,