Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
In the header & footer patterns, the link title attributes aren't sufficient for accessibility, as they don't always contain the link text (= the visible text).
Also, in the header the title attribute is part on the link and part on the p tag, which is not correct.
Steps to reproduce
Display header & footer with logo & service title.
Proposed resolution
Harmonize handling of text and title attribute in header & footer, so the title always contains the visible text + any additional info.
Remove title on the p tag.
Issue fork ui_suite_dsfr-3381730
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #3
mh_nichtsI've made a fix proposal, but I'm wondering :
- In the header pattern, the logo_title setting might be deleted (it's currently used for a condition on the title attribute on the p tag, I kept it but to handle on the a tag)
- In the DSFR header documentation (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/en...), there is no link on the logo, except when there is no "service title" : this condition is not handled in the pattern currently
- In the footer pattern, there is a condition to handle the link on the operator logo, but according to the DSFR footer documentation (https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/pi...), the title attribute should then contain the "operator logo alt" (for accessibility reasons again : the title attribute should contain the visible text) : this isn't handled in the pattern currently, I think it would require an additional pattern field
Should I handle these changes on the same MR, or in a separate issue ?
Comment #4
mh_nichtsComment #5
pdureau commentedI will have a look
Comment #6
pdureau commentedFeedbacks about footer
{% set parent_title = logo|default('République\nFrançaise')|nl2br %}if logo is a bad name, it is not too late to change the prop name in the YML definition, because we can introduce breaking changes in beta4. I am not sure "parent_title" is the best name however. What can we propose? Just "title"?
{{ parent_title|raw }}Please don't use |raw() filter, it is unsafe and may be unnecessary here.
<a class="fr-footer__brand-link" href="/" title="{{ 'Homepage'|t }} - {{ service_title|striptags }} - {{ parent_title|striptags }}">I am not sure you need |striptags() filter for such string props ("textfield settings").
Feedbacks about header
Same feedbacks than footer
But I am confused you added "Default: 'République\\n Française'" preview value prefixed by "Default" while you removed it in footer.
Your questions
Let's remove it if useless. Let's keep component data as simple and compact as possible.
Can you add it? No need to create an other issue IMHO
Don't hesitate to add a prop ("setting"). Not a slot ("field") because it strictly expect a string.
Comment #7
mh_nichtsI handled all the points, including conditions on operator_logo & service_title, in order to match the various link positions according to DSFR documentation.
Comment #8
pdureau commentedthis issue will be a compatibility breaker because of the settings renamed from logo to logo_text
Comment #10
pdureau commentedComment #11
pdureau commented