[beta4] ⚠️ Better handling of header & footer logo text/title

Created on 17 August 2023, about 1 year ago
Updated 18 September 2023, about 1 year ago

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.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇫🇷France mh_nichts

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mh_nichts
  • @mh_nichts opened merge request.
  • 🇫🇷France mh_nichts

    I'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 ?

  • Status changed to Needs review about 1 year ago
  • Assigned to pdureau
  • 🇫🇷France pdureau Paris

    I will have a look

  • Issue was unassigned.
  • Status changed to Needs work about 1 year ago
  • 🇫🇷France pdureau Paris

    Feedbacks 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

    - 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)

    Let's remove it if useless. Let's keep component data as simple and compact as possible.

    - 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

    Can you add it? No need to create an other issue IMHO

    - 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

    Don't hesitate to add a prop ("setting"). Not a slot ("field") because it strictly expect a string.

  • Status changed to Needs review about 1 year ago
  • 🇫🇷France mh_nichts

    I handled all the points, including conditions on operator_logo & service_title, in order to match the various link positions according to DSFR documentation.

  • 🇫🇷France pdureau Paris

    this issue will be a compatibility breaker because of the settings renamed from logo to logo_text

  • Status changed to Fixed about 1 year ago
  • Status changed to Fixed about 1 year ago
Production build 0.71.5 2024