From e6d32946c1dfde50fb84287fcf1418119aea099b Mon Sep 17 00:00:00 2001
From: nkanaev <nkanaev@live.com>
Date: Tue, 4 Mar 2025 16:51:30 +0000
Subject: [PATCH] add aria-pressed tag for the corresponding UI elements

---
 src/assets/index.html | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/assets/index.html b/src/assets/index.html
index 4dfe9cd..59f3776 100644
--- a/src/assets/index.html
+++ b/src/assets/index.html
@@ -25,18 +25,21 @@
                 <div class="flex-grow-1"></div>
                 <button class="toolbar-item"
                         :class="{active: filterSelected == 'unread'}"
+                        :aria-pressed="filterSelected == 'unread'"
                         title="Unread"
                         @click="filterSelected = 'unread'">
                     <span class="icon">{% inline "circle-full.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
                         :class="{active: filterSelected == 'starred'}"
+                        :aria-pressed="filterSelected == 'starred'"
                         title="Starred"
                         @click="filterSelected = 'starred'">
                     <span class="icon">{% inline "star-full.svg" %}</span>
                 </button>
                 <button class="toolbar-item"
                         :class="{active: filterSelected == ''}"
+                        :aria-pressed="filterSelected == ''"
                         title="All"
                         @click="filterSelected = ''">
                     <span class="icon">{% inline "assorted.svg" %}</span>
@@ -63,8 +66,9 @@
                     <div class="row text-center m-0">
                         <button class="btn btn-link col-4 px-0 rounded-0"
                                 :class="'theme-'+t"
-                                @click.stop="theme.name = t"
                                 :aria-label="t"
+                                :aria-pressed="theme.name == t"
+                                @click.stop="theme.name = t"
                                 v-for="t in ['light', 'sepia', 'night']">
                             <span class="icon" v-if="theme.name == t">{% inline "check.svg" %}</span>
                         </button>
@@ -74,20 +78,20 @@
 
                     <header class="dropdown-header" role="heading" aria-level="2">Auto Refresh</header>
                     <div class="row text-center m-0">
-                        <button class="dropdown-item col-4 px-0" :class="{active: !refreshRate}" @click.stop="refreshRate = 0">0</button>
-                        <button class="dropdown-item col-4 px-0" :class="{active: refreshRate == 10}" @click.stop="refreshRate = 10">10m</button>
-                        <button class="dropdown-item col-4 px-0" :class="{active: refreshRate == 30}" @click.stop="refreshRate = 30">30m</button>
-                        <button class="dropdown-item col-4 px-0" :class="{active: refreshRate == 60}" @click.stop="refreshRate = 60">1h</button>
-                        <button class="dropdown-item col-4 px-0" :class="{active: refreshRate == 120}" @click.stop="refreshRate = 120">2h</button>
-                        <button class="dropdown-item col-4 px-0" :class="{active: refreshRate == 240}" @click.stop="refreshRate = 240">4h</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="!refreshRate"       :class="{active: !refreshRate}"       @click.stop="refreshRate = 0">0</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 10"  :class="{active: refreshRate == 10}"  @click.stop="refreshRate = 10">10m</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 30"  :class="{active: refreshRate == 30}"  @click.stop="refreshRate = 30">30m</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 60"  :class="{active: refreshRate == 60}"  @click.stop="refreshRate = 60">1h</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 120" :class="{active: refreshRate == 120}" @click.stop="refreshRate = 120">2h</button>
+                        <button class="dropdown-item col-4 px-0" :aria-pressed="refreshRate == 240" :class="{active: refreshRate == 240}" @click.stop="refreshRate = 240">4h</button>
                     </div>
 
                     <div class="dropdown-divider"></div>
 
                     <header class="dropdown-header" role="heading" aria-level="2">Show first</header>
                     <div class="d-flex text-center">
-                        <button class="dropdown-item px-0" :class="{active: itemSortNewestFirst}" @click.stop="itemSortNewestFirst=true">New</button>
-                        <button class="dropdown-item px-0" :class="{active: !itemSortNewestFirst}" @click.stop="itemSortNewestFirst=false">Old</button>
+                        <button class="dropdown-item px-0" :aria-pressed="itemSortNewestFirst"  :class="{active: itemSortNewestFirst}"  @click.stop="itemSortNewestFirst=true">New</button>
+                        <button class="dropdown-item px-0" :aria-pressed="!itemSortNewestFirst" :class="{active: !itemSortNewestFirst}" @click.stop="itemSortNewestFirst=false">Old</button>
                     </div>
                     <div class="dropdown-divider"></div>
                     <header class="dropdown-header" role="heading" aria-level="2">Subscriptions</header>