Skip to main content

Toolbar

MSK Toolbar는 액션 버튼을 묶고 roving tabindex 키보드 내비게이션을 제공하는 primitive입니다. 토글 버튼(aria-pressed)도 지원합니다.

Preview​

Data API​

<div data-msk-toolbar role="toolbar" aria-label="서식">
  <button data-msk-toolbar-item aria-pressed="false">굵게</button>
  <button data-msk-toolbar-item aria-pressed="false">기울임</button>
  <button data-msk-toolbar-item aria-pressed="false">밑줄</button>
</div>

세로 배치는 aria-orientation="vertical"을 추가합니다.

JavaScript API​

window.MSK.ui.toolbar.init();

Events​

button.addEventListener('msk:toolbar-toggle', (event) => {
  console.log(event.detail.pressed);
});

Accessibility​

  • role="toolbar", 하나의 tab stop으로 묶이고 ←/→(세로는 ↑/↓)/Home/End로 이동합니다.
  • 토글 버튼은 aria-pressed를 동기화합니다.