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 an Angular wrapper (bs-*) over a Lit web component (mp-*); these snippets show the Angular form.

1. Minimal ribbon β€” one tab, one group, three buttons

[(minimized)] two-way binds the minimize state β€” Ctrl+F1 and double-clicking a tab will update your signal.

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 updating pasteMode inside onPasteModeSelect.

3. Value-bearing items with [(ngModel)]

Every value-bearing wrapper (toggle-button, check-box, combo-box, color-picker, group-button) implements ControlValueAccessor so it works with both template-driven (ngModel) and reactive forms (formControl).

4. Contextual tab set

Toggling [hidden] on the set fires contextual-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-level role="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" follows prefers-color-scheme and ancestor data-bs-theme="dark".

7. Slot-based icons (FR-16)

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