Skip to content

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

Draft
web-padawan wants to merge 1 commit into
breadcrumbs-overflow-iconfrom
breadcrumbs-layout
Draft

refactor: update breadcrumbs item padding, do not clip overflow#11883
web-padawan wants to merge 1 commit into
breadcrumbs-overflow-iconfrom
breadcrumbs-layout

Conversation

@web-padawan
Copy link
Copy Markdown
Member

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

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
…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 79b857b to 3052dd8 Compare June 3, 2026 08:33
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Jun 3, 2026

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.

1 participant