BbDrawerTrigger and BbDrawerClose are a bare div with @onclick — no button, no tabindex, no AsChild branch

[mathewtaylor]

Found while working #459. BbDrawerTrigger and BbDrawerClose are on that issue's list of components with no focus styling, and the reason they cannot have any is that they are not focusable at all.

What they render

Both are the same, in full:

<div @onclick="HandleClick" class="@CssClass" @attributes="AdditionalAttributes">
    @ChildContent
</div>

No tabindex, no role="button", no @onkeydown, and no AsChild branch.

Why it is not always broken

In the demos the trigger wraps a BbButton:

<BbDrawerTrigger>
    <BbButton Variant="ButtonVariant.Outline">Open Drawer</BbButton>
</BbDrawerTrigger>

That inner button is focusable, and Enter or Space on it fires a native click that bubbles to the outer div's @onclick. So the common path works, which is presumably why this has not been reported.

When it breaks

The API places no constraint on ChildContent. Pass anything that is not itself focusable — plain text, an icon, a <span>, a styled <div> — and the trigger becomes unreachable by keyboard and is not exposed as an interactive element to assistive technology. It is a <div> that happens to respond to a mouse.

That is a WCAG 2.1.1 (Keyboard) failure in a shape the component invites, and it fails silently: it looks correct, and it works for anyone testing with a mouse.

Drawer is the odd one out

Every sibling renders a real <button> in its non-AsChild branch and cascades a TriggerContext in the AsChild branch:

component	renders <button>	has AsChild
BbDialogTrigger	yes	yes
BbSheetTrigger	yes	yes
BbPopoverTrigger	yes	yes
BbDialogClose	yes (with @onkeydown)	yes
BbDrawerTrigger	no	no
BbDrawerClose	no	no

BbDialogClose even carries an explicit @onkeydown handler, so the intended pattern is well established in the codebase — Drawer simply never followed it.

Suggested fix

Give both the same shape as the Dialog and Sheet equivalents: a <button type="button"> in the default branch, and an AsChild branch cascading TriggerContext for the wrap-a-BbButton usage the demos rely on.

This is a behaviour change worth thinking about, which is why it is a separate issue rather than folded into #459. Today's markup nests a focusable child inside a clickable div; switching the default to a real <button> would nest a BbButton inside a <button>, which is invalid HTML. The AsChild branch is what avoids that, so the demos and any consumer using the wrap pattern need moving to AsChild="true" at the same time — or AsChild needs to default to true for these two, unlike its siblings.

Once they are focusable, they also need the ring from #459, which is currently blocked on this.

[mathewtaylor]

Fixed in #513, merged to develop. This is a breaking change — see the note at the end.

Both now render a real <button type="button"> by default, with AsChild="true" for the case where the child is already a control. Same shape as BbDialogTrigger, BbSheetTrigger and BbPopoverTrigger, which is what Drawer should have been doing all along.

The non-breaking alternative — keeping the <div> and adding tabindex, role="button" and a key handler — was considered and rejected. It breaks nobody, but around an already-focusable child it gives two tab stops and a button nested in a role="button", which trades one accessibility fault for a quieter one instead of fixing it.

Verified in the running demo: a plain-text trigger is a focusable <button> and Enter opens the drawer; the AsChild demos render zero nested buttons.

Upgrade note. If you wrap a control, add AsChild="true":

<BbDrawerTrigger AsChild="true">
    <BbButton Variant="ButtonVariant.Outline">Open</BbButton>
</BbDrawerTrigger>

Plain content needs no change.

Both also gained the themed focus ring, which unblocks the last two components on #459 — there was previously nothing focusable to draw one on.

[mathewtaylor]

Branch note. Breaking work is now collected on the v4 branch, cut from develop at ff4c65d1. develop stays non-breaking and releasable as a minor.

On v4 so far:

• BbDrawerTrigger and BbDrawerClose are a bare div with @onclick — no button, no tabindex, no AsChild branch #507 — BbDrawerTrigger / BbDrawerClose render a real <button>. Merged in fix(a11y)!: BbDrawerTrigger and BbDrawerClose render a real button (BREAKING) #513, then reverted from develop in revert: move the breaking Drawer trigger change (#507) off develop to v4 #514; the change lives on v4.

Still to do there:

• Next major: flip BbTooltipTrigger AsChild default to false #428 — flip BbTooltipTrigger.AsChild to false.
• v4: prefix BlazorBlueprint's Tailwind utilities to stop cross-build class collisions #501 — prefix every Tailwind utility with bb:. Do this last — it rewrites around 1,100 class strings and will conflict with anything else in flight.