Contribuição open source · Astro · TypeScript · a11y · i18n
akitaonrails/
Site e documentação oficial do projeto ai-memory, com suporte a múltiplos idiomas (i18n), internacionalização da direita para a esquerda (RTL) e rigorosa conformidade com padrões de acessibilidade W3C/WAI-ARIA.
- 3 PRs incorporados
- 4 commits no projeto
- +78 linhas adicionadas
- 9 estrelas no GitHub
O projeto
O ai-memory-web é o portal oficial e centro de documentação do ecossistema ai-memory. Construído com Astro, TypeScript e Tailwind CSS, o site atende desenvolvedores do mundo todo com suporte nativo a múltiplos idiomas, incluindo idiomas com leitura da direita para a esquerda (RTL), como o hebraico.
Por ser a porta de entrada de um projeto open source de relevância global na comunidade de IA, a experiência de navegação precisa ser impecável em qualquer resolução de tela e rigorosamente acessível para usuários de tecnologias assistivas e leitores de tela. As contribuições abaixo eliminaram transbordamentos de layout, adaptaram o teclado para leitura espelhada e corrigiram violações das diretrizes WAI-ARIA.
Destaques
Os PRs com maior efeito para quem depende do projeto no dia a dia.
-
#1mergeado em 23/09/2026
Eliminação de rolagem horizontal e bloqueio de fundo no menu móvel
A navegação no site do ai-memory passou a ser fluida em qualquer tamanho de tela ou celular, sem o visitante perder o enquadramento ao rolar a página ou ficar com o menu desorientado no celular.
-
#3mergeado em 29/09/2026
Conformidade com padrões ARIA na rolagem de texto e no letreiro para leitores de tela
Garante que pessoas que utilizam leitores de tela ou tecnologias assistivas escutem perfeitamente cada frase e proposta de valor do projeto, sem nenhuma perda de efeito visual ou performance para quem enxerga a tela.
Como cada PR foi feito
-
Um problema por PR
Cada PR resolve uma coisa só, com a menor mudança possível. Isso simplifica a revisão, reduz o risco de efeito colateral e permite desfazer uma mudança sem levar outras junto.
-
O problema vira teste
As correções chegam com testes automatizados que cobrem o caso que falhava, para o problema não voltar sem que ninguém perceba.
-
Os critérios do próprio projeto
Formatação, análise estática e a suíte completa de testes rodam na integração contínua do projeto, e a mudança só entra depois da revisão do mantenedor.
-
Escrito para quem revisa
A descrição de cada PR explica o problema, a mudança e como ela foi testada, para o mantenedor decidir com segurança.
Cada PR, em linguagem de negócio
Clique em um PR para ver o problema, o que foi feito e o valor entregue. O link no fim de cada um leva à discussão técnica completa no GitHub.
-
#3mergeado em 29/09/2026 Conformidade com padrões ARIA na rolagem de texto e no letreiro para leitores de tela Efeitos de rolagem de texto e o letreiro de agentes usavam rótulos ARIA proibidos pela especificação W3C em parágrafos e divs, correndo o risco de leitores de tela ignorarem o texto; o PR expõe o conteúdo no HTML acessível sem alterar o design visual.
- O problema
- As frases que acendem conforme o leitor rola a página e o letreiro animado que mostra agentes compatíveis colocavam o atributo aria-label diretamente em elementos de parágrafo e divisões comuns (<div>), o que é proibido pelas diretrizes da W3C/WAI-ARIA. Como muitos leitores de tela ignoram esse atributo nessas tags e as palavras internas estavam marcadas como invisíveis (aria-hidden), pessoas com deficiência visual corriam o risco de ter frases inteiras da home e das páginas institucionais omitidas.
- O que foi feito
- O atributo proibido foi removido, as palavras voltaram à árvore de acessibilidade como texto comum com opacidade visual preservada, e a mensagem do letreiro foi inserida como parágrafo acessível oculto visualmente (sr-only). Verificado com axe-core 4.10.2 em 22 páginas e seis idiomas, eliminando a violação em 100% das páginas.
- Valor entregue
- Garante que pessoas que utilizam leitores de tela ou tecnologias assistivas escutem perfeitamente cada frase e proposta de valor do projeto, sem nenhuma perda de efeito visual ou performance para quem enxerga a tela.
-
#2mergeado em 24/09/2026 Navegação por teclado em abas RTL e correção da lista de métricas Em páginas em hebraico (RTL), as setas do teclado navegavam na direção oposta à leitura; o PR inverte as teclas para espelhar o sentido visual, adiciona Home/End e reestrutura os cartões de estatísticas com HTML semântico válido.
- O problema
- Na versão internacional do site em hebraico (leitura da direita para a esquerda), navegar pelas abas com a seta para a direita avançava no sentido inverso do olhar do leitor. Além disso, a lista de métricas do GitHub continha marcação de lista de definição inválida segundo a especificação HTML, gerando violações em ferramentas de auditoria de acessibilidade (axe/Lighthouse).
- O que foi feito
- O controle de teclado passa a consultar a direção real do texto (direction) antes de escolher a próxima aba, adiciona suporte às teclas Home e End para saltar diretamente ao início e ao fim da lista de abas, e reestrutura os blocos de métricas como lista semântica (<ul>) de links com altura total e anéis de foco acessíveis.
- Valor entregue
- Visitantes que leem da direita para a esquerda e pessoas que navegam exclusivamente pelo teclado têm uma experiência natural e intuitiva, e o site zera as violações de lista nos relatórios de conformidade e acessibilidade.
-
#1mergeado em 23/09/2026 Eliminação de rolagem horizontal e bloqueio de fundo no menu móvel Em telas médias (1024px a 1300px), animações faziam o site transbordar para os lados; o PR trava o transbordamento no container, bloqueia a rolagem de fundo com o menu móvel aberto e adiciona fallback para cópia de comandos.
- O problema
- Em janelas médias de desktop (entre 1024px e 1300px) e celulares, elementos animados de continuidade ultrapassavam a largura visível da página, gerando uma barra de rolagem horizontal que quebrava o alinhamento visual e a experiência de toque. Além disso, ao abrir o menu de navegação no celular, tocar na tela rolava o conteúdo do fundo atrás do menu aberto, e navegadores com permissões restritas de área de transferência travavam ao tentar copiar comandos de instalação.
- O que foi feito
- Foi aplicado recorte de transbordamento horizontal (overflow-x: clip) sem quebrar os gatilhos de rolagem suave do GSAP, travada a rolagem do fundo enquanto o menu móvel permanece aberto via CSS nativo (:has(dialog[open])), e adicionado mecanismo de contingência para cópia na área de transferência quando a API moderna estiver indisponível. Testado em 11 larguras de tela de 320px a 1920px.
- Valor entregue
- A navegação no site do ai-memory passou a ser fluida em qualquer tamanho de tela ou celular, sem o visitante perder o enquadramento ao rolar a página ou ficar com o menu desorientado no celular.
Números atualizados em 11/10/2026.
O mesmo cuidado no seu sistema
Os mesmos hábitos destes PRs valem para backends que movimentam dinheiro: reproduzir o problema antes de corrigir, provar a correção com teste e não deixar dado sensível escapar.