Skip to content

refactor: update breadcrumbs item padding, do not clip overflow#11883

Merged
web-padawan merged 1 commit into
mainfrom
breadcrumbs-layout
Jun 8, 2026
Merged

refactor: update breadcrumbs item padding, do not clip overflow#11883
web-padawan merged 1 commit into
mainfrom
breadcrumbs-layout

Conversation

@web-padawan

@web-padawan web-padawan commented Jun 3, 2026

Copy link
Copy Markdown
Member

Description

Extracted from #11868

Depends on #11881

  • Added inline padding to [part='link'] / [part='nolink'] for a larger click target and an offset focus outline
  • Added a matching negative margin-inline on trail items so the visual width is unchanged (overlay items keep the padding so hover/focus backgrounds can fill the row)
  • Removed overflow: hidden and the focus-outline padding workaround from [part='list']. Items still collapse to the overflow menu by setting width, min-width and max-width on the host and the internal list.
  • Replaced the overflow button's padding: 0 with a padding/negative-margin formula that meets WCAG 2.5.8 (24×24 px) without changing visual size

Part of #7960

@web-padawan web-padawan force-pushed the breadcrumbs-layout branch from e988589 to a7ab9b3 Compare June 3, 2026 07:52
@web-padawan web-padawan changed the title refactor(breadcrumbs): padding click target and baseline alignment refactor: update breadcrumbs item padding, use baseline alignment Jun 3, 2026
@web-padawan web-padawan force-pushed the breadcrumbs-layout branch from a7ab9b3 to 761f80c Compare June 3, 2026 07:53
@web-padawan web-padawan requested a review from jouni June 3, 2026 07:54
@web-padawan web-padawan force-pushed the breadcrumbs-layout branch 2 times, most recently from fc6d10a to 79b857b Compare June 3, 2026 08:28
@web-padawan web-padawan changed the title refactor: update breadcrumbs item padding, use baseline alignment refactor: update breadcrumbs item padding, do not clip overflow Jun 3, 2026
@web-padawan web-padawan force-pushed the breadcrumbs-layout branch from 79b857b to 3052dd8 Compare June 3, 2026 08:33
Base automatically changed from breadcrumbs-overflow-icon to main June 8, 2026 05:31
…pping

Trail items now carry inline padding for a larger click target and an
offset focus outline, with a matching negative margin-inline that keeps
the visual width unchanged. The list flex container drops overflow:
hidden so focus outlines render unclipped. The overflow button gets a
padding/margin formula to meet WCAG 2.5.8 minimum click target size.
@web-padawan web-padawan force-pushed the breadcrumbs-layout branch from 3052dd8 to 6dbbe49 Compare June 8, 2026 05:36
@web-padawan web-padawan marked this pull request as ready for review June 8, 2026 05:36
@sonarqubecloud

sonarqubecloud Bot commented Jun 8, 2026

Copy link
Copy Markdown

@web-padawan web-padawan merged commit 988a472 into main Jun 8, 2026
10 checks passed
@web-padawan web-padawan deleted the breadcrumbs-layout branch June 8, 2026 05:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants