Skip link - Githubissues

JAU-atp commented 4 years ago

Hej FDS

Vi er igang med et projekt, som vi har opgraderet fra version 5.0.0 til 5.1.0. I beskriver i jeres release notes at der er blevet tilføjet fokuskant på #main-content ved fokus fra skip link. Vi oplever nu at fokuskanten opstår på alt i main-delen af html, da denne har id=”main-content” som beskrevet i implementeringen https://designsystem.dk/design/typography/#skip-link. Denne fokuskant fremkommer når brugeren trykker et hvilket som helst sted i main. Er dette en fejl eller er det jeres hensigt?

mvh Josephine fra ATP

detfaellesdesignsystem commented 4 years ago

Hej @JAU-atp,

Tak for din henvendelse! :)

Der har ikke været muligt for mig at genskabe dette - kan du fortælle lidt mere om fejlen du oplever? Evt. også gerne oplysninger om browsere I oplever dette i.

Med venlig hilsen Kristina Jensen

ALT-ATP commented 4 years ago

Hej Kristina

Vi har testet det i Chrome og Brave. Vi har lavet implementeringen af skiplinket som beskrevet:

<body>
  <app-root id="main-content"></app-root>
</body>
<a class="skipnav" href="#main-content">Gå til sidens indhold</a>

Vi oplever, at siden bliver genindlæst, når der trykkes på skiplinket. Derudover peger css'en på main-content, så der bliver altid sat focus på <app-root> ved klik et hvilket som helst sted på siden. Vi har prøvet at aktivere java-scripten, men det løser ikke problemet.

Vi bruger Angular 7, hvis det kan have noget med det at gøre.

Mvh Asger fra ATP

detfaellesdesignsystem commented 4 years ago

Hej @ALT-ATP,

Tak for din henvendelse :)

Skip link funktionaliteten er faktisk rent standard i browseren - så vi bruger ikke javascript til komponenten. Det er et helt simpelt anchor link, som flytter fokus på siden til det id, der er refereres til i href attributten.

Jeg kender ikke så meget til Angular, men jeg tænker måske at anchor link er deaktiveret som standard, og at I skal gøre noget aktivt for at få denne funktionalitet til at spille med Angular.

Jeg søgte lige hurtigt og fandt noget i forbindelse med Router i Angular, hvor man har en option, der hedder anchorScrolling, måske dette vil kunne hjælpe jer. Link til referencen: https://angular.io/api/router/ExtraOptions

Vi har som sagt ikke særlig erfaring med Angular i FDS, og har derfor udfordringer med at kunne supportere, når det kommer til dybere Angular spørgsmål, men jeg håber ovenstående reference kan hjælpe jer et stykke på vej.

Det kan selvfølgelig også være, der er en bedre måde at opnå samme funktionalitet, ved at bruge en anden metode i Angular, og der er I selvfølgelig velkomne til at bruge den metode, som passer bedst i jeres teknologi. Husk tilgængelighed, hvis I vælger en anden metode.

Hvis I finder en løsning, må I meget gerne melde tilbage, så andre, der måske har samme udfordring kan finde svaret her.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

detfaellesdesignsystem commented 4 years ago

Hej @JAU-atp,

Som nævnt på samarbejdsforum i går, har du så mulighed for at oplyse om den browser og evt. browserversion hvori I oplever denne opførelse, hvor der er fokuskant om indholdet, selv når man ikke har brugt skiplink?

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

JAU-atp commented 4 years ago

Vi har testet det i Chrome, men jeg er usikker på versionen. Jeg kan vende tilbage med dette når jeg har fået oplysningerne fra udviklerne

mvh. Josephine

ALT-ATP commented 4 years ago

Hej @detfaellesdesignsystem

Vi har fundet en løsning, så jeg skriver den lige her til fremtidig reference. Fejlen kommer af, at Angular ændrer anchor-taggets opførsel, så der udsendes et router-event ved den almindelige implementering. Løsningen er programmatisk at styre id'et på <main>, så det kun er "main-content", når der faktisk skal sættes fokus på det. Så i sin template har man

<a class="skipnav" (click)="onSkipLinkNav()" href="javascript:void(0)">Gå til sidens indhold</a>
...
<main class="container page-container" [id]="mainId" tabindex="-1">...</main>

og i komponenten

mainId: "main-content" | "main-content-no-outline" = "main-content-no-outline";
constructor(private router: Router) {
    this.router.events.subscribe(event => { this.mainId = "main-content-no-outline"; });
}
onSkipLinkNav() {
    // Sætter fokus på <main> og sætter id, så der kommer outline på
    this.mainId = "main-content";
    setTimeout(() => document.getElementById("main-content").focus(), 0);
  }

I css'en skal der være defineret

#main-content-no-outline {
    outline: none;
}

detfaellesdesignsystem / dkfds-components

Skip link #83