Enterprise: Accesibilidad: se necesita una imagen de perfil que se pueda tabular

@tmcconechy se parece al ejemplo que apuntamos a un Blockgrid. ¿La API de selección ya admite tener un estado de enfoque?

Entonces, pensando en estas clases image-sm, etc., agregamos un estado de enfoque a su alrededor y agregamos un tabindex y nos aseguramos de que haya texto alternativo. Entonces, más los otros dos ejemplos, ya que su cuadrícula de bloque derecha tiene una api de selección / enfoque que podríamos usar.

Así que arregla los tres:
http://master-enterprise.demo.design.infor.com/components/images/example-photos.html -> agregar estado de enfoque y etiqueta alt
http://master-enterprise.demo.design.infor.com/components/images/example-index.html -> agregar estado de enfoque y etiqueta alt
http://master-enterprise.demo.design.infor.com/components/images/example-image-list.html -> haz que esto use las clases de imagen (que tendrán una etiqueta alt y un estado de enfoque) o como dijiste hacer que funcione con la api de cuadrícula de bloques?

Después de volver a leer un poco, no estoy seguro de que cambiar nuestras clases de CSS de visualización para imágenes sea la forma correcta de solucionarlo. Tenemos la API Blockgrid para la lista de imágenes que pueden manejar la selección y la navegación del teclado, si hay una lista de cosas que deben seleccionarse. En cuanto a las imágenes independientes, no creo que debamos hacer que todas se puedan enfocar con la gestión estatal. Las imágenes no son componentes de formulario de forma predeterminada, por lo que no deberíamos cambiar esos valores predeterminados, excepto en casos específicos.

@ 508it , ¿no es esto algo que podría resolverse simplemente agregando un tabindex a cualquier imagen que necesite hacer enfocable? ¿Falta alguna funcionalidad adicional que esperabas? De lo contrario, agregar tabindex en su (s) plantilla (s) HTML también agregará un estado de selección de navegador predeterminado, que debería cubrir el caso.

EN la página de la aplicación es una imagen de perfil. Probablemente no debería haber vinculado toda esa carpeta, ya que causó confusión. Lo que querían era una sola imagen que fuera una foto de perfil. Entonces, una clase / estilo para el estado de enfoque (cuando agregan un tabindex). Por el momento, agregar un tabindex no agregará ningún estilo.

Así que principalmente asegurándose de que http://master-enterprise.demo.design.infor.com/components/images/example-index.html funcionará si hay un tabindex en él. Pero en bucle en las otras páginas.

OK veo. En ese caso, definitivamente no hay mucho que agregar. No veía un estado de enfoque faltante en ninguna de esas imágenes al agregar un índice de tabulación:

Cromo

Firefox

Quizás solo hacerlo más pronunciado en FF sea la clave.

Correcto o estaba pensando que sea lo mismo que nuestros estados de enfoque de entrada. Y en general, asegúrese de que todos los ejemplos tengan etiquetas alt y funcionen bien de manera accesible.

Si podemos, hagamos una mezcla de "enfoque" y luego refactoricemos el CSS para incluir esos estilos en todas partes. De esa manera, si cambiamos el estado de enfoque en un lugar, lo cambia en todas partes.

Tenemos una variable sass para ella en realidad https://github.com/infor-design/enterprise/blob/master/src/core/_config.scss#L28 o al menos parte de ella, pero esto podría limpiarse (son ambos la caja de sombra y el borde alrededor)

QA falló. El foco no funciona en el navegador MacOS Mojave Firefox.

Muy raro...

• en mi mac (Mojave + Firefox 67) esto está funcionando totalmente bien.
• una pila de navegador (Mojave + Firefox 67) veo que no se puede enfocar nada.

No estoy seguro de lo que podemos hacer.

¿Qué sistema operativo estás usando en Bs?

Mac (Mojave + Firefox 67) -> por lo que es el mismo sistema operativo y navegador que estoy usando en realidad. También probé + y menos algunas versiones de FF en browserstack y parece que no funcionan.

Haría que Landmark, tal vez @pwpatton y @ 508it lo probaran y confirmaran que funciona para ellos. Si es así, lo atribuiremos al problema de BS.

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

Aunque parece relacionado con la de una página. 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.

Espera, sé lo que es. Es una configuración de mac http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/

Por lo tanto, no podrá configurar esto en Mac BS. Así que BS no funcionará, pero creo que eso está totalmente bien, ya que es la configuración que usa Mac, por lo que está fuera de nuestro control.

retroceder para volver a probar o confirmar como hecho; desafortunadamente, desea poder probar esto en Mac en la pila de navegadores

Probamos usando la configuración predeterminada en una Mac y la opción "todos los controles" listada arriba y esto aún falla. El problema es que hay una opción para examinar / borrar la imagen que se puede seleccionar con un mouse, pero que no se puede seleccionar con un teclado.

¿Tiene un índice de pestañas en DOM @ 508it ? Mi sugerencia sería que el hito aún no implementó esto. Pero puede probar en páginas en http://master-enterprise.demo.design.infor.com/components/images

@tmcconechy No es así. El enlace que proporcionó lo hace y pasa.

http: // localhost : 4000 / components / images
Pasó el control de calidad en todos los navegadores. Al principio, el enfoque de la pestaña no funciona en mi Mojave Firefox 67 incluso después de aplicar Todos los controles en las Preferencias del sistema, pero el truco about: config funcionó para mí, https://stackoverflow.com/questions/11704828/how-to-allow- teclado-foco-de-enlaces-en-firefox

¿Necesitamos la aprobación de @pwpatton para mover esto a Listo?

Entonces, ¿qué nos falta exactamente en Landmark?

para tu información: @vonnyw

@pwpatton solo asegúrese de usar las clases como image-sm o image-md y agregue un tabindex="0" . Entonces tendrá un estado de enfoque y la imagen podrá enfocarse.

@brianjuan acaba de mudarse a hecho

Cambiar el código para tener un tabindex = 0, de hecho, corrige el punto de referencia.

El índice de pestañas funciona, pero no tenemos un estilo enfocable disponible para imágenes de tamaño personalizado. En Landmark, dimensionamos las imágenes nosotros mismos en función de las definiciones de LPL.
Solicitar una clase image-auto simple que se colocaría en el elemento img para lograr el estilo enfocable que se encuentra en este ejemplo http://master-enterprise.demo.design.infor.com/components /images/example-index.html

Solo para aclarar.

1. agregue una clase image-auto sin alto ni ancho y tenga el código de enfoque. esto usará el tamaño de la imagen
2. agréguelo a la página de ejemplo http: // localhost : 4000 / components / images / example-index.html
3. Tampoco estoy seguro de por qué hicimos esto en un div padre. debería funcionar directamente en la etiqueta de la imagen.

<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">

No se pudo mover este ticket a QA. El foco no está visiblemente en las imágenes de marcador de posición.

-MAC FF

• URL: http://master-enterprise.demo.design.infor.com/components/images/example-index.html?theme=soho&variant=light&colors=2578a9
• Pestaña a lo largo de la página. El foco solo es visible en las imágenes grises.
• Vea la captura de pantalla adjunta.
  

Creo que la pregunta aquí es: "¿Debería poder enfocarse o tabularse una imagen de marcador de posición?"

Creo que sí, @davidcarlsonberg también es una "imagen". El caso de uso es que falta la imagen, por lo que pueden usar ese marcador de posición en su lugar. Pero podría haber un caso en el que tenga un menú adjunto o algo que requiera que sea enfocable.

Esto es tanto un type: bug (problema de estado de enfoque) como un type: demo-app bug (problema de tabindex en las páginas de ejemplo).

http: // localhost : 4000 / components / images / example-index.html
Los marcadores de posición ahora se pueden tabular / enfocar. Acabo de notar que en Mac Firefox, no se puede hacer clic en las imágenes, pero se pueden enfocar usando la tecla de tabulación, incluso después de configurar las Preferencias del sistema y about: config.

Desafortunadamente, dudo que podamos hacer algo para que Firefox tenga un comportamiento diferente. Así que sugiero que ignoremos esto por ahora.

Lo tengo @tmcconechy , ahora lo moverá a Listo y volverá a probar una vez que se implemente la versión beta.