Bottom drawers of OcDrop are not modal and don't take the focus #3638

Initial Checklist

• I understand this is a bug report and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

On phones, OcDrop shows its content in a bottom drawer (OcBottomDrawer). It looks like a modal dialog (dimmed backdrop), but it is a non-modal <dialog open> without an accessible name, and the focus stays on the toggle behind the backdrop:

• dialog.matches(':modal') is false, the dialog has no aria-label/aria-labelledby.
• After opening it with the keyboard (Enter on the toggle) the focus stays on the toggle outside of the drawer, arrow keys do nothing. Only Tab moves the focus into the drawer.
• Screen readers aren't told that a dialog opened and can still read the page behind it.

Escape closes the drawer and returns the focus correctly.

Reproduction Steps

1. In the files app on a phone (or Chromium with device emulation, 390 × 844 with touch), focus the context menu button of a file and press Enter.
2. Check document.activeElement and the opened dialog.oc-bottom-drawer.

Expected Outcome

The drawer is a modal dialog with a name (e.g. showModal(), labelled by its title), and the focus moves into it when it opens, like for the dropdown on larger screens.

Actual Outcome

The focus stays on the toggle, the dialog is not modal and has no name.