fix(expansion): add strong focus indication

[crisbeto]

Since the color contrast on the expansion panel focus state isn't great, it's a good candidate to have strong focus indication.

[jelbourn]

@zelliott PTAL

[zelliott]

@crisbeto The reason we removed the expansion panel header focus indicators from the master focus indicators PR (8a44fb9) was because adding position: relative to the expansion panel headers was causing box-shadow layering issues in certain scenarios.

The TL;DR is when an expansion panel header has a non-transparent background & position: relative, the non-transparent background is layered on top of the parent mat-expansion-panel box-shadow. The diff is subtle:

No position: relative (note the box-shadow between headers):

position: relative (note the lack of box-shadow between headers):

We tried to fix this layering issue by adding position: relative to the parent mat-expansion-panel as well. However, this caused more diffs to the mat-expansion-panel box-shadow.

I think a more involved CSS fix will be needed to make these expansion panel headers relatively positioned...

[crisbeto]

Hmm, I think I see the difference in your screenshots, but I don't see anything if I try it out for myself. Here are a couple of examples. The first one is without relative and the second one is with.

[zelliott]

@crisbeto Try adding a non-transparent background to the headers? The headers have a transparent background by default, so the layering has no visual effect.

[zelliott]

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