MDC-Web: Dialog "You can't have a focus-trap without at least one focusable element"

I’m using <script src="//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script> w foundation and today am getting an error that I was not getting last week.

material-components-web.min.js:6 Uncaught Error: You can't have a focus-trap without at least one focusable element
    at p (material-components-web.min.js:6)
    at l (material-components-web.min.js:6)
    at Object.n [as activate] (material-components-web.min.js:6)
    at Object.trapFocusOnSurface (material-components-web.min.js:6)
    at e.value (material-components-web.min.js:6)
    at HTMLDivElement.n.transitionEndHandler_ (material-components-web.min.js:6)

Any ideas? I have a <button id="account-cancel" type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Cancel</button> in the dialog?..

[johnhaitas]

@Download I found a solution to the problem - you must have at least one DrawerItem with the selected attribute

[abhiomkar]

For future reference I’m linking a complete example of dismissible drawer on stackblitz.

The reason we made it to have at least one focusable element inside drawer because of accessibility reasons.

• At least one focusable element is required to close the drawer using <kbd>ESC</kbd> key when it is opened and focus is inside drawer.
• Focus is trapped inside drawer when modal drawer is opened. This requires at least one focusable element to be present.

As suggested above, it is recommended to have at least one drawer item (i.e., mdc-list-item).

@Download Please see this example for use case when none of the drawer items are selected initially. Drawer component itself is not aware which navigation item is currently active, it is also not safe assumption to activate or select first item.