Problem

If a long breadcrumb in Claro is on multiple lines, it does not meet the WCAG minimum target size of 24px by 24px.

The Lighthouse error links to Dequeue University's target-size rule, for which the description is:

Touch targets must be at least 24 by 24 CSS pixels in size. Size is computed by taking the largest unobscured area of the touch target. If the size of the target is insufficient, then it must be possible to draw a virtual circle centered on the target with a diameter of 24 pixels that does not intersect any other targets, nor any of the circles on other undersized targets.

The corresponding WCAG rule is Success Criterion 2.5.8 Target Size (Minimum).

Steps to reproduce

  1. Install standard profile.
  2. Log in as admin.
  3. Go to/admin/config/content/formats/manage/basic_html.
  4. Run a Lighthouse accessibility audit for mobile.

The attached Lighthouse HTML export shows the error.

Proposed resolution

Change the CSS to enforce a minimum height of 1.5rem (24px) for the elements. The items are expected to always be >= 24px wide, so a minimum width spec should not be necessary.

Before changes

screenshot of breadcrumb exhibiting the problem

After changes

screenshot with changes applied on a smaller screen
screenshot with changes applied on a larger screen

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#32 3223147-screenshot-of-changes-in-MR11394-large-screen.scaled.png33.28 KBkentr
#32 3223147-screenshot-of-changes-in-MR11394-small-screen.scaled.png34.03 KBkentr
#32 3223147-screenshot-of-problem-small-screen.scaled.png33.31 KBkentr
#31 3223147-screenshot-of-changes-in-MR11394-large-screen.png54.33 KBkentr
#31 3223147-screenshot-of-changes-in-MR11394-small-screen.png47.83 KBkentr
#27 3223147-lighthouse-admin-page-11.x.html_.zip182.92 KBkentr
#25 3223147-nr-bot.txt92 bytesneeds-review-queue-bot
#24 breadcrumb_desktop_10.png273.69 KBsupriyak
#24 breadcrumb_desktop_9.4.png284.89 KBsupriyak
#20 breadcrumb_mobile_view.png647.88 KBsupriyak
#20 breadcrumb_desktop_view.png635.29 KBsupriyak
#19 re-roll-patch-D11.patch1.98 KBsaurav-drupal-dev
#17 Screenshot at Jan 18 10-31-41.png81 KBshweta__sharma
#14 After-patch-apply-mobile-view-3223147.png338.64 KBnikhil_110
#14 After-patch-apply-web-view-3223147.png680.52 KBnikhil_110
#14 Before-patch-apply-mobile-view-3223147.png366.21 KBnikhil_110
#14 Before-patch-apply-web-view-3223147.png713.93 KBnikhil_110

Issue fork drupal-3223147

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

hop created an issue. See original summary.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.1.10 (June 4, 2021) and Drupal 9.2.10 (November 24, 2021) were the last bugfix releases of those minor version series. Drupal 9 bug reports should be targeted for the 9.3.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Issue tags: +Accessibility
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue tags: +ContributionWeekend2022

Good idea. Let's be sure the changes are not using px, but rems.

martin107 made their first commit to this issue’s fork.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Priority: Normal » Major

Marking as major but not adding as a stable blocker for Claro since this also happens in Seven.

kostyashupenko made their first commit to this issue’s fork.

kostyashupenko opened merge request !1732

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Active » Needs review
kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Issue tags: +Needs manual testing, +Needs issue summary update, +Needs steps to reproduce, +Needs screenshots

Thanks for the MR.

1. Patch still applies to both 9.3 and 9.4.

2. Code changes match the proposed resolution except that line-height: 3rem; is in the css file and line-height: 48px; in the pcss. The proposed resolution is not consistent with px vs rem between the two classes.

3. Assumes that no tests will be added for this since it's a visual thing that may be hard to test.

4. Tagging for steps to reproduce, testing, before/after screenshots, and issue summary update.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Was previously tagged for steps to reproduce, screenshots, and IS update

nikhil_110’s picture

nikhil_110 commented
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new Before-patch-apply-web-view-3223147.png713.93 KB
new Before-patch-apply-mobile-view-3223147.png366.21 KB
new After-patch-apply-web-view-3223147.png680.52 KB
new After-patch-apply-mobile-view-3223147.png338.64 KB

Address #13
I have tried the steps to reproduce, screenshot and IS updated.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

This issue talks about how this is a lighthouse failure.

We probably will need a test case to show this was fixed.

shoshan’s picture

shoshan commented
Issue tags: -Needs screenshots
shweta__sharma’s picture

shweta__sharma commented
StatusFileSize
new Screenshot at Jan 18 10-31-41.png81 KB

I tried to replicate the issue but I am unable to replicate it. I followed the steps mentioned in the STR

Followed below mentioned steps -

  1. Set Claro theme as a default theme.
  2. Created node with a long title.
  3. Then go to the incognito tab with the created node view page.

image

How i can see the below breadcrumbs links mentioned in before screenshots?

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

saurav-drupal-dev’s picture

saurav-drupal-dev commented
StatusFileSize
new re-roll-patch-D11.patch1.98 KB

unable to push so created patch for D11 please review

supriyak’s picture

supriyak commented
StatusFileSize
new breadcrumb_desktop_view.png635.29 KB
new breadcrumb_mobile_view.png647.88 KB

Hi,

I tried to check the issue with steps mentioned in issue description on Drupal 11, but unable to replicate the issue.

Below I have attached screenshots on desktop and mobile view. As, if the issue is not reproducible on latest version can we close this case?

I am moving this to Needs Review.

Thanks!

supriyak’s picture

supriyak commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Fixes should be in MRs vs patches.

Also the steps mention D9.5, has this been confirmed in 11.x?

arunkumark made their first commit to this issue’s fork.

supriyak’s picture

supriyak commented
Status: Needs work » Needs review
StatusFileSize
new breadcrumb_desktop_9.4.png284.89 KB
new breadcrumb_desktop_10.png273.69 KB

Hi @smustgrave,

I have checked this issue on versions 9.4.0-dev, 10.0.12-dev, 11.x-dev, but it is not reproducible on my end. I have attached screenshots for your reference.
drupal9.4-desktop
drupal10_desktop
drupal11_mobile
drupal11_desktop

I have followed all the steps mentioned here.

  • Setup Drupal
  • Activate Claro theme and set default theme
  • Create node with long title
  • Go to incognito tab with created node view page
  • There line-height between breadcrumbs and title is not properly showing And Node title and header padding not properly showing.

Please let me know what should be the next step from my side.

Thank you!

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3223147-nr-bot.txt92 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

vensires’s picture

vensires
Location Greece
commented
Issue tags: +GreeceWinterSprint2024
kentr’s picture

kentr commented
Assigned: Unassigned » kentr
Issue summary: View changes
StatusFileSize
new 3223147-lighthouse-admin-page-11.x.html_.zip182.92 KB

I am able to reproduce on 11.x with different STR. I updated the IS and am attaching the HTML Lighthouse report.

I think I can fashion a failing Nightwatch Axe test.

The Axe rule currently referenced by Lighthouse now specifies 24x24 px instead of 48x48 px, but I didn't change that in the IS because I don't know the history.

On a meta-level, in case it is a policy problem:

This issue is WCAG 2.2 AA. A Nightwatch Axe-core test just for this issue will need to explicitly invoke WCAG 2.2 AA, because the existing automated Axe tests don't appear to run WCAG 2.2 AA. So, the standard for this test will differ from the rest unless all tests are updated.

The Accessibility Coding Standards are unclear IMO on whether core / Drupal CMS are required to meet WCAG 2.2 AA.

Though the existing Axe tests still wouldn't have caught this for other reasons, in general they would catch some target-size problems if we started including WCAG 2.2 AA.

kentr opened merge request !11394

kentr changed the visibility of the branch 3223147-mobile-friendly-breadcrumb to hidden.

kentr changed the visibility of the branch 3223147-mobile-friendly-breadcrumb-fix to hidden.

kentr’s picture

kentr commented
Title: Mobile friendly breadcrumb (Lighthouse) » Claro breadcrumb doesn't meet minimum target-size
Assigned: kentr » Unassigned
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs manual testing, -Needs issue summary update, -Needs steps to reproduce +wcag258
Parent issue: » #3491461: [meta] Some interface components don’t meet the minimum target size
StatusFileSize
new 3223147-screenshot-of-changes-in-MR11394-small-screen.png47.83 KB
new 3223147-screenshot-of-changes-in-MR11394-large-screen.png54.33 KB

MR 11394 is against 11.x and includes a Nightwatch test.

Based on discussion in #3491461: [meta] Some interface components don’t meet the minimum target size, I reduced the height of the elements to 1.5rem, which comes to 24px.

I am attaching new screenshots with the changes, as they are different than the previous version.

Tagging for https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

kentr’s picture

kentr commented
Issue summary: View changes
StatusFileSize
new 3223147-screenshot-of-problem-small-screen.scaled.png33.31 KB
new 3223147-screenshot-of-changes-in-MR11394-small-screen.scaled.png34.03 KB
new 3223147-screenshot-of-changes-in-MR11394-large-screen.scaled.png33.28 KB
smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

After applying the MR confirmed I'm getting the same results as the screenshots in the issue summary. Tested at various mobile widths and confirmed the breadcrumb__item always stayed at 24px.

Believe this one is good.

catch’s picture

catch
he/him
Primary language English
commented
Issue tags: +Needs subsystem maintainer review, +Needs frontend framework manager review

I think this could use review either from a Claro maintainer or an FEFM, I don't feel like my CSS is up to reviewing whether this covers all cases or not.

nod_ closed merge request !11394

nod_ reopened merge request !11394

nod_ made their first commit to this issue’s fork.

nod_ closed merge request !11394

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Fixed
Issue tags: -Needs subsystem maintainer review, -Needs frontend framework manager review

Committed and pushed 72c39ca98ec to 11.x and dce32095c10 to 11.2.x and 0f3a62ab851 to 10.6.x and f0525143a35 to 10.5.x. Thanks!

  • nod_ committed f0525143 on 10.5.x 
    Issue #3223147 by kentr, kostyashupenko, nikhil_110, smustgrave, hop,...

  • nod_ committed 0f3a62ab on 10.6.x 
    Issue #3223147 by kentr, kostyashupenko, nikhil_110, smustgrave, hop,...

  • nod_ committed dce32095 on 11.2.x 
    Issue #3223147 by kentr, kostyashupenko, nikhil_110, smustgrave, hop,...

  • nod_ committed 72c39ca9 on 11.x 
    Issue #3223147 by kentr, kostyashupenko, nikhil_110, smustgrave, hop,...
nod_’s picture

nod_
Primary language French
Location Lille
commented
nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 11.x-dev » 10.5.x-dev

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.