@kenlo/kdls-design-system 2.12.1 → 2.13.0

package/kdls-manifest.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "name": "@kenlo/kdls-design-system",
-    "version": "2.12.1"
+    "version": "2.13.0"
   },
   "install": {
     "add": "npm install @kenlo/kdls-design-system",
@@ -14,7 +14,7 @@
   "counts": {
     "components": 60,
     "propsTables": 85,
-    "props": 735,
+    "props": 740,
     "tokens": 552,
     "api": 12,
     "icons": 49
@@ -1472,6 +1472,20 @@
           "description": "Marca o campo como obrigatório — asterisco no label e aria-required na caixa",
           "example": "required"
         },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome acessível da caixa — usar quando não há label visível (ex.: caixa de seleção de uma linha da tabela). Com label e aria-label, o leitor de tela lê a aria-label",
+          "example": "aria-label=\"Selecionar imóvel AP0123\""
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": "—",
+          "description": "Id do elemento visível que nomeia a caixa (ex.: o título da linha) — preferir a aria-label quando esse texto já está na tela. Se os dois forem passados, este vence",
+          "example": "aria-labelledby=\"titulo-imovel-123\""
+        },
         {
           "name": "className",
           "type": "string",
@@ -5189,14 +5203,14 @@
           "name": "hoverable",
           "type": "boolean",
           "default": "false",
-          "description": "Deixa a linha inteira clicável (cursor, foco e destaque) — igual ao hoverable do Card. Sem efeito sem onRowClick",
+          "description": "Deixa a linha inteira clicável (cursor, foco e destaque) — igual ao hoverable do Card. A linha recebe o foco do Tab e continua uma linha da tabela para o leitor de tela, com cada célula lida junto do título da coluna. Sem efeito sem onRowClick",
           "example": "hoverable"
         },
         {
           "name": "onRowClick",
           "type": "(row: T) => void",
           "default": "—",
-          "description": "Disparado ao clicar em qualquer ponto da linha que não seja um elemento interativo (botão, link, checkbox) — usar com hoverable",
+          "description": "Disparado ao clicar em qualquer ponto da linha que não seja um elemento interativo (botão, link, checkbox) e com Enter ou Espaço quando o foco está na própria linha — a tecla apertada num controle dentro da linha fica com ele. Usar com hoverable",
           "example": "onRowClick={row => navigate(`/contratos/${row.id}`)}"
         },
         {
@@ -5269,7 +5283,7 @@
           "name": "title",
           "type": "string",
           "default": "—",
-          "description": "Título exibido no cabeçalho. '' ou omitido não exibe rótulo visível — a coluna continua alinhada com a grade",
+          "description": "Título exibido no cabeçalho — é também o título de coluna que o leitor de tela lê junto de cada valor. '' ou omitido não exibe rótulo visível — a coluna continua alinhada com a grade, e o lugar dela no cabeçalho é uma célula comum",
           "example": "title: 'Status'"
         },
         {
@@ -5311,7 +5325,7 @@
           "name": "sortable",
           "type": "boolean | ((a: T, b: T) => number)",
           "default": "—",
-          "description": "true = ordenação delegada ao backend (a Table só reporta o estado via onSortChange, não reordena rows) · função = ordena no front com esse comparator — trate datas e números dentro dele",
+          "description": "true = ordenação delegada ao backend (a Table só reporta o estado via onSortChange, não reordena rows) · função = ordena no front com esse comparator — trate datas e números dentro dele. O título vira um botão dentro do título de coluna, que anuncia a ordem ao leitor de tela (aria-sort)",
           "example": "sortable: (a, b) => a.createdAt.getTime() - b.createdAt.getTime()"
         },
         {
@@ -5703,6 +5717,20 @@
           "description": "Desabilita toda interação no controle — bloqueia todos os itens",
           "example": "disabled"
         },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome acessível do grupo — usar quando nenhum título visível nomeia as opções. Sem nome, o leitor de tela anuncia só as opções (\"10, rádio, 1 de 5\"), sem dizer do que são",
+          "example": "aria-label=\"Quartos\""
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "default": "—",
+          "description": "Id do elemento visível que nomeia o grupo — preferir a aria-label quando o título já está na tela. Se os dois forem passados, este vence",
+          "example": "aria-labelledby=\"titulo-quartos\""
+        },
         {
           "name": "className",
           "type": "string",
@@ -5753,6 +5781,13 @@
           "default": "false",
           "description": "Desabilita apenas este item",
           "example": "disabled"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": "—",
+          "description": "Nome do item para o leitor de tela — obrigatório na prática quando o item mostra só ícone, que sem ele não tem nome",
+          "example": "'aria-label': 'Grade'"
         }
       ],
       "subComponents": []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/kdls-design-system",
-  "version": "2.12.1",
+  "version": "2.13.0",
   "private": false,
   "type": "module",
   "description": "KDLS Design System — componentes React + TypeScript",