Enterprise: Acessibilidade - é necessária uma imagem de perfil tabulável

@tmcconechy se parece com o exemplo que estamos apontando para um Blockgrid. A API de seleção já oferece suporte a um estado de foco?

Então, pensando nessas classes de imagem-sm etc, adicionamos um estado de foco ao redor dela e adicionamos um índice de tabulação e garantimos que haja texto alternativo. Portanto, mais dois exemplos, já que sua grade de bloco direita tem uma API de seleção / foco que poderíamos usar.

Então, corrija todos os três destes:
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> adicionar estado de foco e alt tag
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> adicionar estado de foco e alt tag
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> faça isso usar as classes de imagem (que terão uma tag alt e estado de foco) ou como você disse fazer funcionar com a API de grade do bloco?

Depois de reler um pouco, não tenho certeza se alterar nossas classes CSS de exibição para imagens é a maneira certa de corrigir. Temos a API Blockgrid para a lista de imagens que podem lidar com a seleção e navegação pelo teclado, se houver uma lista de coisas que precisam ser selecionadas. Quanto às imagens autônomas, não acho que devemos torná-las focalizáveis ​​com gerenciamento de estado. As imagens não são componentes de formulário por padrão, portanto, não devemos alterar esses padrões, exceto em casos específicos.

@ 508it , isso não é algo que poderia ser resolvido simplesmente adicionando um tabindex a qualquer imagem que você precisa para tornar o focalizável? Há alguma funcionalidade adicional que você espera? Caso contrário, adicionar tabindex em seu (s) modelo (s) HTML também adicionará um estado de seleção de navegador padrão, que deve abranger o caso.

NA página do aplicativo, é uma imagem de perfil. Eu provavelmente não deveria ter vinculado toda a pasta, pois isso causou confusão. O que eles queriam era uma única imagem que fosse uma foto de perfil. Portanto, uma classe / estilo para o estado de foco (quando eles adicionam um índice de tabulação nele). No momento, adicionar um índice de tabulação não vai adicionar nenhum estilo.

Então, principalmente, certificando-se de que http://master-enterprise.demo.design.infor.com/components/images/example-index.html funcionará se houver um tabindex nele. Mas em loop nas outras páginas.

OK eu vejo. Nesse caso, definitivamente não há muito a acrescentar. Não vi a falta de foco em nenhuma dessas imagens ao adicionar um índice de tabulação:

cromada

Raposa de fogo

Talvez apenas torná-lo mais pronunciado no FF seja a chave.

Certo ou eu estava pensando em torná-lo igual aos nossos estados de foco de entrada. E apenas certificando-se de que todos os exemplos tenham tags alt e funcionem bem de maneira acessível.

Se pudermos, faça um mixin de "foco" e então refatore o css para incluir esses estilos em todos os lugares. Dessa forma, se mudarmos o estado do foco em um lugar, ele mudará em todos os lugares.

Temos uma variável sass para ele na verdade https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 ou pelo menos parte dela, mas isso poderia ser limpo (ambos a sombra da caixa e a borda ao redor)

Falha no controle de qualidade. O foco não funciona no navegador MacOS Mojave Firefox.

Muito estranho...

• no meu mac (Mojave + Firefox 67) está funcionando perfeitamente bem.
• uma pilha de navegador (Mojave + Firefox 67) estou vendo que nada pode ser focado.

Não tenho certeza do que podemos fazer.

Qual sistema operacional você está usando no Bs?

Mac (Mojave + Firefox 67) -> então é o mesmo sistema operacional e navegador que estou usando. Eu também tentei + e menos algumas versões do FF no browserstack e não parecem funcionar.

Gostaria que Landmark, talvez @pwpatton e @ 508it testassem isso e confirmassem se funciona para eles. Se isso acontecer, então vamos atribuir a isso um problema de BS.

• [x] Aprovado por @pwpatton
• [] Aprovado por @ 508it

Parece relacionado a uma página tho. http://master-enterprise.demo.design.infor.com/components/images/example-index.html porque http://master-enterprise.demo.design.infor.com/components/button/example-index. html funciona.

Espere, eu sei o que é. É uma configuração mac http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

Portanto, você não será capaz de definir isso no Mac BS. Então BS não vai funcionar, mas eu acho que isso é totalmente bom, pois é o Mac de configuração usa - por isso está fora do nosso controle.

voltando para testar novamente ou confirmar como feito - infelizmente, você deseja poder testar isso no mac no navegadorstack

Testamos usando as configurações padrão em um mac e a opção "todos os controles" listada acima e ainda falha. O problema é que há uma opção para navegar / limpar a imagem que pode ser selecionada com o mouse, mas não pode ser selecionada com o teclado.

Ele tem um índice de tabulação no DOM @ 508it ? Minha sugestão seria que o marco ainda não implementou isso. Mas você pode testar em páginas em http://master-enterprise.demo.design.infor.com/components/images

@tmcconechy Não. O link que você forneceu faz e passa.

http: // localhost : 4000 / components / images
Aprovado no controle de qualidade em todos os navegadores. A princípio, o foco da guia não está funcionando em meu Mojave Firefox 67, mesmo depois de aplicar Todos os controles nas Preferências do Sistema, mas o truque about: config funcionou para mim, https://stackoverflow.com/questions/11704828/how-to-allow- teclado-foco-de-links-no-firefox

Precisamos da aprovação de @pwpatton para mover para Concluído?

Então, o que estamos perdendo exatamente no ponto de referência?

fyi: @vonnyw

@pwpatton apenas certifique-se de usar classes como image-sm ou image-md e adicione tabindex="0" . Então você terá um estado de foco e a imagem poderá ser focalizada.

@brianjuan acabou de mudar para pronto

Alterar o código para ter um tabindex = 0 corrige de fato o ponto de referência.

O índice de guias funciona, mas não temos um estilo focalizável disponível para imagens de tamanho personalizado. No ponto de referência, nós mesmos dimensionamos as imagens com base nas definições da LPL.
Solicitando uma classe image-auto simples que seria colocada no elemento img para obter o estilo focalizável encontrado neste exemplo http://master-enterprise.demo.design.infor.com/components /images/example-index.html

Só para esclarecer.

1. adiciona uma classe image-auto sem altura e largura e tem o código de foco. isso vai usar o tamanho da imagem
2. adicione-o à página de exemplo http: // localhost : 4000 / components / images / example-index.html
3. também não tenho certeza por que fizemos isso em um div pai. ele deve funcionar diretamente na tag da imagem.

<div class="image-lg">
   <img src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">
</div>

<~--Instead of-->

<img class="image-lg"src="http://placehold.it/300x350/999999/FFFFFF" alt="image-md 300x350" tabindex="0">

Falha ao mover este tíquete para o controle de qualidade. O foco não está visivelmente nas imagens de espaço reservado.

-MAC FF

• URL: http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Tab em toda a página. O foco só é visível nas imagens cinza.
• Por favor, veja a captura de tela em anexo.
  

Acho que a questão aqui é: "Uma imagem de espaço reservado deve ser tabulável / focalizável?"

Acho que @davidcarlsonberg é uma "imagem" também. O caso de uso é que a imagem está faltando, então eles podem usar esse espaço reservado. Mas pode haver um caso em que haja um menu anexado ou algo que exija que seja focalizado.

Este é um type: bug (problema de estado de foco) e um type: demo-app bug (problema de tabindex nas páginas de exemplo).

http: // localhost : 4000 / components / images / example-index.html
Os marcadores de posição agora podem ser tabulados / focalizados. Acabei de notar que no Mac Firefox, as imagens não são clicáveis, mas podem ser focadas usando a tecla tab, mesmo depois de definir as Preferências do Sistema e about: config.

Infelizmente, duvido que haja algo que possamos fazer sobre o Firefox ter um comportamento diferente. Portanto, sugiro que ignoremos isso por enquanto.

Entendi @tmcconechy , agora moverei para Concluído e