Repository navigation
[Feature] Tabs: match shadcn (Base UI + vega) - #653
Merged
Merged
Conversation
- Vega classes on every part: flex column root with gap-2, p-[3px] list, trigger with border, ring-[3px] focus ring, hover color and dark bg-input/30; text-sm panel. - Tab semantics: role tablist/tab/tabpanel, aria-selected, aria-controls on every tab and aria-labelledby on every panel. Panels stay mounted and hide with the hidden attribute. - Keyboard as Base UI: roving tabindex, arrow keys with wrap, Home/End, manual activation, focusable panel. - Disabled tabs use aria-disabled + data-disabled and stay reachable. - data-slot, data-orientation, data-active, data-variant as in shadcn. - New: Tabs(orientation:), TabsList(variant: :line, activate_on_focus:, loop_focus:), and a ruby-ui--tabs:change event. - Tabs takes default_value: (shadcn's defaultValue). The docs already passed it, but it rendered a stray default-value attribute and was ignored. default: stays as an alias. - Audit map, fixtures, divergences and baseline for tabs; MCP registry. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- Removing the active tab (or its panel) hands selection to a remaining enabled tab, so the list never ends up with no tabbable tab. - Each sync re-wires ids and aria-controls/aria-labelledby, so a morph that drops them gets them back. - Generated ids use a counter, so values like "a/b" and "a-b" no longer collide on one id. - Leaving the tab list without activating puts the tab stop back on the selected tab, so Tab back in lands there (APG). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
All reported issues were addressed across 15 files
Reply with feedback, questions, or to request a fix.
View guided diff | Turn on auto-fix | Re-trigger cubic
- The root's flex direction follows data-orientation, which the controller keeps in sync, so a runtime orientation change re-lays out. - Tabs and panels drop aria-controls/aria-labelledby when their counterpart is removed. - Generated ids survive reconnects: the base and counter persist and ids already in the document are skipped. - The audit fixture uses default_value:; a test name matches what it checks. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings Tabs in line with shadcn's Base UI build and the vega style, following the shadcn audit run on 2026-11-04.
Before / after
RubyUI on main, RubyUI with this PR, and shadcn (Base UI + vega), same fixture.
Closed (light):
After clicking Password (light):
Keyboard focus (light):
Closed (dark):
After clicking Password (dark):
Keyboard focus (dark):
New in the docs: the line variant and a vertical list.
What changed
gap-2, the list usesp-[3px], and the trigger has a transparent border,px-2, thering-[3px]focus ring, a hover color andbg-input/30with a border when active in dark mode. Panels aretext-sm.roletablist/tab/tabpanel,aria-selected,aria-controlson every tab andaria-labelledbyon every panel. Before this, screen readers saw three loose buttons.aria-disabled+data-disabledand stay reachable with the arrow keys, as in Base UI.data-slot,data-orientation,data-activeanddata-variant, as shadcn renders them.Tabs(orientation: :vertical),TabsList(variant: :line, activate_on_focus:, loop_focus:), and aruby-ui--tabs:changeevent with{value, previousValue}.Tabsnow takesdefault_value:, shadcn'sdefaultValue. The docs and the home page already passed it, but the component ignored it and rendered a straydefault-valueattribute.default:still works as an alias.Two deliberate differences are registered in
audit/divergences/tabs.yml:hiddenattribute. Base UI unmounts inactive panels, which leaves inactive tabs withoutaria-controls. Keeping them follows the APG.value/onValueChange/keepMounted. Settingdata-ruby-ui--tabs-active-valueswitches tabs, and thechangeevent reports the switch.Breaking changes
data-state="active|inactive"on triggers. Custom CSS that usesdata-[state=active]:needsdata-active:(oraria-selected:) instead.TabsTrigger(disabled: true)now rendersaria-disabledinstead of the nativedisabledattribute.hiddenattribute instead of thehiddenclass.text-smand the panel'smt-2is gone. The spacing now comes from the root'sgap-2.Follow-ups
tabindex=0), but it hasoutline-noneand no ring, as in shadcn. WCAG 2.4.7 asks for a visible focus indicator. This could be a registered divergence with afocus-visiblering. (Codex review)group-data-[orientation=…]/tabs:matches anyTabsancestor. A horizontal list inside vertical tabs would pick up the vertical styles. shadcn has the same issue. Keying the styles on each element's owndata-orientationwould fix it, but that attribute only exists after the controller runs. (Codex review)Audit checklists
main (before)
this PR (after)
Test steps
cd gem && bundle exec rake,cd docs && bin/rails test,cd mcp && bundle exec rake test,cd audit && bundle exec rake.cd docs && bin/dev, open /docs/tabs.🤖 Generated with Claude Code
Summary by cubic
Tabsnow matches shadcn's Base UI build and the vega style, per the 2026-11-04 shadcn audit: vega classes on every part, proper tab semantics (tablist/tab/tabpanel,aria-selected,aria-controls,aria-labelledby), and APG keyboard behavior (roving tabindex, arrow keys with wrap, Home/End, manual activation). The controller also survives morphs and removed tabs: ids and ARIA wiring are restored on every sync, and removing the active tab hands selection to a remaining enabled one.New Features
Tabs(orientation: :vertical),TabsList(variant: :line, activate_on_focus:, loop_focus:),Tabs(default_value:)(default:kept as an alias and the straydefault-valueattribute no longer renders), and aruby-ui--tabs:changeevent with{value, previousValue}.data-ruby-ui--tabs-active-valueswitches tabs from outside; disabled triggers renderaria-disabled+data-disabledand stay reachable with the arrow keys.Breaking changes
data-state="active|inactive"; custom CSS usingdata-[state=active]:needsdata-active:(oraria-selected:) instead.TabsTrigger(disabled: true)rendersaria-disabledinstead of the nativedisabledattribute.hiddenattribute instead of thehiddenclass.text-smand panelmt-2is gone; spacing comes from the root'sgap-2.Written for commit 9796e16. Summary will update on new commits.