SSE/WebsiteTheSSEquel

Fork

You've already forked WebsiteTheSSEquel

Code Issues 82 Pull requests 21 Projects Releases Packages Wiki Activity Actions

Epic: NoScript Accessibility — Add <noscript> Fallbacks Site-Wide #489

New issue

Open

opened 2026-04-16 07:12:22 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:12:22 +00:00

(Migrated from github.com)

Copy link

Epic Goal

Make the SSE website gracefully usable for members who browse with JavaScript disabled, by adding <noscript> fallbacks and fixing JS-default-hidden content across the site.

Problem / Opportunity

A team member browses without JavaScript. Currently the SSE website has zero <noscript> tags in the entire codebase. The result is silent failures everywhere:

Content is actively hidden by animation components that start opacity-0 and never un-hide without JS
Mobile users have no navigation — the hamburger menu never opens
Sign-in and sign-out are completely broken — both are JS-only event handlers
Every form uses e.preventDefault() + fetch() with no HTML form fallback
Whole pages render blank because all data is fetched in useEffect

Success Criteria

No content is ever hidden by default because of a JS animation — animations are enhancements only
Navigation is usable on both desktop and mobile without JS
Users can reach the sign-in page without JS (via NextAuth's built-in /api/auth/signin)
All public-facing forms have a <noscript> message with an alternative contact path
A root-level banner explains the JS requirement to any noscript visitor
All dynamic data pages have a <noscript> placeholder instead of a silent blank screen

Stories in This Epic

🔴 P0 — Critical

Bug: RevealOnScroll hides content permanently without JS — #475
Bug: Mobile navigation is completely broken without JS — #476
Bug: Sign-in and sign-out are completely broken without JS — #477

🟠 P1 — High

Task: Add root-level noscript banner to layout.tsx — #478
Task: Add noscript fallback to desktop nav dropdowns — #479
Task: Add noscript fallbacks to all public-facing JS-only forms — #480

🟡 P2 — Medium

Task: Add noscript fallbacks to purchasing forms — #481
Task: Add noscript fallbacks to dynamic data pages — #482
Task: Add noscript fallback to Events Calendar — #483
Task: Add noscript fallback to image upload components — #484
Task: Add noscript fallbacks to homepage hero animations — #485

🔵 P3 — Low

Task: Add noscript to Recharts chart components — #486
Task: Add noscript to theme, style, and font toggle buttons — #487
Task: Add noscript fallbacks to officer dashboard pages — #488

Technical Notes

NextAuth ships a built-in HTML sign-in page at /api/auth/signin — use this as the auth fallback, no extra work needed
RevealOnScroll is the most severe issue because it actively hides content. Fix: start visible, add animation class via JS rather than removing a hidden class
Root <noscript> banner in layout.tsx covers the whole app in one change and should be done early
No new dependencies are needed — all fixes are pure HTML <noscript> blocks or CSS tweaks

# Epic Goal Make the SSE website gracefully usable for members who browse with JavaScript disabled, by adding `<noscript>` fallbacks and fixing JS-default-hidden content across the site. ## Problem / Opportunity A team member browses without JavaScript. Currently the SSE website has **zero `<noscript>` tags** in the entire codebase. The result is silent failures everywhere: - Content is **actively hidden** by animation components that start `opacity-0` and never un-hide without JS - **Mobile users have no navigation** — the hamburger menu never opens - **Sign-in and sign-out are completely broken** — both are JS-only event handlers - Every form uses `e.preventDefault()` + `fetch()` with no HTML form fallback - Whole pages render blank because all data is fetched in `useEffect` ## Success Criteria - [ ] No content is ever hidden by default because of a JS animation — animations are enhancements only - [ ] Navigation is usable on both desktop and mobile without JS - [ ] Users can reach the sign-in page without JS (via NextAuth's built-in `/api/auth/signin`) - [ ] All public-facing forms have a `<noscript>` message with an alternative contact path - [ ] A root-level banner explains the JS requirement to any noscript visitor - [ ] All dynamic data pages have a `<noscript>` placeholder instead of a silent blank screen ## Stories in This Epic **🔴 P0 — Critical** - [ ] Bug: RevealOnScroll hides content permanently without JS — #475 - [ ] Bug: Mobile navigation is completely broken without JS — #476 - [ ] Bug: Sign-in and sign-out are completely broken without JS — #477 **🟠 P1 — High** - [ ] Task: Add root-level noscript banner to layout.tsx — #478 - [ ] Task: Add noscript fallback to desktop nav dropdowns — #479 - [ ] Task: Add noscript fallbacks to all public-facing JS-only forms — #480 **🟡 P2 — Medium** - [ ] Task: Add noscript fallbacks to purchasing forms — #481 - [ ] Task: Add noscript fallbacks to dynamic data pages — #482 - [ ] Task: Add noscript fallback to Events Calendar — #483 - [ ] Task: Add noscript fallback to image upload components — #484 - [ ] Task: Add noscript fallbacks to homepage hero animations — #485 **🔵 P3 — Low** - [ ] Task: Add noscript to Recharts chart components — #486 - [ ] Task: Add noscript to theme, style, and font toggle buttons — #487 - [ ] Task: Add noscript fallbacks to officer dashboard pages — #488 ## Technical Notes - **NextAuth** ships a built-in HTML sign-in page at `/api/auth/signin` — use this as the auth fallback, no extra work needed - **`RevealOnScroll`** is the most severe issue because it actively hides content. Fix: start visible, add animation class via JS rather than removing a hidden class - **Root `<noscript>` banner** in `layout.tsx` covers the whole app in one change and should be done early - No new dependencies are needed — all fixes are pure HTML `<noscript>` blocks or CSS tweaks

No Branch/Tag specified

main

development

fix/event-calendar-pcard-submission

dependabot/npm_and_yarn/main/radix-ui/react-toggle-1.1.16

dependabot/npm_and_yarn/main/aws-sdk/client-s3-3.1094.0

dependabot/npm_and_yarn/main/radix-ui/react-progress-1.1.14

dependabot/npm_and_yarn/main/radix-ui/react-checkbox-1.3.9

dependabot/npm_and_yarn/main/radix-ui/react-popover-1.1.21

dependabot/npm_and_yarn/main/radix-ui/react-select-2.3.5

dependabot/npm_and_yarn/main/test-tooling-bc9680511c

dependabot/npm_and_yarn/main/lint-tooling-5bdfcf2836

dependabot/npm_and_yarn/main/root-types-05e7a1191d

dependabot/npm_and_yarn/main/next-react-5dcd6daa8e

feature/migrate-to-pnpm

dependabot/npm_and_yarn/next/development/prisma-7.8.0

dependabot/npm_and_yarn/next/development/diff-9.0.0

fix/524-remove-election-accepted-badges

dependabot/npm_and_yarn/next/main/tailwindcss-4.3.2

dependabot/npm_and_yarn/next/main/aws-sdk/s3-request-presigner-3.1085.0

dependabot/npm_and_yarn/next/main/knip-6.26.0

dependabot/npm_and_yarn/next/main/react-is-19.2.7

dependabot/npm_and_yarn/next/main/sass-1.101.0

dependabot/npm_and_yarn/next/main/autoprefixer-10.5.2

dependabot/npm_and_yarn/next/development/lint-tooling-209fa34ebb

dependabot/npm_and_yarn/next/main/nodemailer-9.0.3

worktree-dynamic-content-cms

546-feature-company-talk-interest-form-page

dynamic-content-cms

feat/public-nominate-form

photo-upload-requests

optimize-photos-gallery

vp-reveal-slide

skip-legacy-membership-import

feature/officer-photo-library

db-import

feature/primary-elections

fix/schedule-gate-and-avatar-unify

amendment-app-auth-dev

feature/constitution-amendments

fix/open-issues-431-441-442-443

amendments

bug/favicon

feature/public-headcount-presigned-upload

feature/feat/library-cover-upload-validation

feature/fix/csp-s3-origins

feature/fix/library-empty-catalog-icon-routing

feature/csp-nonce-aws-auth

chore/discord-ci-failure-notifier

dev/test-discord-webhook

dev/403-409-dev-qol-changes

dev/402-add-setup-dev-command

fix/355-365-sydney-refinements

feat/tech-committee-applications

fix/346-security-hardening

epic-340-input-validation-data-integrity

epic-331-auth-rbac

worktree-epic-331-auth-rbac

fix/361-story-fix-attendance-membership-award-timing-and-early-check-in-gating

test/test_overhaul

docs/documentation_overhaul

fix/library-dependencies

dev/credits-api-fix

dev/credits-page

dev/library

dev/pagination_and_api_blocking

dev/unified_auth_gateway

couple-ishs

dockerfile_and_server_changing

payload-cms

mentoring

profile-picture-and-alumni-improvements

color-pallette

dev/aws_migration

ui-enhancements

dev/mentorschedule

250-user-profile

dev/fix_vulnerabilities

dev/adding_frontpage_mentoring_hours

user_profile

crudable-events

binder-badge-patch-1

copilot/sub-pr-264

feature/main-layout

role-base-oauth-scopes

dev/track_migrations

copilot/sub-pr-260

purchase-order-form

feature/alumni-leadership-improvements

feature/jakob/shadcn

weekly-coding-challenges

dev/issue-252-person-refactor

dev/officer_dashboard

lab-tab-and-lab-album

247-bug-project-modal-description-scrollbars

245-bug-overflow-on-header-for-leaderboard

dev/232-membership-leaderboard

dev/alumni_page_quote_fix

dev/alumni-page

dev/sponsors

206-task-add-open-source-process-documentation

qdb_seachbar

dev/issue-229-golink-fix

dev/leadership_page

dev/google-calendar-events-homepage

dev/qdb-staging

dev/qdb

fix/project-empty-fields

deploy/local-testing

dev/centralized_info

quickfix/general_info

bug/events-filter-mobile

dev/HTTP-fixes

dev/new-qdb

release1

general-fixes-1

dev/events-api-id-change

project-bug-fixes-1

dev/nextauth-token-env

dev/officer-crud

dev/mentor-page

dev/events-fix

dev/go-links-bugfix

dev/events-api

dev/per-user-auth

dev/project-seed-fix

mentor-schedule-combined-route

dev/projects

dev/hotfix

owensConPage

origin/streamline-navbar

origin/hero-daisy-ui

150-Fetch_Officers

168-task-events-api

fixed-build

escape-quote-characters

dev/typewriter

dev/api-self-validation

dev/winterball-springfling

bio-dev

dev/user-profile-image

dev/golinks/pinned-container

v0.1.0-prod

v0.1.0

Labels

Clear labels

accessibility

Accessibility improvements

api

auth.js

Issues involving Auth.js authentication

Something is not as it should be

Improvements or additions to documentation

duplicate

This issue or pull request already exists

enhancement

New feature or request

epic

Track a larger initiative made up of stories

Extra attention is needed

invalid

This doesn't seem right

next.js

Issues involving Next.js

noscript

on hold

This is being put on hold for now...

operations

optimization

postgresql

Issues involving PostgreSQL

prisma

Issues involving the Prisma ORM

prototype

Creating spike deliverables or prototypes

question

Further information is requested

react

Issue involving react

spike

Learning material

stale

This is old and should be reviewed for closure.

story

Track a user-facing or system-facing story

tailwind

Issues involving Tailwind CSS

vulnerability

Addressing a security vulnerability

wontfix

This will not be worked on

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

SSE/WebsiteTheSSEquel#489

Reference in a new issue

Repository

SSE/WebsiteTheSSEquel

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns