Skip to content

Conversation

@arbirali
Copy link
Contributor

@arbirali arbirali commented May 15, 2025

πŸ“ Description

This PR improves keyboard accessibility by updating the global focus styles to comply with WCAG 2.4.11 – Focus Appearance (Minimum).

Previously, the focus indicators on interactive elements were only 1px thick, which falls short of the minimum visibility requirements. The update ensures that:

  • All focusable elements now have a clearly visible 2px focus outline.
  • Keyboard users can more easily identify which element is currently focused.

Related issue: tutor-indigo/#146
Taiga Task (if accessible): US 70 – Focus indicator thickness compliance
Related PR: brand-openedx #36


πŸ§ͺ How Has This Been Tested?

  • Manually tested using keyboard navigation (Tab/Shift+Tab) to confirm that the updated 2px outline is applied consistently.
  • Verified that the visual focus remains unobtrusive but clearly visible across various UI components.

πŸ–ΌοΈ Screenshots/Sandbox (optional):

Live Preview: View Sandbox

Before After
1px thin focus outline 2px thick focus outline

Before
image

After
image


πŸ“„ Accessibility Audit Report

For the full audit and issue breakdown, please refer to the following report: Accessibility Audit

Copy link
Contributor

@mlabeeb03 mlabeeb03 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes look good. Could you please remove merge conflicts.

@arbirali arbirali requested a review from mlabeeb03 June 3, 2025 06:58
@ahmed-arb ahmed-arb merged commit 97858f4 into overhangio:release Jun 3, 2025
1 check passed
@github-project-automation github-project-automation bot moved this from In review to Done in Tutor project management Jun 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Development

Successfully merging this pull request may close these issues.

3 participants