Various a11y fixes

public/css/style.css

@@ -20,10 +20,6 @@ input {
     padding:6px;
 }
 
-body * {
-	outline:0;
-}
-
 #mainui {
     height: 100%;
 }
@@ -45,12 +41,16 @@ body * {
     padding:10px;
 }
 
-#message a {
+#message button {
     font-size:0.9em;
     text-align:center;
     border-radius:2px;
     cursor:pointer;
     background:#cccccc;
+    border: 0;
+    color: currentColor;
+    padding: 0;
+    font: lighter 18px/27px 'Open Sans', Arial, sans-serif;
 }
 
 #message.error {
@@ -547,9 +547,12 @@ body * {
             display: block;
             margin: 0 10px 5px 0;
         }
+
+    .entry[aria-expanded="false"] .entry-content, .entry[aria-expanded="false"] .entry-toolbar {
+        display: none;
+    }
 
     .entry-content {
-        display:none;
         -moz-column-count: 3;
         -moz-column-gap: 2em;
         -moz-column-rule: 1px solid rgba(204, 204, 204, 0.4);
@@ -566,7 +569,7 @@ body * {
         padding: 0 1em;
         overflow-wrap: break-word;
     }
-    
+
         .entry-content a {
             color:#3d6d69;
         }
@@ -667,7 +670,6 @@ body * {
     }
 
     .entry-toolbar {
-        display:none;
         margin:-5px;
         padding:5px;
         padding-bottom:10px;
@@ -693,11 +695,6 @@ body * {
             vertical-align: middle;
         }
 
-        .entry-smartphone-share button:focus,
-        .entry-toolbar button:focus {
-            outline: 1px dotted #aaa;
-        }
-
         .entry-toolbar .entry-starr {
             background-image:url(images/unstarred.png);
         }
@@ -755,7 +752,12 @@ body * {
         font-weight:bold;
         cursor:pointer;
         text-align:center;
-        display: none;
+        display: block;
+        border: none;
+        padding: 0;
+        background: transparent;
+        color: black;
+        width: 100%;
     }
 
         .touch .stream-more {
@@ -1261,6 +1263,10 @@ body.authenabled.loggedin #nav-logout {
             background:url(images/nav-mobile-settings.png) no-repeat center;
             background-size:29px 29px;
             padding:11px 21px 11px 15px;
+            display: block;
+            box-sizing: content-box;
+            border: 0;
+            background-position: 15px 11px;
         }
 
     #nav {

public/js/selfoss-events-entries.js

@@ -85,18 +85,17 @@ selfoss.events.entries = function() {
             var entryContent = parent.find('.entry-content');
 
             // show/hide (with toolbar)
-            if (entryContent.is(':visible')) {
-                parent.find('.entry-toolbar').hide();
-                entryContent.hide();
+            if (parent.attr('aria-expanded') === 'true') {
+                parent.attr('aria-expanded', 'false');
                 selfoss.events.setHash();
             } else {
+                parent.attr('aria-expanded', 'true');
                 if ($('#config').data('auto_collapse') == '1') {
-                    $('.entry-content, .entry-toolbar').hide();
+                    $('.entry[aria-expanded="true"]').attr('aria-expanded', 'false');
                 }
-                entryContent.show();
+                parent.attr('aria-expanded', 'true');
                 selfoss.events.setHash('same', 'same', entryId);
                 selfoss.events.entriesToolbar(parent);
-                parent.find('.entry-toolbar').show();
 
                 // automark as read
                 if (autoMarkAsRead) {

public/js/selfoss-shortcuts.js

@@ -12,7 +12,7 @@ selfoss.shortcuts = {
             }
 
             var selected = $('.entry.selected');
-            if (selected.length > 0 && selected.find('.entry-content').is(':visible') == false) {
+            if (selected.length > 0 && selected.is('[aria-expanded="true"]') == false) {
                 selected.find('.entry-title').click();
             } else {
                 selfoss.shortcuts.nextprev('next', true);
@@ -140,7 +140,7 @@ selfoss.shortcuts = {
             }
 
             e.preventDefault();
-            $('.entry-content, .entry-toolbar').hide();
+            $('.entry[aria-expanded="true"]').attr('aria-expanded', 'false');
         });
 
         // 'v': open target
@@ -290,8 +290,7 @@ selfoss.shortcuts = {
 
         // remove active
         old.removeClass('selected');
-        old.find('.entry-content').hide();
-        old.find('.entry-toolbar').hide();
+        old.attr('aria-expanded', 'false');
 
         if (current.length == 0) {
             return;
@@ -353,7 +352,7 @@ selfoss.shortcuts = {
             direction = 'next';
         }
 
-        var content = $('.entry-content').is(':visible');
+        var content = $('.entry').is('[aria-expanded="true"]');
         selfoss.shortcuts.nextprev(direction, content);
     },
 

public/js/selfoss-ui.js

@@ -318,14 +318,14 @@ selfoss.ui = {
         }
 
         if (actionText && action) {
-            message = message + '. <a>' + actionText + '</a>';
+            message = message + '. <button type="button">' + actionText + '</button>';
         }
 
         var messageContainer = $('#message');
         messageContainer.html(message);
 
         if (action) {
-            messageContainer.find('a').unbind('click').click(action);
+            messageContainer.find('button').unbind('click').click(action);
         }
 
         if (error) {

public/lang/cs.json

@@ -18,6 +18,7 @@
   "lang_load_img": "Zobrazit obrázky",
   "lang_open_window": "Otevřít",
   "lang_next": "Další",
+  "lang_search_label": "Vyhledávaný text",
   "lang_searchbutton": "Hledat",
   "lang_searchremove": "Skrýt hledání",
   "lang_refreshbutton": "Obnovit zdroje",

public/lang/en.json

@@ -20,6 +20,7 @@
   "lang_load_img": "Show images",
   "lang_open_window": "Open",
   "lang_next": "Next",
+  "lang_search_label": "Search term",
   "lang_searchbutton": "Search",
   "lang_searchremove": "Hide search",
   "lang_refreshbutton": "Refresh sources",

templates/home.phtml

@@ -132,7 +132,7 @@
                     <span class="count"></span>
                 </div>
             </div>
-            <div id="nav-mobile-settings"></div>
+            <button id="nav-mobile-settings" aria-label="<?= trim(\F3::get('lang_settingsbutton')); ?>"></button>
         </div>
 
         <!-- navigation -->
@@ -145,10 +145,10 @@
             <ul id="nav-filter">
                 <li id="nav-filter-newest" class="nav-filter-newest" role="link" tabindex="0"><?= \F3::get('lang_newest')?> <span class="offline-count offlineable" title="<?= \F3::get('lang_offline_count')?>"></span><span class="count" title="<?= \F3::get('lang_online_count')?>"></span></li>
                 <li id="nav-filter-unread" class="nav-filter-unread" role="link" tabindex="0"><?= \F3::get('lang_unread')?>
-                    <div class="unread-count offlineable">
+                    <span class="unread-count offlineable">
                         <span class="offline-count offlineable" title="<?= \F3::get('lang_offline_count')?>"></span>
                         <span class="count" title="<?= \F3::get('lang_online_count')?>"></span>
-                    </div>
+                    </span>
                 </li>
                 <li id="nav-filter-starred" class="nav-filter-starred" role="link" tabindex="0"><?= \F3::get('lang_starred') ?> <span class="offline-count offlineable" title="<?= \F3::get('lang_offline_count')?>"></span><span class="count" title="<?= \F3::get('lang_online_count')?>"></span></li>
             </ul>
@@ -170,7 +170,7 @@
 
             <!-- navigation search input just for smartphone version -->
             <div id="nav-search" class="offlineable" role="search">
-                <input type="search" id="nav-search-term"> <input type="button" id="nav-search-button" value="<?= \F3::get('lang_searchbutton')?>">
+                <input aria-label="<?= \F3::get('lang_search_label') ?>" type="search" id="nav-search-term"> <input type="button" id="nav-search-button" value="<?= \F3::get('lang_searchbutton')?>">
                 <hr>
             </div>
 
@@ -187,7 +187,7 @@
 
         <!-- search -->
         <div id="search" role="search" class="offlineable">
-            <input type="search" id="search-term">
+            <input aria-label="<?= \F3::get('lang_search_label') ?>" type="search" id="search-term">
             <button id="search-remove" title="<?= \F3::get('lang_searchremove')?>"><img src="images/remove.png" alt=""></button>
             <button id="search-button" title="<?= \F3::get('lang_searchbutton')?>"><img src="images/search.png" alt=""></button>
         </div>
@@ -200,10 +200,10 @@
         </div>
 
         <div id="stream-buttons">
-            <div class="stream-empty"><?= trim(\F3::get('lang_no_entries')); ?></div>
-            <div class="stream-button stream-more"><span><?= trim(\F3::get('lang_more')); ?></span></div>
-            <div class="stream-button mark-these-read"><span><?= trim(\F3::get('lang_markread')); ?></span></div>
-            <div class="stream-button stream-error"><?= trim(\F3::get('lang_streamerror')); ?></div>
+            <p class="stream-empty"><?= trim(\F3::get('lang_no_entries')); ?></p>
+            <button class="stream-button stream-more"><span><?= trim(\F3::get('lang_more')); ?></span></button>
+            <button class="stream-button mark-these-read"><span><?= trim(\F3::get('lang_markread')); ?></span></button>
+            <button class="stream-button stream-error"><?= trim(\F3::get('lang_streamerror')); ?></button>
         </div>
 
         <!-- fullscreen popup -->

templates/item.phtml

@@ -22,10 +22,10 @@
      data-entry-id="<?= $this->item['id']; ?>"
      data-entry-source="<?= $this->item['source']; ?>"
      data-entry-datetime="<?= $this->viewHelper->date_iso8601($this->item['datetime']); ?>"
-     class="entry <?= $this->item['unread'] == 1 ? 'unread' : ''; ?>" role="article">
+     class="entry <?= $this->item['unread'] == 1 ? 'unread' : ''; ?>" role="article" aria-expanded="false">
 
     <!-- icon -->
-    <a href="<?= \helpers\Anonymizer::anonymize($this->item['link']); ?>" class="entry-icon" tabindex="-1" rel="noopener noreferrer">
+    <a href="<?= \helpers\Anonymizer::anonymize($this->item['link']); ?>" class="entry-icon" tabindex="-1" rel="noopener noreferrer" aria-hidden="true">
         <?php if (strlen(trim($this->item['icon'])) > 0 && $this->item['icon'] != '0') : ?>
         <img src="<?= 'favicons/' . $this->item['icon']; ?>" alt="" >
         <?php endif; ?>

templates/tag.phtml

@@ -3,5 +3,5 @@
     <span class="unread"><?php if ($this->unread > 0) {
     echo $this->unread;
 } ?></span>
-    <div class="color" style="background-color:<?= $this->color; ?>"></div>
+    <span class="color" style="background-color:<?= $this->color; ?>"></span>
 </li>