Discussion :

[Zebulon777]

Bonjour à tous.

Sur mon projet, il faut que j'arrive à gérer les liens par les touches tab / shift+tab et espace et il faut que les liens qui prennent le focus soient entourés.

J'ai beau chercher, mais je n'ai pas trouve de solution.

Est-ce que quelqu'un pourrait m'aider ?

Merci d'avance.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { environment as env } from '@env/environment';
 
@Component({
  selector: 'app-pied-de-page',
  templateUrl: './pied-de-page.component.html',
  styleUrls: ['./pied-de-page.component.css']
})
export class PiedDePageComponent implements OnInit {
 
/**
   * The url for the user manual.
   */
 url = {
  manuel: '../../assets/Manuel%20Utilisateur%.pdf',
};
 
/**
 * Constructor.
 */
constructor(private router: Router) {}
 
/**
 * On init comp.
 */
ngOnInit(): void {}
 
/**
 * Open the given url with the appropriate env.
 * @param url the given url
 * @param isEnv the given env
 */
openUrl(url, isEnv): void {
  if (isEnv) {
    window.open(env[url]);
  } else {
    window.open(url);
  }
}
 
/**
 * Open pdf help file
 */
downloadHelpFile() {
  window.open(env.helpFile);
}
 
/**
 * Open the visualize url.
 */
openVisualize(): void {
  this.router.navigateByUrl('/visualize/plan', {});
}
 
/**
 * Open in new tab the protect data page.
 */
openProtectData(): void {
  window.open('/protectData', '_self');
}
 
/**
 * Open in new tab the num accessibility page.
 */
openNumAccess(): void {
  window.open('/numAccess');
}
 
/**
 * Open in new tab the a propos page.
 */
openAPropos() {
  window.open('/apropos');
}
 
/**
 * Open in new tab contact page.
 */
openContact(): void {
  window.open('/contact');
}
 
/**
 * Open in new tab legal mention page.
 */
openLegalMention(): void {
  window.open('/mentionsLegales');
}
 
 
}

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.police-pied-de-page {
  font-size: 14px;
  font-family: Marianne;
  color:#ffffff !important;
}
 
a, a:link, a:visited, a:hover, a:active, a:focus{
  /*text-decoration: none !important;*/
  color: inherit!important;
  cursor:pointer;
  outline: #777777;
}

[mathieu]

il faut aussi ajouter le type dans "outline" :
https://developer.mozilla.org/fr/docs/Web/CSS/outline

[NoSmoking]

Bonjour,

il faut aussi ajouter le type dans "outline" :

ou juste cibler la couleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a:focus {
  outline-color: #F00;
}

[Zebulon777]

Merci pour vos réponses.
Effectivement, j'avais oublié le type et la couleur (Quand on a le nez dans le guidon, on ne voit plus l'évidence )

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.fond-pied-de-page {
  background-color: rgb(22, 65, 148);
}
 
.police-pied-de-page {
  font-size: 14px;
  font-family: Marianne;
  color:#ffffff !important;
}
 
a, a:link, a:visited {
  text-decoration: none !important;
  color: inherit!important;
  cursor:pointer;
}
 
a:hover, a:active {
  padding: 3px;
  /*border: solid #4F81BD  1px;*/
  outline: solid #4F81BD  1px;
}
 
.footer-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}

Par contre, les liens ne réagissent toujours pas aux touches TAB / SHIFT+TAB / ESPACE et là, je cale...

Pour le moment, la seule solution que j'ai trouvée est des les transformer en boutons redessinés sous forme de liens, mais ça me parait très extrême.

Est-ce qu'il n'y a pas un moyen autre ?

[mathieu]

la règle pour cibler le lien choisi avec TAB est a:focus.

[Zebulon777]

la règle pour cibler le lien choisi avec TAB est a:focus.

Oui, j'ai essayé, mais ça ne fonctionne pas : lorsqu'on appuis sur "TAB", le focus ne rentre jamais dans la page et donc pas sur les liens de la page.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.fond-pied-de-page {
  background-color: rgb(22, 65, 148);
}
 
.police-pied-de-page {
  font-size: 14px;
  font-family: Marianne;
  color:#ffffff !important;
}
 
a, a:link, a:visited {
  text-decoration: none !important;
  color: inherit!important;
  cursor:pointer;
}
 
a:hover, a:focus, a:active {
  padding: 3px;
  /*border: solid #4F81BD  1px;*/
  outline: solid #4F81BD  1px;
}
 
.footer-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}