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.
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 ¿?
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.
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)
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
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
muchas gracias a los dos, un saludo
Marco el debate como resuelto.
