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

Accessibility : add a span in button.expandmore__button #28

Merged
merged 1 commit into from Jan 28, 2018

Conversation

Projects
None yet
2 participants
@AnneCav
Contributor

AnneCav commented Jan 28, 2018

Avoid ::before or ::after content directly added to the button to be read by some AT

Actuellement on peut poser un symbole ouvert/fermé via css comme ça :

.expandmore__button[aria-expanded=false]:before,
.expandmore__button[data-expanded=false]:before{
  content : '+ ';
  speak: none;
}
.expandmore__button[aria-expanded=true]:before,
.expandmore__button[data-expanded=true]:before{
  content : '- ';
  speak: none;
}

Le problème c'est que malheureusement certaines aides techniques énoncent ce contenu, même avec la propriété css speak: none.

Cette pull request propose donc d'ajouter un span dans le bouton, avec l'attribut aria-hidden="true" qu'on pourra utiliser pour poser les symboles en ::before ou ::after de cet élément.

Accessibility : add a span in button.expandmore__button (avoid ::befo…
…re or ::after content directly added to the button to be read by some AT)
@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Jan 28, 2018

C'est une très bonne remarque. Je merge dès que possible, par contre, j'ajouterai le namespacing pour la classe de l'élément ;)

@nico3333fr nico3333fr merged commit b4f1b44 into nico3333fr:master Jan 28, 2018

@AnneCav AnneCav deleted the AnneCav:hide-show-prefix branch Jan 28, 2018

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Jan 28, 2018

Voilà, la démo est mise à jour, la doc aussi sur la page qui présente le script: https://a11y.nicolas-hoffmann.net/hide-show/
Je t'ai mentionnée dans la dernière news qui annonce la mise à jour.

J'ai repris ta PR pour que l'élément suive la logique de namespacing proposée par le script. En pratique, cela ne change pas grand chose, mais le tout est plus "consistant".

Au passage, j'ai amélioré les démos (en utilisant le vrai symbole "moins", et j'ai réordré un peu le tout :)
(plus publication sur NPM, release, etc. y en a du merdier à faire ^^)

Encore merci 👍

@nico3333fr

This comment has been minimized.

Owner

nico3333fr commented Jan 28, 2018

Tu ne m'en voudras pas, je vais d'abord mettre à jour ce projet => https://van11y.net/fr/panneaux-depliants-accessibles/ (le même en version sans jQuery), j'étudierai ton autre PR après ceci ;)

@AnneCav

This comment has been minimized.

Contributor

AnneCav commented Jan 29, 2018

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