TabItem

[Merieli]

O componente TabItem atual do nosso Design System não contempla todos os estados necessários para uma experiência completa e acessível. Hoje possuímos os estados Default, Hover e Active. Para garantir consistência e acessibilidade do componente, serão criadas as variações dos estados Focus e Disabled.

Essas novas variações visam fornecer aos usuários e desenvolvedores um comportamento previsível e acessível ao navegar pelas abas, mantendo o padrão visual e a uniformidade do nosso DS.

Exemplo visual

Justificativa / Por que é Importante?

• Melhoria de acessibilidade: Estado de focus são fundamentais para usuários que navegam via teclado ou leitores de tela, garantindo que o componente seja identificável e utilizável por todos.
• Confiabilidade visual e funcional: A presença do estado disabled reforça o entendimento do usuário sobre quais abas estão indisponíveis no momento, evitando interações frustradas.
• Padronização e consistência: Ao incluir esses estados no componente base, evitamos que cada time crie sua própria solução, garantindo uma experiência uniforme em todas as aplicações que utilizam o DS.

Figma

Atualização de componentes

[Merieli]

Adicionado no PR do IndexTable #398

[Merieli]

PR concluído e mergeado.