Change the LB Add block link text to understand in which region the block will be placed

Created on 10 July 2024, about 2 months ago
Updated 15 July 2024, about 2 months ago

Problem/Motivation

When using patterns/components as Layout Builder sections, the preview and rendering of empty component may not be intuitive for a site builder to know in which region a block will be placed.

Currently, there are some hidden text in the link text for assistive technology but when not using such tools, "Add block" links are the same for the site builder.

Proposed resolution

Update the link text.

        '#title' => $this->t('Add block in region @region <span class="visually-hidden">of section @section</span>', ['@section' => $section_label, '@region' => $region_labels[$region]]),

Remaining tasks

Agree on a new title.

User interface changes

Layout Builder add block link text change.

✨ Feature request
Status

Needs work

Version

11.0 πŸ”₯

Component
Layout builderΒ  β†’

Last updated 1 minute ago

Created by

πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

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

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Grimreaper
  • Issue was unassigned.
  • Status changed to Needs review about 2 months ago
  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

    Attaching patch for Composer usage.

  • Status changed to Needs work about 2 months ago
  • The Needs Review Queue Bot β†’ tested this issue.

    While you are making the above changes, we recommend that you convert this patch to a merge request β†’ . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

  • Pipeline finished with Success
    about 2 months ago
    Total: 486s
    #220667
  • πŸ‡«πŸ‡·France pdureau Paris

    The little change we are waiting for so long. Thanks you so much.

    However, you replaced:

    Add block <span class="visually-hidden">in @section, @region region</span>
    

    By:

    Add block in region @region <span class="visually-hidden">, section @section</span>
    

    Knowing than @section is build like that: $layout_settings['label'] ?? $this->t('Section @section', ['@section' => $delta + 1]);

    I would move mentioning "region" because it is obvious for sighted people and visually impaired people have the additional wording, and skip"section" because already part of the label:

    Add block in @region <span class="visually-hidden"> region, @section</span>
    
  • Assigned to Grimreaper
  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·
  • Issue was unassigned.
  • Status changed to Needs review about 2 months ago
  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

    Thanks for the quick feedback.

    I have updated the MR.

    In the original title, there is no space after the end of the opening span tag, so resulting in:

    Add block in @region <span class="visually-hidden">region, @section</span>
    

    And not:

    Add block in @region <span class="visually-hidden"> region, @section</span>
    
  • Pipeline finished with Success
    about 2 months ago
    Total: 510s
    #220697
  • Status changed to Needs work about 2 months ago
  • πŸ‡«πŸ‡·France pdureau Paris

    OK for me :)

  • πŸ‡«πŸ‡·France Grimreaper France πŸ‡«πŸ‡·

    I guess you wanted to RTBC :)

    New patch.

  • Status changed to RTBC about 2 months ago
  • πŸ‡«πŸ‡·France pdureau Paris
  • πŸ‡³πŸ‡ΏNew Zealand DanielVeza Brisbane, AU

    Thanks for raising an issue! This would need test coverage before it is can be moved to RTBC.

    I'm not entirely convinced it is a better UX than the existing setup, but I'd be interested in hearing others opinions on it too

  • Status changed to Needs work about 2 months ago
  • πŸ‡³πŸ‡ΏNew Zealand DanielVeza Brisbane, AU
  • πŸ‡«πŸ‡·France pdureau Paris

    Hi Daniel,

    I'm not entirely convinced it is a better UX than the existing setup, but I'd be interested in hearing others opinions on it too

    Indeed, in the screenshot you uploaded as an example, the improvment is is not very visible, because the region are called "First", "Second", "Third"...

    In the opposite side of the spectrum, you have thos example (each region is a slot of a Bootsrap card) which is unusable without this patch:

Production build 0.71.5 2024