bug(bottom-sheet): auto focus defaults to dialog instead of first-tabbable

[mlemoine-clgx]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The documentation https://material.angular.io/components/bottom-sheet/overview#focus-management specifies that the default behavior for autoFocus is first-tabbable. However, since at least v16, the default behavior has been set to dialog.

This is a surprising autoFocus behavior from an accessibility standpoint.

This even seems to have been enshrined in the tests: https://github.com/angular/components/blob/c1ff40f/src/material/bottom-sheet/bottom-sheet.spec.ts#L620

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-dd7tdtv9?file=src%2Fmain.ts
Steps to reproduce:

1. BottomSheet opens on init
2. Note that the element inside does not have focus. But it is tabbable

Expected Behavior

First tabbable element should receive focus

Actual Behavior

First tabbable element does not receive focus, bottom sheet container receives focus instead.

Environment

• Angular: 18.2.8
• CDK/Material: 18.2.8
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

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