avedmala · avedmala · Feb 12, 2026
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-14 - [Accessibility and Usability Sweep]
+**Learning:** The application relied heavily on implicit interactions (pressing Enter to submit) and lacked basic accessibility metadata (alt text, ARIA labels). Using `sr-only` labels in Bootstrap 4.4.1 allows for improving screen reader support without drastically altering the minimalist visual design. Adding visible submit buttons significantly improves the "affordance" of forms.
+**Action:** Always check for `sr-only` labels and visible submit buttons when reviewing minimalist UIs. Ensure icon-only buttons have `aria-label`.
diff --git a/static/styles/main.css b/static/styles/main.css
@@ -50,7 +50,8 @@ img {
     margin-right: auto;
 }
 
-.form-signin .form-control {
+.form-signin .form-control,
+.form-signin .btn {
     width: 300px;
     margin-top: 20px;
     margin-left: auto;

diff --git a/templates/login.html b/templates/login.html
@@ -15,7 +15,7 @@
 <body class="text-center">
     <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">
         <a href="/">
-            <img class="navbar-brand" src="/static/images/icon.png" width="30" />
+            <img class="navbar-brand" src="/static/images/icon.png" width="30" alt="Spotify Party Logo" />
         </a>
         <div class="bar-title"><span style="color:#621587;">S</span><span style="color:#7517b6;">p</span><span
                 style="color:#8819e5;">o</span><span style="color:#6715e9;">t</span><span
@@ -48,10 +48,12 @@
 
     <form method="POST" class="form-signin">
         <a href="/">
-            <img class="mb-4" src="/static/images/icon.png" width="72" height="72">
+            <img class="mb-4" src="/static/images/icon.png" width="72" height="72" alt="Spotify Party Logo">
         </a>
         <h1 class="h3 mb-3 font-weight-normal">Please Log In</h1>
+        <label for="username" class="sr-only">Username</label>
         {{ form.username(class="form-control form-control-lg", placeholder="Username") }}
+        <button class="btn btn-lg btn-primary mt-2" type="submit">Log In</button>
     </form>
 </body>
 

diff --git a/templates/logout.html b/templates/logout.html
@@ -15,7 +15,7 @@
 <body class="text-center">
     <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">
         <a href="/">
-            <img class="navbar-brand" src="/static/images/icon.png" width="30" />
+            <img class="navbar-brand" src="/static/images/icon.png" width="30" alt="Spotify Party Logo" />
         </a>
         <div class="bar-title"><span style="color:#621587;">S</span><span style="color:#7517b6;">p</span><span
                 style="color:#8819e5;">o</span><span style="color:#6715e9;">t</span><span
@@ -48,10 +48,12 @@
 
     <form method="POST" class="form-signin">
         <a href="/">
-            <img class="mb-4" src="/static/images/icon.png" width="72" height="72">
+            <img class="mb-4" src="/static/images/icon.png" width="72" height="72" alt="Spotify Party Logo">
         </a>
         <h1 class="h3 mb-3 font-weight-normal">Log Out</h1>
+        <label for="username" class="sr-only">Username</label>
         {{ form.username(class="form-control form-control-lg", placeholder="Username") }}
+        <button class="btn btn-lg btn-primary mt-2" type="submit">Log Out</button>
     </form>
 </body>
 

diff --git a/templates/party.html b/templates/party.html
@@ -16,7 +16,7 @@
   <div>
     <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">
       <a href="/">
-        <img class="navbar-brand" src="/static/images/icon.png" width="30" />
+        <img class="navbar-brand" src="/static/images/icon.png" width="30" alt="Spotify Party Logo" />
       </a>
       <div class="bar-title"><span style="color:#621587;">S</span><span style="color:#7517b6;">p</span><span
           style="color:#8819e5;">o</span><span style="color:#6715e9;">t</span><span style="color:#4510ee;">i</span><span
@@ -48,13 +48,15 @@
     <h1>{{ item }}</h1>
     <div class="center">
       <form action="/toggle_playback" method="POST">
-        <button type="submit" class="btn">
-          <img class="img-fluid" src='{{ url }}'">
-          </button>
-        </form>
-        <form class=" form-signin" method="POST">
-          {{ form.hidden_tag() }} {{ form.song(class="form-control
-          form-control-lg", placeholder="Enter Song") }}
+        <button type="submit" class="btn" aria-label="Toggle Playback">
+          <img class="img-fluid" src="{{ url }}" alt="Album Artwork">
+        </button>
+      </form>
+      <form class="form-signin" method="POST">
+        {{ form.hidden_tag() }}
+        <label for="song" class="sr-only">Enter Song</label>
+        {{ form.song(class="form-control form-control-lg", placeholder="Enter Song") }}
+        <button class="btn btn-lg btn-primary mt-2" type="submit">Play Song</button>
       </form>
     </div>
   </div>

diff --git a/templates/users.html b/templates/users.html
@@ -15,7 +15,7 @@
 <body class="text-center">
     <nav class="navbar navbar-expand-md bg-light navbar-light sticky-top">
         <a href="/">
-            <img class="navbar-brand" src="/static/images/icon.png" width="30" />
+            <img class="navbar-brand" src="/static/images/icon.png" width="30" alt="Spotify Party Logo" />
         </a>
         <div class="bar-title"><span style="color:#621587;">S</span><span style="color:#7517b6;">p</span><span
                 style="color:#8819e5;">o</span><span style="color:#6715e9;">t</span><span

diff --git a/test_app.py b/test_app.py
@@ -0,0 +1,41 @@
+import unittest
+from flask_app import app, db, User
+
+class TestApp(unittest.TestCase):
+    def setUp(self):
+        app.config['TESTING'] = True
+        app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///:memory:'
+        self.app = app.test_client()
+        with app.app_context():
+            db.create_all()
+
+    def tearDown(self):
+        with app.app_context():
+            db.session.remove()
+            db.drop_all()
+
+    def test_party_page_accessibility(self):
+        response = self.app.get('/')
+        html = response.data.decode()
+        self.assertIn('alt="Spotify Party Logo"', html)
+        self.assertIn('aria-label="Toggle Playback"', html)
+        self.assertIn('alt="Album Artwork"', html)
+        self.assertIn('<label for="song" class="sr-only">Enter Song</label>', html)
+        self.assertIn('Play Song</button>', html)
+
+    def test_login_page_accessibility(self):
+        response = self.app.get('/login')
+        html = response.data.decode()
+        self.assertIn('alt="Spotify Party Logo"', html)
+        self.assertIn('<label for="username" class="sr-only">Username</label>', html)
+        self.assertIn('Log In</button>', html)
+
+    def test_logout_page_accessibility(self):
+        response = self.app.get('/logout')
+        html = response.data.decode()
+        self.assertIn('alt="Spotify Party Logo"', html)
+        self.assertIn('<label for="username" class="sr-only">Username</label>', html)
+        self.assertIn('Log Out</button>', html)
+
+if __name__ == '__main__':
+    unittest.main()