fix: breadcrumb with single character fails wcag 2.2 target size #19287

preetibansalui · 2025-05-02T13:38:33Z

Closes #19266

Breadcrumb with single character in small size fails to wcag 2.2 target size, it should be minimum 24 px.

Changelog

Changed

Provide a minimum width of 20px to breadcrumb item

Testing / Reviewing

Go to Storybook > Breadcrumb > Default
change text to single corrector, eg: 1,2
Inspect and check the size, it's width should be more than 24px including margins.

netlify · 2025-05-02T13:44:00Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`d58a885`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/681cd1e5a65e930007176244
😎 Deploy Preview	https://deploy-preview-19287--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2025-05-02T13:47:32Z

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	`d58a885`
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/681cd1e5a37e8b000707a774
😎 Deploy Preview	https://deploy-preview-19287--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2025-05-02T13:57:00Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.78%. Comparing base (42d3f0b) to head (d58a885).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #19287   +/-   ##
=======================================
  Coverage   84.78%   84.78%           
=======================================
  Files         371      371           
  Lines       14411    14411           
  Branches     4713     4747   +34     
=======================================
  Hits        12218    12218           
  Misses       2044     2044           
  Partials      149      149

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

annawen1 · 2025-05-02T14:19:29Z

packages/styles/scss/components/breadcrumb/_breadcrumb.scss

@@ -49,6 +49,11 @@
    margin-inline-end: $spacing-02;
  }

+  .#{$prefix}--breadcrumb--sm .#{$prefix}--breadcrumb-item .#{$prefix}--link {
+    justify-content: center;
+    min-inline-size: $spacing-04;


@warrenmblood had mentioned this issue with the Target size doesn't exist in Web Components because the margin is 8px instead of 4px in React - I wonder if we need to discuss with design to see if it's just an issue of adjusting the margins? or if this fix needs to be applied to WC too (setting the margin to 4px to align with React and then applying this same fix)?

I thought to avoid changing the margins because it would affect all breadcrumbs, not just the single-character ones, which could potentially break the existing design for current users. I think it's a good idea to confirm with Design.

warrenmblood

I agree with discussing this with design first and deciding how to match WC and React, but these changes look good to me for preventing the WCAG target size failure!

…-wcag-target-size

thyhmdo · 2025-05-05T16:38:22Z

Hi, according to our guidance:

4px/.25rem is applied to margins of the small size
8px/.5 rem is applied to margins of the medium size

preetibansalui · 2025-05-06T05:29:10Z

Hi, according to our guidance:

4px/.25rem is applied to margins of the small size

8px/.5 rem is applied to margins of the medium size

Thanks @thyhmdo !

@annawen1 : Small and medium breadcrumbs already have guided margins, so the minimum width solution should be fine.

annawen1 · 2025-05-06T16:39:34Z

Hi, according to our guidance:

4px/.25rem is applied to margins of the small size

8px/.5 rem is applied to margins of the medium size

Thanks @thyhmdo !

@annawen1 : Small and medium breadcrumbs already have guided margins, so the minimum width solution should be fine.

Ok great, let's adjust the margin on WC small breadcrumb since it's currently 8px and confirm the min-width also gets applied there too!

preetibansalui · 2025-05-07T15:51:33Z

Hi, according to our guidance:

4px/.25rem is applied to margins of the small size

8px/.5 rem is applied to margins of the medium size

Thanks @thyhmdo !
@annawen1 : Small and medium breadcrumbs already have guided margins, so the minimum width solution should be fine.

Ok great, let's adjust the margin on WC small breadcrumb since it's currently 8px and confirm the min-width also gets applied there too!

Applied the same changes to web-components as well to make them align. Please review

annawen1 · 2025-05-07T19:35:28Z

packages/web-components/src/components/breadcrumb/breadcrumb.ts

+      const items = document
+        .querySelector(`${prefix}-breadcrumb`)
+        ?.querySelectorAll(`${prefix}-breadcrumb-item`);


Suggested change

const items = document

.querySelector(`${prefix}-breadcrumb`)

?.querySelectorAll(`${prefix}-breadcrumb-item`);

const items = this.querySelectorAll(`${prefix}-breadcrumb-item`);

You'll want to scope the querySelector to the current instance of breadcrumb instead of document otherwise if there are other instances of breadcrumb on the page, it will affect those other instances as well

annawen1 · 2025-05-08T14:32:03Z

packages/web-components/src/components/breadcrumb/breadcrumb.ts

@@ -29,7 +29,7 @@ class CDSBreadcrumb extends LitElement {
   * Specify the size of the Breadcrumb. Currently
   * supports the following: `sm` & `md` (default: 'md')
   */
-  @property()
+  @property({ type: BREADCRUMB_SIZE, reflect: true, attribute: 'size' })


Suggested change

@property({ type: BREADCRUMB_SIZE, reflect: true, attribute: 'size' })

@property({ type: BREADCRUMB_SIZE, reflect: true })

Also no need to set the attribute here since the name is the same

…-wcag-target-size

warrenmblood

LGTM

fix: breadcrumb with single character fails wcag 2.2 target size

c6f4741

preetibansalui requested review from a team as code owners May 2, 2025 13:38

preetibansalui requested review from riddhybansal and tay1orjones May 2, 2025 13:38

annawen1 reviewed May 2, 2025

View reviewed changes

warrenmblood reviewed May 2, 2025

View reviewed changes

preetibansalui added the status: visual review 🔍 label May 2, 2025

Merge branch 'main' into 19266-breadcrumb-with-single-character-fails…

10c67d4

…-wcag-target-size

fix: update same spacing in web-components as well

b78d1a6

annawen1 reviewed May 7, 2025

View reviewed changes

fix: change code

a9fea1a

annawen1 reviewed May 8, 2025

View reviewed changes

annawen1 approved these changes May 8, 2025

View reviewed changes

preetibansalui and others added 2 commits May 8, 2025 21:16

fix: removed size

90ef6cb

Merge branch 'main' into 19266-breadcrumb-with-single-character-fails…

d58a885

…-wcag-target-size

preetibansalui added status: one more review 👀 and removed status: visual review 🔍 labels May 8, 2025

warrenmblood approved these changes May 8, 2025

View reviewed changes

warrenmblood added this pull request to the merge queue May 8, 2025

warrenmblood removed the status: one more review 👀 label May 8, 2025

Merged via the queue into carbon-design-system:main with commit 990010d May 8, 2025
37 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: breadcrumb with single character fails wcag 2.2 target size #19287

fix: breadcrumb with single character fails wcag 2.2 target size #19287

Uh oh!

preetibansalui commented May 2, 2025 •

edited

Loading

Uh oh!

netlify bot commented May 2, 2025 •

edited

Loading

Uh oh!

netlify bot commented May 2, 2025 •

edited

Loading

Uh oh!

codecov bot commented May 2, 2025 •

edited

Loading

Uh oh!

annawen1 May 2, 2025 •

edited

Loading

Uh oh!

preetibansalui May 2, 2025

Uh oh!

warrenmblood left a comment

Uh oh!

thyhmdo commented May 5, 2025

Uh oh!

preetibansalui commented May 6, 2025

Uh oh!

annawen1 commented May 6, 2025 •

edited

Loading

Uh oh!

preetibansalui commented May 7, 2025

Uh oh!

annawen1 May 7, 2025 •

edited

Loading

Uh oh!

annawen1 May 8, 2025

Uh oh!

warrenmblood left a comment

Uh oh!

Uh oh!

Uh oh!

	@property({ type: BREADCRUMB_SIZE, reflect: true, attribute: 'size' })
	@property({ type: BREADCRUMB_SIZE, reflect: true })

fix: breadcrumb with single character fails wcag 2.2 target size #19287

fix: breadcrumb with single character fails wcag 2.2 target size #19287

Uh oh!

Conversation

preetibansalui commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Testing / Reviewing

Uh oh!

netlify bot commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify bot commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

codecov bot commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

annawen1 May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

preetibansalui May 2, 2025

Choose a reason for hiding this comment

Uh oh!

warrenmblood left a comment

Choose a reason for hiding this comment

Uh oh!

thyhmdo commented May 5, 2025

Uh oh!

preetibansalui commented May 6, 2025

Uh oh!

annawen1 commented May 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

preetibansalui commented May 7, 2025

Uh oh!

annawen1 May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

annawen1 May 8, 2025

Choose a reason for hiding this comment

Uh oh!

warrenmblood left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

preetibansalui commented May 2, 2025 •

edited

Loading

netlify bot commented May 2, 2025 •

edited

Loading

netlify bot commented May 2, 2025 •

edited

Loading

codecov bot commented May 2, 2025 •

edited

Loading

annawen1 May 2, 2025 •

edited

Loading

annawen1 commented May 6, 2025 •

edited

Loading

annawen1 May 7, 2025 •

edited

Loading