Display local tasks as a button group

Created on 15 October 2024, 3 months ago

Problem/Motivation

Currently, we use the tabs patterns to make the local tasks menu look like a group of tabs.
When it detects the fr-tabs classes, the DSFR script considers that the list of links is a group of tabs and adopts a behavior that we do not want: it is impossible to tabulate inside the list of links.

Proposed resolution

We should replace the fr-tabs classes with fr-btns-group classes to make the local tasks menu look like a group of buttons.

DSFR documentation:

🐛 Bug report
Status

Active

Version

1.0

Component

Code

Created by

🇫🇷France spryah

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

Merge Requests

Comments & Activities

  • Issue created by @spryah
  • 🇫🇷France pdureau Paris

    It is impossible to tabulate inside the list of links.

    I reproduce the issue. Indeed, it is not good for accessibility.

    I did a MR with the expected change: https://git.drupalcode.org/project/ui_suite_dsfr/-/merge_requests/118/diffs

    However, I am conflicted about this change, because this is a weird workaround (buttons are not tabs) and the fix belong to upstream DSFR

    Do we merge it to fix accessibility and we will rollback when the upstream is fixed? Or do we ignore it because it is not our scope?

  • 🇫🇷France just_like_good_vibes PARIS

    Indeed, the fix belongs to the upstream DSFR library.
    Let's plan to submit a bug on the upstream.

    If one wants to have the fix proposed in this issue :

    • please use a child theme that derives ui_suite_dsfr
    • add the appropriate code in the child theme (templates overrides) as seen in the patch file display_local_tasks-3480830-5.patch
  • 🇫🇷France spryah

    Hello and thanks for the proposal, Mikael!

    I'm not sure if the DSFR really is responsible for this case since we're using fr-tabs classes to make a group of links look like tabs, and it seemed normal to me that the DSFR script uses these classes to convert the list into a tab group component..

    Anyway I'll just drop my version of the fix here, as a patch, just in case people are interested in cute vertical margins
    I also added an icon to the active link to make it more visible

  • 🇫🇷France spryah

    Please don't mind me. I'm only posting an updated version for 1.0.x (still contains utility classes to polish the appearance of the tasks menu)

    Screenshot enclosed

Production build 0.71.5 2024