[Résolu] Formatage d'un bouton

Bonjour à tous
Dans la page https://tests.osirisnet.net/docu/akhenaton/akhenaton_01.htm paragraphe "LA SOCIÉTÉ ÉGYPTIENNE A LA FIN DU RÈGNE D'AMENHOTEP III" en cliquant sur le mot "empire", j'obtiens:
- avec FireFox


- avec Chrome


Je n'arrive pas à me débarrasser du cadre qui entoure le bouton quand on clique dessus et ne s'efface que quand on clique ailleurs dans la page.

C'est dû à la propriété "appearance" qui diffère selon les navigateurs.

J'ai essayé appearance:none mais ça ne change rien.

Une idée?

Bonjour Papy,
Est-ce que cela ne viendrait pas de la propriété "outline" ?

Bonjour,

Le bouton reçoit le focus quand on clique dessus et ne le perd que quand on clique ailleurs.

Quand un élément reçoit le focus (que ce soit via la souris ou la navigation clavier), les navigateurs le signalent à l'utilisateur via un effet. Mais cet effet n'est pas normalisé et du coup les navigateurs ne font pas tous la même chose.

Pour annuler cet effet, le css est le suivant :

:focus {outline:none;} /* chrome */
::-moz-focus-inner {border:0;} /* firefox */

On peut rajouter un sélecteur (par exemple button.class1) devant les : si on ne veut cibler que certains éléments.

Ceci étant, si on fait ça, il faut prévoir une marque de remplacement pour signaler quel élément a le focus, sinon, ceux qui naviguent au clavier seront paumés.

Amicalement,

Dans ce cas précis le bouton qui a le focus se signale par un texte qui s’affiche au dessous, donc pas de problème pour savoir lequel a le focus.
Y a-t-il un moyen de "défocusser" le bouton par JavaScript quand on ferme le texte?

Bonjour,

"défocusser" un élément signifie donner le focus à un autre élément (via un e.focus() en js, e étant l'élément). Dans le cas général, c'est source de confusion.

EDIT: et ceux qui navigueut au clavier ont besoin de "voir" le focus même si ton encart n'est pas affiché. Fais le test en utilisant la touche "tab" pour naviguer.

Amicalement,
Modifié par parsimonhi (08 Dec 2020 - 13:35)

Cette page n’est pas faite pou être "naviguée" mais pour être lue. Lors de la lecture si tu tombes sur le mot "empire" tu peux cliquer sur le mot et afficher des informations complémentaires. Aller de note en note n’est pas une façon normale de lire cette page.
Je vais faire des essais à partir de ce que tu m’as indiqué
Amitiés

Pour ceux que ça intéresse, la solution c'est

bouton.blur();

papyJP pour ton info ca existe pas bouton et blur ces un effect dans filter

Moi aussi j’ai border:none et sur FireFox ça marche très bien. J’ai été surpris de voir qu’avec Chrome le fait de cliquer sur le bouton faisait apparaître une bordure (très laide par ailleurs). C’est la raison pour laquelle j’ai ouvert cette discussion.
Quand on clique sur un <button> Il prend le focus et Chrome lui ajoute cette bordure.

Bizarre!

Bonjour,

Dans firefox, la "bordure" apparaissant au focus est un border (un peu spécial). Dans chrome, cette "bordure" est un outline.

Amicalement,

deveep a écrit :
papyJP pour ton info ca existe pas bouton et blur ces un effect dans filter

dans mon programme, "bouton" est le nom de la variable JavaScript qui contient le nœud <button>

parsimonhi a écrit :
Dans firefox, la "bordure" apparaissant au focus est un border (un peu spécial). Dans chrome, cette "bordure" est un outline.

SI je navigue par tab sous FireFox il y a effectivement cette bordure qui apparaît quand j'atteins le bouton, mais elle n'apparaît pas quand je clique à la souris sur le bouton.
Sur Chrome elle apparaît dans les deux cas et elle reste tant que je ne change pas le focus.
Dans un un <form>, c'est tout à fait raisonnable, mais là il ne s'agit pas d'un formulaire, les boutons sont éparpillés dans le texte et on passe pas d'un bouton à l'autre.
En faisant un blur sur le bouton, je force l'arrêt du focus et le problème disparait.

Bonjour,

Je comprends bien ce que tu fais avec blur() et je suis d'accord que ça répond parfaitement à ton problème. Mais c'est quand même un poil "hérétique" de régler un problème d'affichage en modifiant la manière dont les éléments prennent et perdent le focus.

Je comprends aussi que ta page n'est pas faite pour la navigation clavier. Déjà, le menu qui a un sous-menu semble inaccessible en navigation clavier. Ceci étant, la prise de focus des "boutons" ne sert pas en navigation clavier à scroller la page, mais simplement à accéder au contenu qui ne s'affiche que si on clique sur le bouton. En navigation clavier, on se positionne sur le bouton avec des tab ou des shift tab, puis une fois que le bouton a le focus, on utilise la touche return pour simuler un clic. Or, les gens qui n'ont que ça pour naviguer (en particulier ceux qui ne peuvent pas manipuler une souris) vont être un peu gênés pour voir ton site. Certes, c'est une très petite minorité, mais c'est clairement une mauvaise pratique de les ignorer.

Bref, en résumé, ce que tu fais marche, mais c'est déconseillé.

Amicalement,

C’est clair que ce site n’est pas fait pour la navigation clavier. Il existe depuis 18 ans et personne ne s’en est jamais plaint.
J’ai passé 2 ans à lui donner une allure à peu près convenable sur une tablette je pense qu’il faudrait plusieurs mois pour le rendre navigable,m au clavier, mais pire encore il faudrait que le propriétaire change ses modes de travail. Beaucoup de mal pour une utilité nulle a priori.
Ce site tel qu’il est semble satisfaire quelques milliers d’utilisateurs dans le monde, je pense qu’on va en rester là