Skip to content

feat: Add <noscript> fallback message for users with JavaScript disabled#276

Open
Harshada-Yele wants to merge 1 commit into
komalharshita:mainfrom
Harshada-Yele:fix/noscript-fallback
Open

feat: Add <noscript> fallback message for users with JavaScript disabled#276
Harshada-Yele wants to merge 1 commit into
komalharshita:mainfrom
Harshada-Yele:fix/noscript-fallback

Conversation

@Harshada-Yele
Copy link
Copy Markdown
Contributor

Summary

This PR adds a <noscript> fallback message to templates/index.html so that
users with JavaScript disabled see a clear explanation instead of a silently
broken form.
The warning banner is styled in static/style.css using existing
CSS custom properties and appears directly below the navbar. Without this change, the skill chip input system renders but is completely non-functional for
JS-disabled users with no feedback shown.

Related Issue [required]

Closes #256

Type of Change

  • Bug fix — resolves a broken behaviour
  • Feature — adds new functionality
  • Data — adds new projects to data/projects.json
  • Documentation — updates docs, README, or code comments only
  • Style — CSS or visual changes only, no logic change
  • Refactor — restructures code without changing behaviour
  • Test — adds or updates tests

What Was Changed

File Change made
templates/index.html Added <noscript> block below <nav> to display fallback message when JS is disabled
static/style.css Added .noscript-warning class styled with warning colours and margin-top: 64px to account for fixed navbar height

How to Test This PR

  1. Clone this branch: git checkout feat/noscript-fallback
  2. Install dependencies: pip install -r requirements.txt
  3. Run the app: python app.py
  4. Open Chrome and go to chrome://settings/content/javascript
  5. Under "Not allowed to use JavaScript" click Add and enter 127.0.0.1:5000
  6. Open http://127.0.0.1:5000 — you should see a yellow warning banner below the navbar
  7. Remove 127.0.0.1:5000 from the blocked list and reload — banner should disappear
  8. Run the tests: pytest tests/test_basic.py -k "not test_health_check"

Expected test output:

29 passed, 0 failed 

Test Results

image

Screenshots

Before After
Form renders silently broken with no message
Screenshot 2026-05-18 130521 | Yellow warning banner appears below navbar when JS is disabled Screenshot 2026-05-18 133857 |

Self-Review Checklist

  • I have read CONTRIBUTING.md and followed all guidelines
  • My branch name follows the convention: feat/noscript-fallback
  • I have run pytest tests/test_basic.py and 29 tests pass
  • I have not introduced any print() or console.log() debug statements
  • I have not modified files outside the scope of the linked issue
  • If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)

Notes for Reviewer

The <noscript> tag is placed between the <nav> and <section class="hero">
so it appears at the top of the page content. The margin-top: 64px in CSS
accounts for the fixed navbar height to prevent the banner being hidden behind it.

Note: test_health_check has a pre-existing fixture bug unrelated to this PR.
A separate issue should be raised for it.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

@Harshada-Yele is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc-2026 type:bug Something isn't working type:accessibility ui and removed type:bug Something isn't working gssoc-2026 labels May 18, 2026
@Harshada-Yele
Copy link
Copy Markdown
Contributor Author

Hi @komalharshita
Ready for review.
All 29 tests pass and before/after screenshots are included.

Note: test_health_check has a pre-existing fixture bug unrelated to this PR.
A separate issue should be raised for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Add <noscript> fallback message for users with JavaScript disabled

1 participant