npm - @seniorsistemas/angular-components - Versions diffs - 19.5.4 → 19.5.5 - Mend

@seniorsistemas/angular-components 19.5.4 → 19.5.5

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.

Files changed (77) hide show

package/shared/lib/accessibility/datepicker-no-period-tab.directive.d.ts ADDED Viewed

@@ -0,0 +1,177 @@
+import { OnDestroy } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Diretiva para corrigir a acessibilidade do painel do DatePicker PrimeNG.
+ *
+ * Resolve os seguintes problemas:
+ *
+ * 1. **Foco inicial ao abrir overlay**: move foco programaticamente para
+ *    a célula selecionada, hoje, ou primeira célula disponível — evitando
+ *    que NVDA leia toda estrutura do grid ao entrar no painel.
+ *
+ * 2. **Re-foco ao trocar view (mês/ano)**: ao navegar para views de mês ou
+ *    ano, o DOM é destruído e recriado. Sem intervenção, foco escapa para
+ *    `<body>` e NVDA lê conteúdo fora do overlay. A diretiva re-foca o
+ *    primeiro elemento interativo da nova view.
+ *
+ * 3. **Focus-visible nos elementos internos**: injeta CSS global com
+ *    outline para todos elementos interativos do overlay, garantindo
+ *    feedback visual mesmo com `appendTo="body"`.
+ *
+ * 4. **aria-label enriquecido nos day cells**: PrimeNG seta apenas o
+ *    número do dia. A diretiva sobrescreve com data completa formatada
+ *    (ex: "3 de junho de 2026, Qua") — NVDA narra label sem precisar
+ *    contextualizar toda grid.
+ *
+ * 5. **View de meses/anos sem tabindex**: spans de mês/ano recebem
+ *    `tabindex="0"` e `role="option"` para navegação por teclado.
+ *
+ * Utiliza `MutationObserver` para detectar mudanças internas de view,
+ * já que PrimeNG não emite eventos para essas transições.
+ *
+ * **CSS**: A diretiva injeta um `<style>` global no `<head>` (uma vez).
+ * Para projetos que preferem controle manual, desabilite via Input
+ * `[sDatepickerInjectStyles]="false"` e importe os estilos manualmente.
+ *
+ * Uso: `<p-datepicker sDatepickerNoPeriodTab ...>`
+ *
+ * @category Directives
+ */
+export declare class DatepickerNoPeriodTabDirective implements OnDestroy {
+    private readonly datePicker;
+    private readonly renderer;
+    private readonly locale;
+    private readonly document;
+    private observer;
+    private focusListenerCleanups;
+    constructor();
+    onPanelShow(): void;
+    onNavigationChange(): void;
+    ngOnDestroy(): void;
+    /**
+     * Move foco para melhor alvo disponível no painel.
+     * Usado ao abrir overlay e ao trocar view (mês/ano).
+     *
+     * Ao abrir: evita que NVDA leia toda estrutura do grid.
+     * Ao trocar view: previne foco escapar para `<body>` quando
+     * PrimeNG destrói DOM da view anterior.
+     *
+     * Prioridade: selecionado > hoje > primeiro disponível.
+     * Pula se foco já está no target correto (evita double-announce no NVDA).
+     */
+    private focusBestTarget;
+    /**
+     * Injeta CSS global de focus-visible no `<head>` do documento.
+     * Executa apenas uma vez (idempotente via ID do style element).
+     * Necessário porque overlay com `appendTo="body"` fica fora do
+     * escopo de ViewEncapsulation do componente host.
+     */
+    private injectGlobalFocusStyles;
+    /**
+     * Encontra melhor elemento para receber foco no painel atual.
+     * Busca em ordem: selecionado → hoje → primeiro disponível.
+     * Funciona para views de dias, meses e anos.
+     */
+    private findFocusTarget;
+    /**
+     * Aplica correções de acessibilidade no painel do DatePicker,
+     * independente da view interna ativa (dias, meses ou anos).
+     */
+    private fixPanelAccessibility;
+    /**
+     * Adiciona `role="gridcell"` nos `<span class="p-datepicker-day">` que recebem foco.
+     *
+     * PrimeNG coloca `tabindex` no `<span>` dentro do `<td>`, mas sem role explícito.
+     * NVDA não entra automaticamente em focus mode quando foca um elemento sem
+     * role de widget (gridcell, button, etc). Resultado: NVDA fica em browse mode
+     * e lê toda a tabela sequencialmente ao invés de anunciar só a célula focada.
+     *
+     * Ao adicionar `role="gridcell"` no span focável, NVDA reconhece que é um
+     * widget interativo e entra em focus mode — anunciando apenas o aria-label
+     * da célula focada.
+     */
+    private applyGridcellRoleToDays;
+    /**
+     * Enriquece `aria-label` dos day cells com data completa formatada.
+     * PrimeNG por padrão usa apenas o número do dia, forçando NVDA
+     * a narrar contexto de grid (linha/coluna/weekday) para informar a data.
+     * Com aria-label completo, NVDA narra diretamente a data sem verbosidade.
+     */
+    private enrichDayCellAriaLabels;
+    /**
+     * Adiciona aria-label no grid com mês/ano atual para dar contexto
+     * imediato ao NVDA ao entrar na tabela de dias.
+     * Exemplo: "Calendário, Junho 2026"
+     */
+    private enrichGridAriaLabel;
+    /**
+     * Formata data para aria-label legível por leitor de tela.
+     * Sempre usa pt-BR para garantir consistência com labels traduzidos,
+     * independente do LOCALE_ID configurado no Angular.
+     * Exemplo: "3 de junho de 2026"
+     */
+    private formatDateForAriaLabel;
+    /**
+     * Retorna locale string para formatação.
+     */
+    private getLocale;
+    /**
+     * Traduz aria-labels dos botões do header que PrimeNG renderiza em inglês.
+     * PrimeNG usa `getTranslation('chooseDate')` etc, que retorna inglês
+     * se `PrimeNGConfig.setTranslation()` não foi configurado pelo projeto.
+     *
+     * Busca botões com aria-label em inglês e traduz pro locale atual.
+     */
+    private translateAriaLabels;
+    /**
+     * Corrige aria-label dos botões prev/next do PrimeNG.
+     * PrimeNG usa `p-button` component que seta `aria-label` no host element `<p-button>`,
+     * mas NVDA foca o `<button>` interno que não herda o label do custom element.
+     *
+     * Estrutura DOM: `<p-button aria-label="Previous Month"><button class="p-datepicker-prev-button">...</button></p-button>`
+     *
+     * Fix: lê aria-label do `<p-button>` host, traduz, e propaga pro `<button>` interno.
+     */
+    private fixNavigationButtonLabels;
+    /**
+     * Remove `role="application"` do container do calendário.
+     *
+     * PrimeNG seta `role="application"` no `.p-datepicker-calendar-container`
+     * para que arrow keys cheguem no JavaScript sem interceptação do browse mode.
+     * Porém `role="grid"` na table já garante esse comportamento — NVDA entra
+     * automaticamente em focus mode ao focar uma gridcell.
+     *
+     * O `role="application"` no container PAI causa NVDA a despeja o conteúdo
+     * virtual do container inteiro ao entrar no dialog, antes de pousar na célula.
+     * Removê-lo resolve a leitura excessiva sem quebrar navegação por setas.
+     */
+    private removeApplicationRoleFromContainer;
+    /**
+     * Retorna mapa de traduções pro locale atual.
+     * Se locale é inglês ou não reconhecido, fallback pra pt-BR
+     * (assumimos que labels em inglês devem ser traduzidos).
+     */
+    private getTranslations;
+    /**
+     * Adiciona listeners de focus/blur nos elementos interativos para
+     * garantir indicador visual quando `.focus()` é chamado programaticamente.
+     *
+     * `:focus-visible` pode não ser aplicado quando foco é movido via JS,
+     * então usamos classe auxiliar `s-datepicker-day-focused` como fallback.
+     */
+    private setupFocusTracking;
+    /**
+     * Remove listeners de focus/blur registrados anteriormente.
+     */
+    private removeFocusListeners;
+    /**
+     * Observa mudanças no DOM do painel para reaplicar correções
+     * quando o PrimeNG troca a view interna (dias → meses → anos).
+     * Usa debounce e só reage a childList changes (não attributes)
+     * para evitar loop infinito com as próprias mutações da diretiva.
+     */
+    private observePanelChanges;
+    private disconnectObserver;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DatepickerNoPeriodTabDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DatepickerNoPeriodTabDirective, "[sDatepickerNoPeriodTab]", never, {}, {}, never, never, true, never>;
+}

package/shared/public-api.d.ts CHANGED Viewed

@@ -4,5 +4,6 @@ export { EnumSeverity } from './lib/shared/models/severities';
 export { BorderButtonComponent } from './lib/shared/border-button/border-button.component';
 export { BorderButtonModule } from './lib/shared/border-button/border-button.module';
 export * from './lib/shared/helpers';
+export { DatepickerNoPeriodTabDirective } from './lib/accessibility/datepicker-no-period-tab.directive';
 export { PaginatorAccessibilityDirective } from './lib/accessibility/paginator-accessibility.directive';
 export { TableCheckboxAccessibilityDirective } from './lib/accessibility/table-checkbox-accessibility.directive';