codegouvfr / react-dsfr

🇫🇷 The French Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
403 stars 49 forks source link

Header quick access item not DSFR compliant anymore #183

Closed lsagetlethias closed 1 month ago

lsagetlethias commented 11 months ago

Straight from storybook in Header component page: image

Node : 20.6.0 React DSFR : 0.75.5 Chrome : 116.0

garronej commented 11 months ago

@lsagetlethias Thank you for reporting.

@enguerranws Would you have a look... if it's a quick fix. Thanks a lot

enguerranws commented 11 months ago

@garronej Sure, I'll check it asap.

garronej commented 11 months ago

Thanks a lot!

enguerranws commented 11 months ago

Well, I've looked into this.

The DSFR core js expect that we handle quick access tools duplication by ourselves (which is something that we're already doing) and check it. The check expects that we use the exact same id suffix structure (eg. "my-super-id" -> "my-super-id-mobile", when we're using something like "my-super-id_mobile-${elementIndex}". Both are HTML valid, but the check seems pretty strict.

  1. We can make adjustments to avoid this warning (by removing the index and editing generateValidHtmlId to allow dashes), but right now, it's accessible, the HTML structure is valid, and the warning does its job recommanding us to handle the duplication by ourselves in case we are not.

  2. Another option would be that the DSFR team perform a more flexible check (like, taking duplicated elements and check their length > 0 and if they have a suffix on their ids - IMO whatever suffix should be ok).

However, it's just a warning, no urge on this. @garronej what do you think about 1 or 2?

garronej commented 11 months ago

Hi @enguerranws, First of all, thank you very much for taking the time to look into this! I didn't understand on my first read, so I wanted to take the time to examine it properly before responding.

I believe option 1 is the best choice. It won't introduce any breaking changes and will offer a quicker resolution.

Feel free to change the code, but please keep in mind that we can't remove the IDs. When Eulerian analytics is enabled, it prints a warning for every component that doesn't have an explicit ID.

garronej commented 10 months ago

Hello @enguerranws,
You seem to have a clear understanding of the problem (unlike me) do you think you could address this or you don't have the bandwith right now?

Best,

garronej commented 1 month ago

Fixed, thanks for reporting!

garronej commented 3 weeks ago

Actually fixed nox