Skip to content

[UEPR-624] Make sure focus outline is visible on Safari#618

Open
adzhindzhi wants to merge 1 commit into
scratchfoundation:developfrom
adzhindzhi:bugfix/uepr-624-fix-missing-focus-outline-on-safari
Open

[UEPR-624] Make sure focus outline is visible on Safari#618
adzhindzhi wants to merge 1 commit into
scratchfoundation:developfrom
adzhindzhi:bugfix/uepr-624-fix-missing-focus-outline-on-safari

Conversation

@adzhindzhi

@adzhindzhi adzhindzhi commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

Resolves

UEPR-624

Proposed Changes

Ensure components with overflow: hidden do not cut off the focus outline in Safari.

  • Tutorial Cards: Added sufficient padding to ensure the focus outline renders completely. Also added outline-offset to reduce the spacing required for the outline to appear.
  • Debug Modal: Removed unnecessary padding that caused the button to overflow its parent component and distort the outline shape.
  • Settings Submenus: Removed overflow: hidden from the Theme and Color Mode menus, as they contain only a few elements and do not require it. The Language menu retains overflow: hidden because it requires a max-height and a scrollbar, which inherently changes how Safari renders its outlines and prevents them from being clipped.

Reason for Changes

Part of the accessibility work.

@adzhindzhi adzhindzhi requested a review from a team as a code owner June 24, 2026 10:12
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