Skip to content

feat/header-username - #129

Merged
ebouchut merged 3 commits into
devfrom
feat/header-username
Aug 1, 2026
Merged

feat/header-username#129
ebouchut merged 3 commits into
devfrom
feat/header-username

Conversation

@ebouchut

@ebouchut ebouchut commented Aug 1, 2026

Copy link
Copy Markdown
Owner

This PR shows the signed-in username in the site header for authenticated users.

The username and Log out form of the nav are moved into a separate account. This avoid treating the username as a nav item and to allow proper wrapping on mobile.

  • Visually hide Signed in as prefix from screen readers.
  • Truncate username with CSS and mute it for sighted users.
  • Adjust the MockMvc tests to:
    • Assert its presence for authenticated users and its absence for anonymous visitors,
    • Reflect the markup behavior.
  • Move username and Log out form into site-header account group with a divider to separate from the navigation.
  • Enable nav list wrapping
  • Add responsive width caps for the username (12rem, 40vw under 46rem).
  • Add documentation plan describing the behavior and accessibility changes.

ebouchut added 3 commits July 31, 2026 23:03
Authenticated users see Dashboard, Courses, and Log out, but nothing
tells them which account they are acting as. The plan reuses the
dashboard greeting pattern (sec:authentication) to show the escaped,
CSS-truncated username in the header, with a visually hidden
"Signed in as" prefix for screen readers.

Refs #126
Nothing in the page chrome said which account the user was acting as:
the header showed Dashboard, Courses, and Log out, and the username
only appeared in the dashboard greeting, which matters when switching
between student, instructor, and admin accounts.

The authenticated nav now carries the username before the Log out
control, reusing the dashboard's sec:authentication pattern, so it is
escaped by the attribute processor. A visually hidden prefix makes
screen readers announce "Signed in as [name]" while sighted users
just see the muted name. The CSS truncates at 12rem with an ellipsis
so a 50 character username (the schema cap) cannot distort the
header. MockMvc asserts the item renders when authenticated and is
absent for anonymous visitors.

Fixes #126
…bile

Review feedback on the first header username implementation (issue
reopened): the username read as just another nav item, and the header
broke on mobile, where the Log out button was pushed off-screen once
logged in. Root cause: the nav list never wrapped (flex default), and
the 12rem username item made the authenticated row overflow.

The username and the Log out form move out of the nav into a
site-header__account group behind a border divider, so assistive tech
browsing the Main landmark only meets real links and the pair wraps as
one unit on narrow viewports. The nav list now wraps (this also
hardens the anonymous header), and the username width caps at 40vw
under the 46rem breakpoint on top of the 12rem desktop cap. The plan
document records the amendment, and the MockMvc assertions follow the
new markup.

Refs #126
@codecov

codecov Bot commented Aug 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.71%. Comparing base (5081b99) to head (5669722).

Additional details and impacted files
@@             Coverage Diff              @@
##                dev     #129      +/-   ##
============================================
+ Coverage     81.59%   81.71%   +0.11%     
- Complexity      201      202       +1     
============================================
  Files            38       38              
  Lines           864      864              
  Branches         53       53              
============================================
+ Hits            705      706       +1     
+ Misses          125      124       -1     
  Partials         34       34              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ebouchut ebouchut self-assigned this Aug 1, 2026
@ebouchut ebouchut added documentation Improvements or additions to documentation feature frontend labels Aug 1, 2026
@ebouchut ebouchut moved this to In Progress in learn-dev-project Aug 1, 2026
@ebouchut ebouchut moved this from In Progress to In Review in learn-dev-project Aug 1, 2026
@ebouchut ebouchut added this to the v1.0- Certification - DWWM milestone Aug 1, 2026
@ebouchut
ebouchut merged commit da15d16 into dev Aug 1, 2026
7 checks passed
@ebouchut
ebouchut deleted the feat/header-username branch August 1, 2026 16:42
@github-project-automation github-project-automation Bot moved this from In Review to Done in learn-dev-project Aug 1, 2026
@ebouchut ebouchut linked an issue Aug 1, 2026 that may be closed by this pull request
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation feature frontend

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Show the signed-in username in the header

1 participant