Ribbon

VersionApp accentColor schemeTouch modeDirection

Keyboard shortcuts

The ribbon follows the WAI-ARIA tab + toolbar pattern with Office-style shortcuts. Click anywhere in the ribbon first to put focus inside it.

Tab strip

← / →: Move focus to the previous / next tab
Home / End: Jump to the first / last tab
Enter / Space: Activate the focused tab
Double-click: Minimize / restore the ribbon

Inside a group

← / →: Rove between items in the same group (wraps at ends)
Home / End: Jump to the first / last item in the group
Tab / Shift+Tab: Move to the next / previous group (one tabbable per group)
Enter / Space: Activate the focused item

Across groups

Ctrl+← / Ctrl+→: Jump focus to the previous / next group inside the active tab

Dropdowns, menus & collapsed groups

↓ / Alt+↓: Open the menu on a dropdown / split button, or on a collapsed group's chevron
Enter / Space: Same as above (activate the trigger). Opens the popup and moves focus into its first item
↑ / ↓: Move highlight between menu items
← / →: Inside a collapsed group's popup, rove between items the same as inside an expanded group
Esc: Close the open menu or popup and return focus to the trigger

Ribbon itself

Ctrl+F1: Minimize / restore the ribbon (announced via live region)

KeyTips (Office shortcut overlay)

Alt: Show or hide the KeyTips overlay. Auto-derived from labels; explicit override via data-key-tip="X"
A–Z: While the overlay is up, press a tip letter to activate that tab. Once a tab opens, press another letter to fire an item
Esc: Drop back one level: items → tabs → overlay closed

Quick Access Toolbar

← / →: Rove between pinned commands
Home / End: First / last pinned command

Screen-reader users also hear announcements (aria-live="polite") for ribbon minimize / restore, contextual-tab show / hide, and overflow-group collapse / expand transitions.

Code samples

Copy-paste starting points for the most common ribbon shapes. Every element has a React wrapper (Bs*) over a Lit web component (mp-*); these snippets show the React form.

1. Minimal ribbon — one tab, one group, three buttons

The minimized prop + onMinimizeToggle handler mirror Angular's two-way [(minimized)] — Ctrl+F1 and double-clicking a tab will fire the event and update your state.

2. Split-button with a "last-used" menu

The split-button never mutates its own label / icon. Implement the "last-used" pattern in your component by updatingpasteMode inside onPasteModeSelect.

3. Value-bearing items with controlled props

Every value-bearing wrapper (toggle-button, check-box, combo-box, color-picker, group-button) exposes a value prop + a matchingon*Change event — the standard React controlled-component pattern.

4. Contextual tab set

Toggling hidden on the set firescontextual-visibility-change; the ribbon re-processes its slot and announces "Picture Tools, contextual, now available / hidden" via the live region.

5. Quick Access Toolbar (sibling, not nested)

The QAT is deliberately rendered as a sibling — two top-levelrole="toolbar" regions keep the a11y tree flat. Persistence of pinned commands is up to your app.

6. Per-app appearance + dark mode

version picks one of office-2007 /2010 / 2013 / 2016.appAccent drives the brand colour (Word#2B579A, Excel #217346, etc.).colorScheme="auto" followsprefers-color-scheme and ancestordata-bs-theme="dark".

7. Slot-based icons (FR-16)

Every item exposes a <slot name="icon"> alongside the existing icon string attribute. The host'ssize attribute auto-sizes slotted icons via::slotted rules; consumers wanting an explicit override apply .ribbon-icon-large / -medium /-small directly on the projected element. Theicon="" attribute remains supported as the fallback — consumers can mix-and-match.

Loading…