♿ announce disabled icons

static/js/comic-nav.js

@@ -188,9 +188,11 @@
         if (currentNumber > 1) {
             firstBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             firstBtn.onclick = (e) => { e.preventDefault(); loadComic(1); };
+            firstBtn.removeAttribute('aria-disabled');
         } else {
             firstBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             firstBtn.onclick = null;
+            firstBtn.setAttribute('aria-disabled', 'true');
         }
 
         // Previous button
@@ -198,9 +200,11 @@
         if (currentNumber > 1) {
             prevBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             prevBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber - 1); };
+            prevBtn.removeAttribute('aria-disabled');
         } else {
             prevBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             prevBtn.onclick = null;
+            prevBtn.setAttribute('aria-disabled', 'true');
         }
 
         // Comic date display
@@ -213,9 +217,11 @@
         if (currentNumber < totalComics) {
             nextBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             nextBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber + 1); };
+            nextBtn.removeAttribute('aria-disabled');
         } else {
             nextBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             nextBtn.onclick = null;
+            nextBtn.setAttribute('aria-disabled', 'true');
         }
 
         // Latest button
@@ -223,9 +229,11 @@
         if (currentNumber < totalComics) {
             latestBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
             latestBtn.onclick = (e) => { e.preventDefault(); loadComic(totalComics); };
+            latestBtn.removeAttribute('aria-disabled');
         } else {
             latestBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
             latestBtn.onclick = null;
+            latestBtn.setAttribute('aria-disabled', 'true');
         }
     }
 

templates/comic.html

@@ -57,10 +57,10 @@
                         <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
                     </a>
                 {% else %}
-                    <span class="btn-icon-nav btn-icon-disabled" aria-label="First">
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="First" aria-disabled="true">
                         <img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
                     </span>
-                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Previous">
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Previous" aria-disabled="true">
                         <img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
                     </span>
                 {% endif %}
@@ -75,10 +75,10 @@
                         <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
                     </a>
                 {% else %}
-                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Next" aria-disabled="true">
                         <img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
                     </span>
-                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Latest">
+                    <span class="btn-icon-nav btn-icon-disabled" aria-label="Latest" aria-disabled="true">
                         <img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
                     </span>
                 {% endif %}
@@ -88,8 +88,8 @@
                     <a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
                     <a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
                 {% else %}
-                    <span class="btn btn-nav btn-disabled">First</span>
+                    <span class="btn btn-nav btn-disabled" aria-disabled="true">First</span>
-                    <span class="btn btn-nav btn-disabled">Previous</span>
+                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Previous</span>
                 {% endif %}
 
                 <span class="comic-date-display">{{ comic.formatted_date }}</span>
@@ -98,8 +98,8 @@
                     <a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn btn-nav">Next</a>
                     <a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn btn-nav">Latest</a>
                 {% else %}
-                    <span class="btn btn-nav btn-disabled">Next</span>
+                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Next</span>
-                    <span class="btn btn-nav btn-disabled">Latest</span>
+                    <span class="btn btn-nav btn-disabled" aria-disabled="true">Latest</span>
                 {% endif %}
             {% endif %}
         </div>