Kbd
Tecla — mostra uma tecla ou um atalho, como Ctrl K, no texto, num menu ou numa dica. Ele só exibe as teclas; o atalho em si fica por sua conta.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Kbd } from "@camaleo/react";Anatomia
Um <kbd> para cada tecla. Uma combinação são vários Kbd lado a lado, não um só.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
Combinações
Use um Kbd por tecla. Assim a pessoa vê de relance quantas teclas são e quais.
Símbolos do Mac
O leitor de tela não sabe ler ⌘ nem ⌥. Esconda o símbolo com aria-hidden e coloque o nome da tecla com VisuallyHidden.
- Windows e Linux
- CtrlShiftZ
- macOS
- Z
Windows e Mac
A mesma ação usa Ctrl no Windows e ⌘ no Mac. Se você não sabe o sistema da pessoa, mostre os dois, cada um com o nome.
Ir para a caixa de entradaGdepoisI
Ir para os rascunhosGdepoisD
Uma tecla, depois outra
Quando as teclas são apertadas uma de cada vez, escreva "depois" entre elas. Sem isso, a pessoa aperta as duas juntas.
Num menu
Abra o menu. O atalho fica no fim de cada item, e a pessoa aprende enquanto clica. O aria-keyshortcuts conta as teclas para o leitor de tela.
Numa dica
Passe o mouse ou foque o botão. A dica ensina o atalho bem na hora em que a pessoa usa a ação.
Paleta de comandos:CtrlShiftP
Trocar um atalho
Clique em "Trocar atalho" e aperte as novas teclas. Tab e Esc nunca são gravados: o Tab segue em frente e o Esc cancela. Quem usa teclado sempre consegue sair.
Em contexto
O atalho aparece onde a pessoa age. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Atalhos de teclado
Boas práticas
Teclas separadas mostram quantas são, e cada uma parece mesmo uma tecla.
"Ctrl + S" numa caixa só parece uma tecla com um nome estranho.
Abrir a paleta de comandosK
O leitor de tela pula o ⌘ ou lê um nome que ninguém entende. Coloque "Command" como texto escondido.
Aperte ctrl e k para buscar
"Aperte ctrl e k" se mistura com o texto, e quem lê por cima não vê.
Props
O Kbd não tem props próprias. Ele renderiza um <kbd> e aceita os atributos dele, como className e style.
Styling hooks
Mude o visual sem copiar o componente: use o slot ou defina os tokens num elemento pai, num estilo ou na própria tecla.
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O Kbd não cria o atalho. Você escuta as teclas no seu código e coloca aria-keyshortcuts no controle que ele aciona, como "Control+S".
- Símbolos como ⌘, ⌥ e ⇧ precisam de um nome em texto. Esconda o símbolo com aria-hidden e coloque o nome com VisuallyHidden. Muitos leitores de tela ignoram o aria-label num <kbd>.
- Nunca tome para você o Tab, o Shift+Tab ou o Esc. A pessoa precisa deles para andar pela página e para sair (WCAG 2.1.2).
- Atalho de uma tecla só, como / ou ?, precisa poder ser desligado, ou só funcionar quando a área dele está em foco (WCAG 2.1.4).