bug(focus indicators): Focus indicators are now positioned.

[zelliott]

• Just as every .mat-ripple is positioned in order to create an easy API for developers, every .mat-focus-indicator should be positioned. This way, when developers add the class .mat-focus-indicator to their own custom focusable elements they do not also need to position the element.
• As a result of positioning every .mat-focus-indicator, a few components that set position: absolute on the associated element need to have their specificity bumped.
• In testing this change, I fixed a few bugs as a result of fix(datepicker): strong focus indication in calendar always shown #19304 (comments inline).

[crisbeto]

LGTM, but @jelbourn might have an opinion on this.

[zelliott]

@jelbourn Before merging this, let's close on whether the style .mat-focus-indicator { position: relative; } should be within mat-strong-focus-indicators or mat-core. See the associated comment on the PR.

[jelbourn]

Replied via email, but I'm good with adding the relative style in mat-core (assuming the TGP works out)

[zelliott]

Before this change, this element had essentially no styles, and thus the focus indicator actually rendered relative to the parent button. Now that we've added position: relative to this element, the fact that it has no styles is problematic (the focus indicator doesn't render with the correct bounding box). Consequently, use mat-fill to make this element match the bounds of the entire button.

[zelliott]

TGP LGTM, sent the link to you @jelbourn.

[jelbourn]

LGTM, just minor naming comment

[zelliott]

Addressed naming comment, rebased and squashed commits.

[jelbourn]

LGTM

[angular-automatic-lock-bot]

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