Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button setter role=button ved bruk av annen html-tag #2154

Merged
merged 9 commits into from Aug 25, 2023
Merged

Conversation

KenAJoh
Copy link
Collaborator

@KenAJoh KenAJoh commented Aug 11, 2023

Description

Ved bruk av as-prop vil role="button" settes automatisk på <Button />. Målet er at dette skal gjøre det tydeligere for skjermlesere hva elementet de interagerer med er.

Demo for testing

Diskusjon

  • Er det noen caser der vi ikke ønsker at role="button" settes ved bruk av f.eks a-tag? Holder det da evt at bruker selv kan overstyre role?
  • Space også fungere når man f.eks har a-tag? Dette kan være vanskelig da vi ikke vet 100% om de sender inn a-tag (ved bruk av f.eks React.Router)

Resolves #1874
Resolves aksel#213

@changeset-bot
Copy link

changeset-bot bot commented Aug 11, 2023

🦋 Changeset detected

Latest commit: 20ec379

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 7 packages
Name Type
@navikt/ds-react Patch
@navikt/ds-css Patch
@navikt/ds-tokens Patch
@navikt/ds-tailwind Patch
@navikt/aksel-icons Patch
@navikt/aksel Patch
@navikt/aksel-stylelint Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Aug 11, 2023

Storybook demo

Endringer til review: 0

d3997c85d | 49 komponenter | 321 stories

@github-actions
Copy link
Contributor

github-actions bot commented Aug 11, 2023

90e23e2f4 | 48 komponenter | 307 stories

@sarahbrodwall
Copy link

Re: diskusjonspunkter: Hvis elementet ser ut som en knapp og har role=button, må den også fungere med både space og enter. Er dette løsbar?

@KenAJoh
Copy link
Collaborator Author

KenAJoh commented Aug 11, 2023

Re: diskusjonspunkter: Hvis elementet ser ut som en knapp og har role=button, må den også fungere med både space og enter. Er dette løsbar?

I teorien tror jeg ikke det skal være noe problem. Vil sikkert kunne være edgecaser, men i de tilfellene der de oppstår burde man kanskje vurdere noe annet en Button uansett.

@KenAJoh KenAJoh merged commit 627f9f7 into main Aug 25, 2023
2 checks passed
@KenAJoh KenAJoh deleted the button-role branch August 25, 2023 10:50
@github-actions github-actions bot mentioned this pull request Aug 25, 2023
@HalvorHaugan
Copy link
Contributor

Når man bruker JAWS og trykker space så aktiveres knappen to ganger, selv om man bruker as="a". Det er som om JAWS simulerer museklikk når man trykker space, men hindrer ikke at keyboard-eventet sendes også.

@KenAJoh
Copy link
Collaborator Author

KenAJoh commented Sep 22, 2023

@HalvorHaugan Bare å legge til lodash-thottle så er det fikset /s 🚀
Vet du hvilken event JAWS bruker for å emulere museklikk? Blir det onClick -> onKeyPress eller noe lignende? Kan hende det blir en tricky case å løse 🤔

@HalvorHaugan
Copy link
Contributor

Nei, men tror det var onClick som ble trigga først, deretter onKeyUp. Det skjedde visst bare når JAWS var satt til norsk. Det var Morten som oppdaget dette, da han testa ShowMore for oss. Han skulle ta det opp med leverandøren, men jeg lurer på om vi likevel burde lage en (midlertidig) fiks? Burde kanskje dobbeltsjekke om det er et generelt problem, og ikke bare noe med Mortens PC.

@KenAJoh
Copy link
Collaborator Author

KenAJoh commented Sep 22, 2023

Absolutt noe vi bør se om kan fikses! Ønsker du å ta en kikk på det? Er bare å legge til et nytt issue/oppgave i boardet så får vi det på listen 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[BUG] Button as link bryter WCAG-krav 4.1.2
4 participants