feat: Header - Focus order meaning - Open Edx Demo Course #30
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## sumac/indigo #30 +/- ##
================================================
+ Coverage 68.39% 68.53% +0.13%
================================================
Files 49 49
Lines 481 483 +2
Branches 107 109 +2
================================================
+ Hits 329 331 +2
Misses 149 149
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Comment on lines
+34
to
+40
| {showUserDropdown && authenticatedUser && ( | ||
| <Responsive maxWidth={991}> | ||
| <AuthenticatedUserDropdown | ||
| username={authenticatedUser.username} | ||
| /> | ||
| </Responsive> | ||
| )} |
There was a problem hiding this comment.
How is this different from the same code below? Why is this added?
There was a problem hiding this comment.
@DawoudSheraz This change adjusts the dropdown's DOM position based on screen size—placing it at the end on desktop and the start in mobile’s hamburger menu. This ensures proper focus order and prevents hidden content issues during keyboard navigation. Screenshots are also added in the PR description to demonstrate the fixed behavior across devices.
There was a problem hiding this comment.
There are no screenshots in PR description. I understand the context, but please add the screenshot as they are helpful for reviewers and anyone looking at PR.
There was a problem hiding this comment.
@DawoudSheraz, I have attached the screenshots.
ahmed-arb
approved these changes
Jun 11, 2025
DawoudSheraz
approved these changes
Jun 16, 2025
DawoudSheraz
added a commit
that referenced
this pull request
Jun 24, 2025
* fix: Add visible titles to image-based links * feat: enhance accessibility by adding descriptive label to theme toggle (#29) * feat: Header - Focus order meaning - Open Edx Demo Course (#30) * feat: Header - Focus order meaning - Open Edx Demo Course * refactor: unify responsive rendering using the existing Responsive component Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com> Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>
ahmed-arb
pushed a commit
that referenced
this pull request
Jul 8, 2025
* fix: Add visible titles to image-based links * feat: enhance accessibility by adding descriptive label to theme toggle (#29) * feat: Header - Focus order meaning - Open Edx Demo Course (#30) * feat: Header - Focus order meaning - Open Edx Demo Course * refactor: unify responsive rendering using the existing Responsive component Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com> Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>
ahmed-arb
pushed a commit
that referenced
this pull request
Jul 11, 2025
* fix: Add visible titles to image-based links * feat: enhance accessibility by adding descriptive label to theme toggle (#29) * feat: Header - Focus order meaning - Open Edx Demo Course (#30) * feat: Header - Focus order meaning - Open Edx Demo Course * refactor: unify responsive rendering using the existing Responsive component Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com> Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>
ahmed-arb
pushed a commit
that referenced
this pull request
Jul 16, 2025
* fix: Add visible titles to image-based links * feat: enhance accessibility by adding descriptive label to theme toggle (#29) * feat: Header - Focus order meaning - Open Edx Demo Course (#30) * feat: Header - Focus order meaning - Open Edx Demo Course * refactor: unify responsive rendering using the existing Responsive component Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com> Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>
ahmed-arb
pushed a commit
that referenced
this pull request
Jul 16, 2025
* fix: Add visible titles to image-based links * feat: enhance accessibility by adding descriptive label to theme toggle (#29) * feat: Header - Focus order meaning - Open Edx Demo Course (#30) * feat: Header - Focus order meaning - Open Edx Demo Course * refactor: unify responsive rendering using the existing Responsive component Co-authored-by: Rahat Ali <rahat.ali@arbisoft.com> Co-authored-by: hinakhadim <hina.khadim@arbisoft.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📄 Description
This PR resolves a keyboard navigation issue in the hamburger menu of the header on the Progress page in the Open edX Demo Course. The interactive elements within the hamburger menu were either not reachable via keyboard or did not follow a logical focus sequence, posing an accessibility barrier for keyboard-only users.
The fix ensures that focus order is correctly applied to all elements within the hamburger menu, aligning with WCAG Success Criterion 2.4.3 – Focus Order, which requires that focusable components receive focus in an order that preserves meaning and operability.
🎯 Issue
When the hamburger menu is opened, the interactive elements inside it (e.g., links, buttons) are either not accessible via the Tab key or are focused in an illogical order. This prevents users relying on keyboard navigation from accessing the menu content effectively.
✅ Fix
🖼️ Screenshots/Sandbox (optional):
Live Preview: View Sandbox
🔗 Related