Feat/gradebook course content tab

[michael-on-code]

Checklist

• Tests were added/updated according to the feature/bugfix/change made
• Version was rolled according to semver requirements
• API endpoints openapi schema was updated if applicable

Changes

• feat: gradebook course content tab implemented
• feat: gradebook UI beautified with mfe.css updated

[claude]

Code Quality Review

• Quality: Clean component structure with good test coverage (5 unit tests + E2E). Admin-gating pattern is consistent with existing tabs (instructor).
• Issues:
  1. redirect() from next/navigation inside useEffect in a client component is an anti-pattern — it throws a NEXT_REDIRECT error internally, which may surface as console noise or behave unexpectedly. Use router.replace('/') from useRouter() instead.
  2. @scope CSS at-rule has no Firefox support (as of 2024) — if gradebook users include Firefox, scoping won't apply and the styles will leak globally.
  3. The mobile @media block at the bottom of mfe.css sits outside the @scope block, making .gradebook-content > div:nth-of-type(2) a global selector that could affect other pages.
• Suggestions: Move the media query inside @scope; swap redirect() for useRouter().replace('/').

Summary

Solid feature addition with good test coverage and consistent patterns. The redirect() anti-pattern and the stray global media query are the two items worth fixing before merge.

[claude]

UI/UX Review

• Accessibility: Active tab link missing aria-current="page" — screen readers can't identify the current page. Multiple outline: none !important rules in mfe.css strip focus indicators (violates WCAG 2.1 AA SC 2.4.7). .student-key/.text-muted use #9ca3af at 12px — contrast ratio ~2.5:1, fails AA (needs 4.5:1).

• UX Concerns: No loading state while the admin check (isSuccess) resolves — iframe mounts immediately and may flash empty content before the tab context is set.

• Suggestions: Add aria-current={activeTab === 'gradebook' ? 'page' : undefined} to the Gradebook <Link>. Replace outline: none with an amber outline for focus styles. Bump .text-muted color to at least #6b7280 for small text. Conditionally render the iframe only after isSuccess.

Summary

Solid implementation with good admin-gating and test coverage. Three accessibility issues (missing aria-current, removed focus outlines, low-contrast muted text) need attention to meet WCAG 2.1 AA.