Soporte » Diseño – Temas y plantillas » Focus elementos no enfocables aparentemente

  • Resuelto masantosmeca

    (@masantosmeca)


    buenos días

    el logo y las banderas (en el header) parecen ser no enfocables (keyboard-focusable: no) y sin embargo tienen la outline al clicar en ellos. no responden mediante css a focus

    me gustaría modificarlos respecto a eso, cómo se podría hacer?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 9 respuestas - de la 1 a la 9 (de un total de 9)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Si navegas con el teclado podrás comprobar que esos enlaces si son enfocables, lo que no es enfocable es un texto o una imagen, por esa razón es que en los menús desplegables el foco se centra en el signo + que despliega y no en el texto del encabezado.

    Coméntanos si tienes alguna duda y, por favor, recuerda marcar el debate como resuelto, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate masantosmeca

    (@masantosmeca)

    lo había supuesto

    pero con el selector del enlace
    (#menu-item-1874-es > a)
    y focus, no puedo modificar la outline de la bandera ¿?

    Moderador Jose Luis

    (@jose64)

    Plantéate esto: ¿para qué lo vas a eliminar? solo conseguirás confundir a los usuarios que naveguen con el teclado porque no podrán ver dónde están situados cuando pasen sobre esos elementos.

    Iniciador del debate masantosmeca

    (@masantosmeca)

    quiero cambiar el diseño de la outline o que se vea sólo cuando se navegue con el teclado (creo que se hace con focus-visible)

    Moderador Jose Luis

    (@jose64)

    Para mantener la coherencia en el diseño deberías aplicarlo a todos los enlaces, no solo a las banderas. Aquí te dejo el enlace con la información para implementarlo correctamente y que te funcione en cualquier navegador:

    Tecnología para desarrolladores web > CSS > :focus-visible

    ¿Por qué deberías utilizar :focus-visible?

    CSS Tricks :focus-visible

    Iniciador del debate masantosmeca

    (@masantosmeca)

    y cómo puedo saber los selectores para aplicarlo?

    en el caso de una de las banderas, creo que no es
    #menu-item-1874-es > a
    ni
    #menu-item-1874-es > a > img

    Hola @masantosmeca si solo piensas modificar la apariencia del outline, puedes revisar esta regla.

    .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
        outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
    }

    Nota: no es recomendable usar el outline:0 por el tema de accesibilidad.

    Saludos

    Iniciador del debate masantosmeca

    (@masantosmeca)

    muchas gracias a los dos, un saludo

    Moderador Jose Luis

    (@jose64)

    Marco el debate como resuelto.

Viendo 9 respuestas - de la 1 a la 9 (de un total de 9)
  • Debes estar registrado para responder a este debate.