@aurea-uds/core 0.1.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aurea.css +1374 -677
- package/dist/aurea.css.d.ts +3 -0
- package/dist/aurea.js +53 -0
- package/package.json +2 -2
package/dist/aurea.js
CHANGED
|
@@ -112,6 +112,59 @@
|
|
|
112
112
|
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", initTocs);
|
|
113
113
|
else initTocs();
|
|
114
114
|
|
|
115
|
+
// ── Gaveta de navegação do AppShell: o foco ────────────────────────────────────────────
|
|
116
|
+
// O popover nativo NÃO entrega a mesma gestão de foco nos dois motores, e isto foi MEDIDO no
|
|
117
|
+
// item K1 (09/08/2026), abrindo a gaveta e dando oito Tabs:
|
|
118
|
+
//
|
|
119
|
+
// | Chromium | WebKit
|
|
120
|
+
// foco ao abrir | fica no disparador | vai para o <body>
|
|
121
|
+
// 1º Tab entra na gav. | sim | NENHUM dos oito
|
|
122
|
+
// Escape devolve foco | sim | não
|
|
123
|
+
//
|
|
124
|
+
// No WebKit a gaveta abre, fica visível, e o Tab passeia pelo conteúdo da página sem nunca
|
|
125
|
+
// entrar nela: quem navega por teclado no Safari abre a navegação e não consegue alcançá-la.
|
|
126
|
+
// É WCAG 2.1.1, e é barreira, não incômodo.
|
|
127
|
+
//
|
|
128
|
+
// O `AppShell` dizia, por escrito, que "o navegador entrega a volta do foco". Entregava —
|
|
129
|
+
// num motor só, e ninguém tinha como ver, porque a suíte rodava só no Chromium. É o que o
|
|
130
|
+
// cabeçalho do `shell-nav.spec` já temia: garantia de plataforma que ninguém verifica é
|
|
131
|
+
// garantia que some sem nada ficar vermelho.
|
|
132
|
+
//
|
|
133
|
+
// Então a gaveta passa a mover o foco ela mesma, IGUAL nos três motores — em vez de detectar
|
|
134
|
+
// qual navegador falha, que seria uma lista para manter. O custo está declarado: o shell
|
|
135
|
+
// deixou de ser "sem uma linha de JS nossa". Publicar barreira de teclado custa mais.
|
|
136
|
+
//
|
|
137
|
+
// O `toggle` NÃO borbulha, por isso o listener é de CAPTURA — a fase de captura alcança o
|
|
138
|
+
// alvo mesmo quando o evento não sobe. Trocar `true` por `false` aqui desliga tudo em
|
|
139
|
+
// silêncio, e é por isso que o teste cobre os três motores.
|
|
140
|
+
function focoDaGaveta(event) {
|
|
141
|
+
var gaveta = event.target;
|
|
142
|
+
if (!gaveta || !gaveta.matches || !gaveta.matches(".sidebar[popover]")) return;
|
|
143
|
+
// `!== "closed"` e não `=== "open"`: idêntico em efeito (o ToggleEvent só tem os dois
|
|
144
|
+
// valores), e a razão de ser esta forma está escrita no `layout.tsx`, ao lado da gêmea
|
|
145
|
+
// desta função. As duas ficam iguais para ninguém ler uma e "corrigir" a outra.
|
|
146
|
+
if (event.newState !== "closed") {
|
|
147
|
+
// O foco vai para o PRIMEIRO FOCÁVEL de dentro, e não para a gaveta. A primeira versão
|
|
148
|
+
// focava a gaveta — o leitor de tela anunciaria a região antes da lista — e ela reprovou
|
|
149
|
+
// no WebKit: focar o contêiner funciona, mas o Tab a partir DELE salta para FORA do
|
|
150
|
+
// popover (medido, com rastro de focusin/focusout). Ou seja, o WebKit não entra no
|
|
151
|
+
// conteúdo do popover pela tabulação nem quando o foco já está no elemento dele.
|
|
152
|
+
// Focando um item de dentro, o Tab seguinte anda na ordem do documento, dentro da lista.
|
|
153
|
+
// Nada se perde no anúncio: o leitor de tela nomeia a região ao entrar nela.
|
|
154
|
+
var primeiro = gaveta.querySelector(
|
|
155
|
+
'a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
156
|
+
if (primeiro) primeiro.focus();
|
|
157
|
+
else { gaveta.tabIndex = -1; gaveta.focus(); } // gaveta vazia: ao menos não fica órfão
|
|
158
|
+
} else if (!document.activeElement || document.activeElement === document.body ||
|
|
159
|
+
gaveta.contains(document.activeElement)) {
|
|
160
|
+
// Só devolve se o foco ficou órfão — ao fechar, o conteúdo some e o activeElement cai no
|
|
161
|
+
// <body>. Se a pessoa já moveu o foco para outro lugar, puxá-lo de volta seria roubo.
|
|
162
|
+
var invoker = gaveta.id && document.querySelector('[popovertarget="' + gaveta.id + '"]');
|
|
163
|
+
if (invoker) invoker.focus();
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
document.addEventListener("toggle", focoDaGaveta, true);
|
|
167
|
+
|
|
115
168
|
function toastStack() {
|
|
116
169
|
var stack = document.querySelector(".toast-stack");
|
|
117
170
|
if (!stack) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurea-uds/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
|
|
5
5
|
"keywords": ["aurea", "design-system", "css", "design-tokens"],
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dist"
|
|
17
17
|
],
|
|
18
18
|
"exports": {
|
|
19
|
-
"./css": "./dist/aurea.css",
|
|
19
|
+
"./css": {"types": "./dist/aurea.css.d.ts", "default": "./dist/aurea.css"},
|
|
20
20
|
"./js": "./dist/aurea.js"
|
|
21
21
|
}
|
|
22
22
|
}
|