palantir/blueprint

Background elements of Dialog/Drawer should be unfocus-able and hidden. Headers in background should not show up in screenreader heaver navigation

Open

#6.756 aberto em 4 de abr. de 2024

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (2.167 forks)batch import
Domain: accessibilityStatus: needs proposalType: bughelp wanted

Métricas do repositório

Stars
 (20.263 stars)
Métricas de merge de PR
 (Mesclagem média 43d 10h) (27 fundiu PRs em 30d)

Description

Environment

  • Package version(s): 5.8.2
  • Browser and OS versions: Edge, Chrome, MacOS Sonoma 14.4

Feature request

When a Dialog or Drawer is open, the background elements should be un-focusable and hidden. This is backed up by this source and this source. Otherwise, the screenreader cursor could focus on something behind the Dialog/Drawer.

Examples

Currently when navigating by headings (CTRL+OPT+U on Mac) using a screenreader, currently when a Dialog or Drawer is open, the headers in the content underneath the overlay are also included in header navigation, which is unexpected.

Guia do colaborador

Direção de pesquisa
Explore os componentes Dialog e Drawer no código fonte do Blueprint. Quando esses modais estão abertos, garanta que os elementos de fundo sejam definidos como aria hidden e os elementos focáveis sejam desabilitados. Verifique o foco trap existente e adicione aria hidden ao body ou container principal conforme necessário. Teste com um leitor de tela para verificar se os cabeçalhos de fundo não são anunciados.
Pilha de tecnologia
typescriptreact
Domain
frontend
Tipo Issue
Acessibilidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
ReactAccessibility
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70