Interactive components with no focus styling fall back to the browser's default outline

[mathewtaylor]

Follow-up to #457 / #458, found while reviewing that fix.

The problem

#457 covered components that remove the focus outline and draw nothing in its place — focus is invisible, a WCAG 2.4.7 failure. This issue is the neighbouring case: components that never style focus at all, so the browser paints its own outline.

That is a different, milder problem. Focus is visible, so it passes WCAG. But it is the user agent's outline, not the theme's — Chrome's blue rectangle sitting next to the themed ring-ring used everywhere else. On a page mixing both, focus appears to change style as you tab.

Spotted on BbCollapsibleTrigger: the docs site's "View Code" toggle renders a blue browser outline while the input above it shows the themed ring.

Neither the Components nor the Primitives layer sets any focus class on it — verified across both.

Affected

25 confirmed, checking Components and Primitives together (a component styled in one layer is not listed):

Disclosure	BbCollapsibleTrigger, BbAccordionTrigger
Overlay triggers	BbDialogTrigger, BbSheetTrigger, BbPopoverTrigger, BbAlertDialogTrigger, BbDrawerTrigger, BbDrawerClose
Navigation	BbBreadcrumbLink, BbCarouselNext, BbCarouselPrevious, BbResponsiveNavItems, BbTablePagination
Inputs / pickers	BbColorPicker, BbDateTimePicker, BbRating, BbFileUpload, BbInputGroupAddon
Other	BbCopyText, BbThemeSwitcher, BbSidebarRail, BbMarker, BbFormWizard, BbDataTableToolbar, BbDashboardGrid

Suggested fix

Apply the library's ring, matching the split #458 settled on:

• Standalone controls (triggers, buttons, links) → focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
• Controls in tight vertical rhythm (anything with a label directly above) → the same without ring-offset-2, since the form rows leave only a 3px label gap and an offset ring extends 4px

Not a mechanical sweep

Several of these need a judgement call rather than the default treatment, which is why this is separate from #458 rather than folded into it:

• BbSidebarRail is a thin drag strip — a 2px ring may be most of the control
• BbCarouselNext/Previous overlay slide content, so ring contrast depends on the image behind them
• BbMarker and BbRating are small repeated elements where an offset ring will collide with neighbours
• BbDashboardGrid and BbDataTableToolbar are containers; the focusable thing inside them may be what needs the ring, not the wrapper

Worth doing a few at a time with a visual check, rather than one find-and-replace.

Also worth fixing alongside

demos/BlazorBlueprint.Demo.Shared/Shared/CodeBlock.razor is what shows the outline in the screenshot above. It uses BbCollapsibleTrigger, so fixing the component fixes the docs site for free — no demo-side change needed.

[mathewtaylor]

First tranche merged in #508: BbCollapsibleTrigger, BbAccordionTrigger, BbDialogTrigger, BbSheetTrigger and BbPopoverTrigger. That covers the collapsible trigger in the screenshot, which the docs site's own "View Code" toggle uses.

The ring went in the Components layer, not Primitives — the primitives are headless and set no classes. For Dialog, Sheet and Popover the wrapper passes it as class into the primitive, which splats it onto the <button> it owns; that branch only renders when AsChild is false, so an AsChild trigger keeps its child's own focus styling instead of gaining a second ring.

Verified in the running demo rather than by reading classes — on a real Tab the computed box-shadow is the themed ring and outline-style is none.

Remaining: 22 of 27.

• 12 are the same mechanical treatment.
• 8 need the visual judgement this issue already flags: BbSidebarRail, BbCarouselNext/BbCarouselPrevious, BbMarker, BbRating, BbDashboardGrid, BbDataTableToolbar, BbFileUpload.
• 2 are blocked on BbDrawerTrigger and BbDrawerClose are a bare div with @onclick — no button, no tabindex, no AsChild branch #507, filed from this work. BbDrawerTrigger and BbDrawerClose render a bare <div> with @onclick and no tabindex, so there is nothing focusable to draw a ring on. They cannot be fixed here.

Also worth recording: BbAttachmentTrigger and BbCommandInput are still in the FocusIndicatorTests allowlist as known gaps against this issue, so clearing them is part of closing it.

[mathewtaylor]

Complete. Final tranche merged in #518.

21 of the 27 listed components now carry the themed ring, across #508, #509 (thanks @Asgabani), #510, #517 and #518.

The ring is not uniform, because the shape of the control decides it. Standalone controls take focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2. Anything tight takes the same without the offset: the carousel arrows sit over slide images so whatever is 4px outside them is the photograph; BbSidebarRail is 16px wide with a 2px visible line, where an offset ring would be wider than the control it marks; BbRating, BbMarker, BbColorPicker's swatches and BbThemeSwitcher's option buttons all repeat close enough that an offset ring lands on a neighbour.

The remaining six are deliberate, not skipped:

• BbInputGroupAddon, BbDataTableToolbar, BbDashboardGrid — containers. The focusable children inside carry their own indicators. BbInputGroupAddon also had a click handler that did nothing at all (a stub with await Task.CompletedTask under a comment claiming it focused the sibling input); that is removed, so it is now honestly presentational.
• BbTablePagination — exists only in BlazorBlueprint.Primitives, which is headless by design. Theming a primitive would contradict the layer split. It needs a styled Components wrapper if it is ever to carry one.
• BbDrawerTrigger, BbDrawerClose — these have the ring on the v4 branch only. They were a bare <div @onclick> with no tabindex, so on develop there is literally nothing to draw a ring on. BbDrawerTrigger and BbDrawerClose are a bare div with @onclick — no button, no tabindex, no AsChild branch #507 made them real buttons, and that change is breaking, so it lives on v4.

Two defects surfaced along the way and were fixed here: BbAttachmentTrigger and BbCommandInput were removing the outline and drawing nothing, which is invisible focus and a WCAG 2.4.7 failure rather than the milder off-theme problem this issue describes. The FocusIndicatorTests allowlist now holds no #459 entries.

Two more were filed rather than folded in: #507 for the Drawer parts, and the BbTablePagination question above.

[mathewtaylor]

Released in BlazorBlueprint.Components 3.16.1, live on NuGet now.

dotnet add package BlazorBlueprint.Components --version 3.16.1

Please reopen, or open a new issue, if it is not behaving as described.