[beta4] Accessibility issues in header modals (id/aria-labelledby, button title)

I've made a proposal.
For the aria-haspopup attribute, I just changed it to "dialog" : I didn't delete it, and I didn't add one on the search "open" button, to stay closest to the DSFR documentation (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en...). Nevertheless we will open an issue on the DSFR side to fix their code.

i will have a look

Issue créée côté DSFR pour aria-haspopup : https://github.com/GouvernementFR/dsfr/issues/744

Hi,

You have added id="fr-btn-search-mobile" and moved id="fr-btn-menu-mobile"

Is it safe to have such hardcoded ID? What may happen if we have many header component in the page?

(it is a real question, not a rhetorical one)

If hardcoding those ID is an issue, you can introduce a new header_id string prop ("textfield setting") then (non-tested non-authoritative proposal):

{% set header_id = header_id|default("header-" ~ random() ) %}
...
<button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="{{ search_mid }}" title="{{ 'Search'|t }}" id="{{ header_id }}-search-mobile">
...
<button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="{{ mobile_menu_mid }}" aria-haspopup="dialog" title="{{ 'Menu'|t }}" id="{{ header_id }}-menu-mobile">
...
<div class="fr-header__search fr-modal" id="{{ search_mid }}" aria-labelledby="{{ header_id }}-search-mobile">
...
<div class="fr-header__menu fr-modal" id="{{ mobile_menu_mid }}" aria-labelledby="{{ header_id }}-menu-mobile">

What do you think?

PS: There are also search_mid & mobile_menu_mid which may be problematic but they don't come from your MR and will be fixed in 📌 [beta4] Always use default() filter with random function() Fixed

Sorry about all the separate pushes, but MR should be OK now :)

header_id was added but not defined in templates/patterns/header/header.ui_patterns.yml

Thanks