gaufre: follow disclosure aria pattern

- add aria attributes on load with the gaufre api script so that people
already using la gaufre don't necessarely *have* to update their code
- add the aria patterns in given code examples/react components. In some
cases, our small page load JS code isn't enough: for example on SPAs
where gaufre buttons might be loaded after page load.

thanks @inseo
This commit is contained in:
Emmanuel Pelletier
2025-04-17 15:26:57 +02:00
parent 2bd3e9b194
commit e47ac65e80
3 changed files with 29 additions and 9 deletions

View File

@@ -62,6 +62,8 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
type="button"
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
title="Les services de La Suite numérique"
aria-expanded="false"
aria-controls="lasuite-gaufre-popup"
>
Les services de La Suite numérique
</button>
@@ -71,6 +73,8 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
type="button"
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
title="Les services de La Suite numérique"
aria-expanded="false"
aria-controls="lasuite-gaufre-popup"
>
Les services de La Suite numérique
</button>
@@ -108,6 +112,8 @@ import gaufreCssUrl from "@gouvfr-lasuite/integration/dist/css/gaufre.css?url"
type="button"
class="lasuite-gaufre-btn lasuite-gaufre-btn--vanilla js-lasuite-gaufre-btn"
title="Les services de La Suite numérique"
aria-expanded="false"
aria-controls="lasuite-gaufre-popup"
>
Les services de La Suite numérique
</button>