bug: Drawer has poor keyboard accessibility

[probablykasper]

What version of daisyUI are you using?

3.0.3

Describe your issue

When tabbing using the drawer, there's no indication of what you're tabbed over.

Additionally, the Navbar menu for desktop + sidebar drawer for mobile example lets you tab into the drawer-toggle checkbox on desktop:

Screen.Recording.2023-06-07.at.09.10.41.mp4

What browsers are you seeing the problem on?

Chrome

Reproduction URL (optional)

No response

[saadeghi]

As far as I know, there is no solution for this. The hidden checkbox should be before the drawer-content because that's the only way to control the style (unless CSS has() gets a better browser support)
And the label is the only thing that can control the checkbox without using JS but a HTML label can not have CSS :focus-within and it can't be focused so we can't show an outline for it. Instead the hidden checkbox is getting the focus because otherwise there would be no way to open the drawer with keyboard.

Until we get a better browser support with CSS has() the a workaround to improve the accessibility would be using a <button> instead of <label> and check/uncheck the checkbox using JS when button clicked.

[probablykasper]

What about something like this?

input:focus-visible ~ .drawer-content label.drawer-label {
	outline: 2px solid currentColor;
}

For making it not tabbable on desktop, sm:hidden could be added to the input

[saadeghi]

Good idea. Thanks.
I will try this.