Local action links should be inside UL element

Created on 23 November 2016, over 7 years ago
Updated 19 July 2023, 12 months ago

Problem/Motivation

As stated in the specification permitted parent elements for LI element are MENU, UL, OL but Drupal wraps action links with NAV element (except Claro theme).

Proposed resolution

Update the following templates by adding UL wrapper around content variable.

  • core/modules/system/templates/block--local-actions-block.html.twig
  • core/themes/starterkit_theme/templates/block/block--local-actions-block.html.twig
  • core/themes/stable9/templates/block/block--local-actions-block.html.twig
  • core/profiles/demo_umami/themes/umami/templates/classy/block/block--local-actions-block.html.twig

Remaining tasks

Create MR.

API changes

This can potentially break existing themes that do not override block--local.actions.block.html.twig template.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Menu system 

Last updated 4 days ago

Created by

🇷🇺Russia Chi

Live updates comments and jobs are added and updated live.
  • Needs change record

    A change record needs to be drafted before an issue is committed. Note: Change records used to be called change notifications.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇪Ireland markconroy

    This MR looks good to me. We should definitely be aiming for correct semantics.

  • 🇺🇸United States xjm
  • 🇦🇺Australia larowlan 🇦🇺🏝.au GMT+10

    To avoid having to change this in every theme (including contrib themes) would it be better if the local actions manager attached a theme wrapper or similar to wrap the links in a ul?

  • 🇫🇮Finland lauriii Finland

    lt seems a bit strange to have to wrap the actions with a <ul> in the block template. Ideally I think we would implement something in \Drupal\Core\Menu\Plugin\Block\LocalActionsBlock::build to ensure the local actions are always wrapped with a <ul>. We could follow the pattern local tasks are setting by having a separate template for the wrapper. We should also continue wrapping the menu with the <nav> element.

    I'm not sure if I agree with using #theme_wrappers since there's been some on going efforts to try to reduce our usage of it 🌱 Remove usages of #theme_wrappers Active .

  • 🇦🇺Australia VladimirAus Brisbane, Australia

    CSS is already there. I tried to restore original functionality so it is not broken for contrib themes (like bootstrap5).
    We can skin the cat many ways but I would suggest to quick fix and then create follow up task to improve it.
    Otherwise Claro would be using ul class="local-actions" and core and stable9 would be using nav 🤷‍♂️

  • 🇫🇮Finland lauriii Finland

    I'm not sure I follow what is broken for contrib themes. Couldn't contrib themes fix this bug by providing a template override?

    I guess the challenge with the quick fix is that it may make it harder for us to provide the fix later because people could have copies of these templates leading into a duplicate <ul>.

    I'm not sure I see at the moment how either leaving out the <nav> element or adding the new classes would make this less disruptive 🤔

  • 🇦🇺Australia VladimirAus Brisbane, Australia

    On one hand, semantics is broken according to Mozilla's LI specification.

    The <li> HTML element ... must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>)...
    

    And, secondly, there is no consistency between core themes in something simple like local actions.

  • 🇦🇺Australia VladimirAus Brisbane, Australia
  • 🇳🇿New Zealand quietone New Zealand

    This was a bugsmash daily triage target a few day ago.

    The remaining tasks in the issue summary are out of date, adding tag for an update. This still needs a change record. Leaving at needs work.

  • 🇮🇪Ireland markconroy

    Change record: [#3347200]

  • 🇩🇪Germany Anybody Porta Westfalica

    Agree with #36 and think it would be the correct way to fix this. The release notes should clearly point out, that this *might* break things, as @laurii wrote in his MR comments.

    But IMHO this shouldn't go into 10.x, but just 11.x.

    Was reported once again in 🐛 Local actions template misses UL-element (block--local-actions-block.html.twig) Closed: duplicate

    We should match the pre-existing element, and therefore leave the class out from the

      .

    @laurii what exactly do you mean by "match"? Sorry for the dumb question, but I'd like to get that right and seems like it wasn't solved yet, so perhaps I'm not the only one... ;)

  • 🇷🇺Russia Chi

    Another possible approach just stop using UL for local actions. Really, UL is intended for lists. It's useful say for SR users to understand how long the list is. However, our local actions are typically consist of just one link. It does not make sense to wrap a single link into UL list.

Production build 0.69.0 2024