Mobile friendly breadcrumb (Lighthouse)

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

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

This issue talks about how this is a lighthouse failure.

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

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.

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

unable to push so created patch for D11 please review

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!

Fixes should be in MRs vs patches.

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

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.

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!

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.

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 → 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.

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

Based on discussion in 🐛 [meta] Some interface components don’t meet the minimum target size Active , 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

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.