Accessibility: Expansion-panel header is not marked as focused when tabbing.

[ehsantoucerkany]

What is the expected behavior?

When tabbing in an expanded expansion panel, the mat-expansion-panel-header should be shaded/highlighted to indicate the focused element.

What is the current behavior?

There is no way for the user to distinguish focus on the header, when tabbing to the header to collapse the already expanded item.

What are the steps to reproduce?

See the "Basic expansion panel example":
https://material.angular.io/components/expansion/overview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

n/a - All versions on material.angular.io are affected: https://material.angular.io/components/expansion/overview

Is there anything else we should know?

The correct behaviour can be observed here: https://material-ui.com/demos/expansion-panels/

material-ui.com:

material.angular.io:

[literalpie]

Based on the code, it seems like this was an intentional decision. background: inherit was explicitly added to mat-expanded:focus

[jelbourn]

There should be some focus state on the expansion header. We need to consult w/ the Material Design team to confirm what that focus treatment should be

[jelbourn]

Should be fixed by #14569

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