mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♿ live region

Browse Source
This commit is contained in:
mi
2025-11-14 18:42:59 +10:00
parent 7e41401ca3
commit f31383800e
4 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
templates/index.html
View File

@@ -7,6 +7,9 @@
{% endif %}
{% block content %}
<!-- ARIA live region for screen reader announcements -->
<div aria-live="polite" aria-atomic="true" class="sr-only" id="comic-announcer"></div>
<div class="comic-container" data-comic-number="{{ comic.number }}" data-total-comics="{{ total_comics }}">
<div class="comic-header">
<h1>{{ comic.title if comic.title else '#' ~ comic.number }}</h1>
@@ -34,17 +37,17 @@
{# Icon-based navigation #}
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="">
</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="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">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="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 %}
@@ -52,17 +55,17 @@
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="">
</a>
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="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">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="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 %}
{% else %}
@@ -71,8 +74,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">Previous</span>
<span class="btn btn-nav btn-disabled" aria-disabled="true">First</span>
<span class="btn btn-nav btn-disabled" aria-disabled="true">Previous</span>
{% endif %}
<span class="comic-date-display">{{ comic.formatted_date }}</span>
@@ -81,8 +84,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">Latest</span>
<span class="btn btn-nav btn-disabled" aria-disabled="true">Next</span>
<span class="btn btn-nav btn-disabled" aria-disabled="true">Latest</span>
{% endif %}
{% endif %}
</div>