Open demo

CSS code

HTML 
<div class="grp" role="group" aria-label="View density" data-toggle-group="single">
  <button type="button" aria-pressed="true">Comfortable</button>
  <button type="button" aria-pressed="false">Cosy</button>
  <button type="button" aria-pressed="false">Compact</button>
</div>

<div class="grp-bar" role="toolbar" aria-label="Text formatting">
  <div class="grp" role="group" aria-label="Style" data-toggle-group="multiple">
    <button type="button" aria-pressed="true" aria-label="Bold"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 010 7H7zM7 12h7a3.5 3.5 0 010 7H7z"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Italic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5h-5M14 19H9M14 5l-4 14"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Underline"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4v7a5 5 0 0010 0V4M5 20h14"/></svg></button>
  </div>
  <hr>
  <div class="grp" role="group" aria-label="Alignment" data-toggle-group="single">
    <button type="button" aria-pressed="true" aria-label="Align left"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h13"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Align centre"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M7 12h10M6 18h12"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Align right"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M10 12h10M7 18h13"/></svg></button>
  </div>
</div>

<div class="grp grp-vert" role="group" aria-label="Sort order" data-toggle-group="single">
  <button type="button" aria-pressed="false">Newest first</button>
  <button type="button" aria-pressed="true">Most popular</button>
  <button type="button" aria-pressed="false">Price, low to high</button>
</div>
CSS 
/* Attached groups of aria-pressed toggle buttons, a formatting toolbar and a vertical stack.
   data-toggle-group="single" keeps one button pressed; "multiple" lets each toggle on its own. */
.grp{display:inline-flex}
.grp button{position:relative;border:1px solid #838b9b;margin-left:-1px;padding:10px 18px;background:#fff;
  font:inherit;font-size:.87rem;font-weight:600;line-height:normal;color:#344054;cursor:pointer;
  transition:background-color .16s,color .16s}
.grp button:first-child{border-radius:9px 0 0 9px;margin-left:0}
.grp button:last-child{border-radius:0 9px 9px 0}
.grp button:hover{background:#f4f5f9;color:#101828;z-index:1}
.grp button[aria-pressed=true]{background:#101828;border-color:#101828;color:#fff;z-index:1}
.grp button:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;z-index:2}
/* toolbar */
.grp-bar{display:flex;gap:10px;background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:7px}
.grp-bar .grp button{border:0;padding:0;margin:0;width:36px;height:36px;display:grid;place-items:center;
  border-radius:8px;color:#667085}
.grp-bar .grp button:hover{background:#f2f4f7;color:#101828}
.grp-bar .grp button[aria-pressed=true]{background:#eef2ff;color:#4f46e5}
.grp-bar svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.grp-bar hr{border:0;border-left:1px solid #e9ecf1;margin:4px 2px}
/* vertical */
.grp-vert{flex-direction:column}
.grp-vert button{margin:-1px 0 0;text-align:left}
.grp-vert button:first-child{border-radius:9px 9px 0 0;margin-top:0}
.grp-vert button:last-child{border-radius:0 0 9px 9px}
@media (prefers-reduced-motion:reduce){.grp button{transition:none}}
JavaScript 
// Toggle groups: "single" presses the clicked button and releases the rest, "multiple" flips just the clicked one.
document.querySelectorAll('[data-toggle-group]').forEach(group => {
  const single = group.dataset.toggleGroup === 'single';
  group.addEventListener('click', e => {
    const btn = e.target.closest('button[aria-pressed]');
    if (!btn || !group.contains(btn)) return;
    if (single) group.querySelectorAll('button[aria-pressed]').forEach(b => b.setAttribute('aria-pressed', String(b === btn)));
    else btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
  });
});
// Toolbars: one Tab stop; Left/Right arrows, Home and End move focus between the buttons.
document.querySelectorAll('[role=toolbar]').forEach(bar => {
  const items = [...bar.querySelectorAll('button')];
  if (!items.length) return;
  const setCurrent = cur => items.forEach(b => { b.tabIndex = b === cur ? 0 : -1; });
  setCurrent(items[0]);
  bar.addEventListener('keydown', e => {
    const i = items.indexOf(document.activeElement);
    if (i < 0) return;
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: items.length - 1 }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    const target = items[(next + items.length) % items.length];
    setCurrent(target); target.focus();
  });
  bar.addEventListener('click', e => { const b = e.target.closest('button'); if (b && items.includes(b)) setCurrent(b); });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="btn-group grp" role="group" aria-label="View density" data-toggle-group="single">
  <button type="button" class="btn" aria-pressed="true">Comfortable</button>
  <button type="button" class="btn" aria-pressed="false">Cosy</button>
  <button type="button" class="btn" aria-pressed="false">Compact</button>
</div>

<div class="btn-toolbar grp-bar" role="toolbar" aria-label="Text formatting">
  <div class="btn-group grp" role="group" aria-label="Style" data-toggle-group="multiple">
    <button type="button" class="btn" aria-pressed="true" aria-label="Bold"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 010 7H7zM7 12h7a3.5 3.5 0 010 7H7z"/></svg></button>
    <button type="button" class="btn" aria-pressed="false" aria-label="Italic"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5h-5M14 19H9M14 5l-4 14"/></svg></button>
    <button type="button" class="btn" aria-pressed="false" aria-label="Underline"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4v7a5 5 0 0010 0V4M5 20h14"/></svg></button>
  </div>
  <hr>
  <div class="btn-group grp" role="group" aria-label="Alignment" data-toggle-group="single">
    <button type="button" class="btn" aria-pressed="true" aria-label="Align left"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M4 12h10M4 18h13"/></svg></button>
    <button type="button" class="btn" aria-pressed="false" aria-label="Align centre"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M7 12h10M6 18h12"/></svg></button>
    <button type="button" class="btn" aria-pressed="false" aria-label="Align right"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16M10 12h10M7 18h13"/></svg></button>
  </div>
</div>

<div class="btn-group-vertical grp grp-vert" role="group" aria-label="Sort order" data-toggle-group="single">
  <button type="button" class="btn" aria-pressed="false">Newest first</button>
  <button type="button" class="btn" aria-pressed="true">Most popular</button>
  <button type="button" class="btn" aria-pressed="false">Price, low to high</button>
</div>
CSS 
/* Attached groups of aria-pressed toggle buttons: Bootstrap .btn-group, .btn-toolbar and .btn-group-vertical,
   restyled through --bs-btn-* variables. data-toggle-group="single" keeps one pressed; "multiple" toggles each. */
.grp .btn{--bs-btn-padding-x:18px;--bs-btn-padding-y:10px;--bs-btn-font-size:.87rem;--bs-btn-font-weight:600;
  --bs-btn-line-height:normal;--bs-btn-border-radius:9px;--bs-btn-border-color:#838b9b;
  --bs-btn-color:#344054;--bs-btn-bg:#fff;--bs-btn-hover-color:#101828;--bs-btn-hover-bg:#f4f5f9;
  --bs-btn-hover-border-color:#838b9b;--bs-btn-active-color:#101828;--bs-btn-active-bg:#f4f5f9;
  --bs-btn-active-border-color:#838b9b;--bs-btn-focus-box-shadow:none;transition:background-color .16s,color .16s}
.grp .btn[aria-pressed=true]{--bs-btn-color:#fff;--bs-btn-bg:#101828;--bs-btn-border-color:#101828;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:#101828;--bs-btn-hover-border-color:#101828;
  --bs-btn-active-color:#fff;--bs-btn-active-bg:#101828;--bs-btn-active-border-color:#101828;z-index:1}
.grp .btn:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;z-index:2}
/* toolbar */
.grp-bar{gap:10px;background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:7px}
.grp-bar .grp .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-width:0;--bs-btn-color:#667085;
  --bs-btn-bg:transparent;--bs-btn-hover-bg:#f2f4f7;--bs-btn-active-bg:#f2f4f7;
  width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center}
.grp-bar .grp .btn[aria-pressed=true]{--bs-btn-color:#4f46e5;--bs-btn-bg:#eef2ff;--bs-btn-hover-color:#4f46e5;
  --bs-btn-hover-bg:#eef2ff;--bs-btn-active-color:#4f46e5;--bs-btn-active-bg:#eef2ff}
.grp-bar .btn-group>.btn.btn{border-radius:8px;margin-left:0}
.grp-bar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
.grp-bar hr{border:0;border-left:1px solid #e9ecf1;margin:4px 2px;opacity:1}
/* vertical */
.grp-vert .btn{text-align:left}
@media (prefers-reduced-motion:reduce){.grp .btn{transition:none}}
JavaScript 
// Toggle groups: "single" presses the clicked button and releases the rest, "multiple" flips just the clicked one.
document.querySelectorAll('[data-toggle-group]').forEach(group => {
  const single = group.dataset.toggleGroup === 'single';
  group.addEventListener('click', e => {
    const btn = e.target.closest('button[aria-pressed]');
    if (!btn || !group.contains(btn)) return;
    if (single) group.querySelectorAll('button[aria-pressed]').forEach(b => b.setAttribute('aria-pressed', String(b === btn)));
    else btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
  });
});
// Toolbars: one Tab stop; Left/Right arrows, Home and End move focus between the buttons.
document.querySelectorAll('[role=toolbar]').forEach(bar => {
  const items = [...bar.querySelectorAll('button')];
  if (!items.length) return;
  const setCurrent = cur => items.forEach(b => { b.tabIndex = b === cur ? 0 : -1; });
  setCurrent(items[0]);
  bar.addEventListener('keydown', e => {
    const i = items.indexOf(document.activeElement);
    if (i < 0) return;
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: items.length - 1 }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    const target = items[(next + items.length) % items.length];
    setCurrent(target); target.focus();
  });
  bar.addEventListener('click', e => { const b = e.target.closest('button'); if (b && items.includes(b)) setCurrent(b); });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="inline-flex" role="group" aria-label="View density" data-toggle-group="single">
  <button type="button" aria-pressed="true" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -ml-px first:ml-0 first:rounded-l-[9px] last:rounded-r-[9px]">Comfortable</button>
  <button type="button" aria-pressed="false" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -ml-px first:ml-0 first:rounded-l-[9px] last:rounded-r-[9px]">Cosy</button>
  <button type="button" aria-pressed="false" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -ml-px first:ml-0 first:rounded-l-[9px] last:rounded-r-[9px]">Compact</button>
</div>

<div class="flex gap-2.5 rounded-xl border border-[#e4e7ec] bg-white p-[7px]" role="toolbar" aria-label="Text formatting">
  <div class="inline-flex" role="group" aria-label="Style" data-toggle-group="multiple">
    <button type="button" aria-pressed="true" aria-label="Bold" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M7 5h6a3.5 3.5 0 010 7H7zM7 12h7a3.5 3.5 0 010 7H7z"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Italic" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M15 5h-5M14 19H9M14 5l-4 14"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Underline" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M7 4v7a5 5 0 0010 0V4M5 20h14"/></svg></button>
  </div>
  <hr class="mx-0.5 my-1 h-auto border-0 border-l border-[#e9ecf1]">
  <div class="inline-flex" role="group" aria-label="Alignment" data-toggle-group="single">
    <button type="button" aria-pressed="true" aria-label="Align left" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M4 6h16M4 12h10M4 18h13"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Align centre" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M4 6h16M7 12h10M6 18h12"/></svg></button>
    <button type="button" aria-pressed="false" aria-label="Align right" class="grid size-9 cursor-pointer place-items-center rounded-lg text-[#667085] transition-[background-color,color] duration-[160ms] hover:bg-[#f2f4f7] hover:text-[#101828] aria-pressed:bg-[#eef2ff] aria-pressed:text-[#4f46e5] focus-visible:relative focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none"><svg viewBox="0 0 24 24" aria-hidden="true" class="block size-4 fill-none stroke-current stroke-[2.2]"><path d="M4 6h16M10 12h10M7 18h13"/></svg></button>
  </div>
</div>

<div class="inline-flex flex-col" role="group" aria-label="Sort order" data-toggle-group="single">
  <button type="button" aria-pressed="false" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -mt-px text-left first:mt-0 first:rounded-t-[9px] last:rounded-b-[9px]">Newest first</button>
  <button type="button" aria-pressed="true" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -mt-px text-left first:mt-0 first:rounded-t-[9px] last:rounded-b-[9px]">Most popular</button>
  <button type="button" aria-pressed="false" class="relative cursor-pointer border border-[#838b9b] bg-white px-[18px] py-2.5 text-[.87rem] font-semibold text-[#344054] transition-[background-color,color] duration-[160ms] hover:z-[1] hover:bg-[#f4f5f9] hover:text-[#101828] aria-pressed:z-[1] aria-pressed:border-[#101828] aria-pressed:bg-[#101828] aria-pressed:text-white focus-visible:z-[2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] motion-reduce:transition-none -mt-px text-left first:mt-0 first:rounded-t-[9px] last:rounded-b-[9px]">Price, low to high</button>
</div>
JavaScript 
// Toggle groups: "single" presses the clicked button and releases the rest, "multiple" flips just the clicked one.
document.querySelectorAll('[data-toggle-group]').forEach(group => {
  const single = group.dataset.toggleGroup === 'single';
  group.addEventListener('click', e => {
    const btn = e.target.closest('button[aria-pressed]');
    if (!btn || !group.contains(btn)) return;
    if (single) group.querySelectorAll('button[aria-pressed]').forEach(b => b.setAttribute('aria-pressed', String(b === btn)));
    else btn.setAttribute('aria-pressed', String(btn.getAttribute('aria-pressed') !== 'true'));
  });
});
// Toolbars: one Tab stop; Left/Right arrows, Home and End move focus between the buttons.
document.querySelectorAll('[role=toolbar]').forEach(bar => {
  const items = [...bar.querySelectorAll('button')];
  if (!items.length) return;
  const setCurrent = cur => items.forEach(b => { b.tabIndex = b === cur ? 0 : -1; });
  setCurrent(items[0]);
  bar.addEventListener('keydown', e => {
    const i = items.indexOf(document.activeElement);
    if (i < 0) return;
    const next = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: items.length - 1 }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    const target = items[(next + items.length) % items.length];
    setCurrent(target); target.focus();
  });
  bar.addEventListener('click', e => { const b = e.target.closest('button'); if (b && items.includes(b)) setCurrent(b); });
});

About this set

Three ways to join buttons into one control. An attached horizontal group picks a view density, Comfortable, Cosy or Compact. A formatting toolbar holds two groups of icon buttons, bold, italic and underline, then left, centre and right alignment, separated by a thin rule. A vertical stack picks a sort order, Newest first, Most popular or Price, low to high. Every button is a toggle with aria-pressed, and a short script keeps the state honest: groups marked data-toggle-group=”single” press the clicked button and release the rest, while the text style group is marked multiple, so bold, italic and underline switch on and off independently. The toolbar follows the ARIA toolbar pattern: it is one Tab stop, and the Left and Right arrow keys, Home and End move focus between its six buttons. Pressed buttons turn near-black in the attached groups and pale indigo in the toolbar. Use attached groups for mutually exclusive view options and the toolbar for editor controls. The Bootstrap version uses .btn-group, .btn-toolbar and .btn-group-vertical, and the Tailwind version uses aria-pressed variants with first: and last: for the rounded ends.

What’s included

  • Attached horizontal group, icon toolbar and vertical stack
  • Toggle state kept in aria-pressed and styled from it
  • Single-choice and multiple-choice group behaviour
  • Toolbar arrow-key navigation with one Tab stop
  • Borders darkened to 3:1 against the page

Accessibility

Each group has role="group" and an aria-label, the toolbar has role="toolbar", and every icon button has an aria-label with its SVG hidden. Pressed state is exposed through aria-pressed. Inside the toolbar, Left and Right arrows, Home and End move focus and Tab leaves it. Keyboard focus draws a 2px indigo outline above neighbouring buttons, and colour transitions are removed under prefers-reduced-motion.

Customise it

Change the border #838b9b and the pressed colours in the .grp button[aria-pressed=true] and .grp-bar rules. In Bootstrap edit the --bs-btn-border-color and --bs-btn-bg variables on .grp .btn and its [aria-pressed=true] rule; in Tailwind edit the border-, aria-pressed:bg- and aria-pressed:text- utilities.