Accessibility improvements

design/privateheader.php

@@ -144,7 +144,7 @@ if ($NotificationsManager->is_skipped(NotificationsManager::SUBSCRIPTIONS)) {
     <h1 class="hidden"><?=SITE_NAME?></h1>
     <div id="header">
       <div id="logo">
-        <a href="index.php"></a>
+        <a href="index.php" aria-label="Front page"></a>
       </div>
       <div id="menu">
         <ul>
@@ -215,56 +215,32 @@ if (isset(G::$LoggedUser['SearchType']) && G::$LoggedUser['SearchType']) { // Ad
       <div id="searchbars">
         <form class="search_form" name="torrents" action="torrents.php" method="get">
 <?  if ($UseAdvancedSearch) { ?>
-          <input type="hidden" name="action" value="advanced" />
+          <input type="hidden" name="action" value="advanced">
 <?  } ?>
-          <input id="torrentssearch" accesskey="t" spellcheck="false"
-              onfocus="if (this.value == 'Torrents') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Torrents'; }"
-              value="Torrents" placeholder="Torrents" type="text" name="<?=$UseAdvancedSearch ? 'advgroupname' : 'searchstr' ?>" size="17" />
+          <input id="torrentssearch" aria-label="Search torrents" accesskey="t" spellcheck="false" autocomplete="off" placeholder="Torrents" type="text" name="<?=$UseAdvancedSearch ? 'advgroupname' : 'searchstr' ?>" size="17">
         </form>
         <form class="search_form" name="artists" action="artist.php" method="get">
-          <input id="artistsearch"<?=Users::has_autocomplete_enabled('search');
-              ?> accesskey="a"
-              spellcheck="false" autocomplete="off"
-              onfocus="if (this.value == 'Artists') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Artists'; }"
-              value="Artists" placeholder="Artists" type="text" name="artistname" size="17" />
+          <input id="artistsearch"<?=Users::has_autocomplete_enabled('search')?> aria-label="Search artists" accesskey="a" spellcheck="false" autocomplete="off" placeholder="Artists" type="text" name="artistname" size="17">
         </form>
         <form class="search_form" name="requests" action="requests.php" method="get">
-          <input id="requestssearch" spellcheck="false"
-              onfocus="if (this.value == 'Requests') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Requests'; }"
-              value="Requests" placeholder="Requests" type="text" name="search" size="17" />
+          <input id="requestssearch" aria-label="Search requests" spellcheck="false" autocomplete="off" placeholder="Requests" type="text" name="search" size="17">
         </form>
         <form class="search_form" name="forums" action="forums.php" method="get">
-          <input value="search" type="hidden" name="action" />
-          <input id="forumssearch"
-              onfocus="if (this.value == 'Forums') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Forums'; }"
-              value="Forums" placeholder="Forums" type="text" name="search" size="17" />
+          <input value="search" type="hidden" name="action">
+          <input id="forumssearch" aria-label="Search forums" spellcheck="false" autocomplete="off" placeholder="Forums" type="text" name="search" size="17">
         </form>
 <!--
         <form class="search_form" name="wiki" action="wiki.php" method="get">
-          <input type="hidden" name="action" value="search" />
-          <input
-              onfocus="if (this.value == 'Wiki') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Wiki'; }"
-              value="Wiki" placeholder="Wiki" type="text" name="search" size="17" />
+          <input type="hidden" name="action" value="search">
+          <input value="Wiki" placeholder="Wiki" type="text" name="search" size="17">
         </form>
 -->
         <form class="search_form" name="log" action="log.php" method="get">
-          <input id="logsearch"
-              onfocus="if (this.value == 'Log') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Log'; }"
-              value="Log" placeholder="Log" type="text" name="search" size="17" />
+          <input id="logsearch" aria-label="Search log" spellcheck="false" autocomplete="off" placeholder="Log" type="text" name="search" size="17">
         </form>
         <form class="search_form" name="users" action="user.php" method="get">
-          <input type="hidden" name="action" value="search" />
-          <input
-              id="userssearch"
-              onfocus="if (this.value == 'Users') { this.value = ''; }"
-              onblur="if (this.value == '') { this.value = 'Users'; }"
-              value="Users" placeholder="Users" type="text" name="search" size="20" />
+          <input type="hidden" name="action" value="search">
+          <input id="userssearch" aria-label="Search users" spellcheck="false" autocomplete="off" placeholder="Users" type="text" name="search" size="20">
         </form>
       </div>
       <div id="userinfo">

sections/forums/main.php

@@ -56,7 +56,7 @@ foreach ($Forums as $Forum) {
         <a href="forums.php?action=viewthread&amp;threadid=<?=$LastTopicID?>" class="tooltip" data-title-plain="<?=display_str($LastTopic)?>"><?=display_str(Format::cut_string($LastTopic, 50, 1))?></a>
       </span>
 <? if (!empty($LastRead[$LastTopicID])) { ?>
-      <a class="tooltip last_read" title="Jump to last read" href="forums.php?action=viewthread&amp;threadid=<?=$LastTopicID?>&amp;page=<?=$LastRead[$LastTopicID]['Page']?>#post<?=$LastRead[$LastTopicID]['PostID']?>">
+      <a class="tooltip last_read" aria-label="Jump to last read" title="Jump to last read" href="forums.php?action=viewthread&amp;threadid=<?=$LastTopicID?>&amp;page=<?=$LastRead[$LastTopicID]['Page']?>#post<?=$LastRead[$LastTopicID]['PostID']?>">
         <svg width="15" height="11"><polygon points="0,3 0,8 8,8 8,11 15,5.5 8,0 8,3"/></svg>
       </a>
 <? } ?>

sections/torrents/browse.php

@@ -300,13 +300,13 @@ View::show_header('Browse Torrents', 'browse');
         <tr id="search_terms" class="ftr_basic<?=$HideBasic?>">
           <td class="label"><!--Search terms:--></td>
           <td class="ftb_searchstr">
-            <input type="search" spellcheck="false" size="48" name="searchstr" class="inputtext fti_basic" placeholder="Search terms" value="<?Format::form('searchstr')?>" />
+            <input type="search" spellcheck="false" size="48" name="searchstr" class="inputtext fti_basic" placeholder="Search terms" value="<?Format::form('searchstr')?>" aria-label="Terms to search">
           </td>
         </tr>
         <tr id="tagfilter">
           <td class="label"><!--<span title="Use !tag to exclude tag" class="tooltip">Tags (comma-separated):</span>--></td>
           <td class="ft_taglist">
-            <input type="search" size="37" id="tags" name="taglist" class="inputtext smaller tooltip_left" title="Use !tag to exclude tag" placeholder="Tags (comma separated)" value="<?=display_str($Search->get_terms('taglist'))?>"<? Users::has_autocomplete_enabled('other'); ?> />&nbsp;
+            <input type="search" size="37" id="tags" name="taglist" class="inputtext smaller tooltip_left" title="Use !tag to exclude tag" placeholder="Tags (comma separated)" value="<?=display_str($Search->get_terms('taglist'))?>"<? Users::has_autocomplete_enabled('other'); ?> aria-label="Tags to search">&nbsp;
             <input type="radio" name="tags_type" id="tags_type0" value="0"<?Format::selected('tags_type', 0, 'checked')?> /><label for="tags_type0"> Any</label>&nbsp;&nbsp;
             <input type="radio" name="tags_type" id="tags_type1" value="1"<?Format::selected('tags_type', 1, 'checked')?> /><label for="tags_type1"> All</label>
           </td>
@@ -314,7 +314,7 @@ View::show_header('Browse Torrents', 'browse');
         <tr id="order">
           <td class="label">Order by:</td>
           <td class="ft_order">
-            <select name="order_by" style="width: auto;" class="ft_order_by">
+            <select name="order_by" style="width: auto;" class="ft_order_by" aria-label="Property to order by">
               <option value="time"<?Format::selected('order_by', 'time')?>>Time added</option>
               <option value="year"<?Format::selected('order_by', 'year')?>>Year</option>
               <option value="size"<?Format::selected('order_by', 'size')?>>Size</option>
@@ -324,7 +324,7 @@ View::show_header('Browse Torrents', 'browse');
               <option value="cataloguenumber"<?Format::selected('order_by', 'cataloguenumber')?>>Catalogue Number</option>
               <option value="random"<?Format::selected('order_by', 'random')?>>Random</option>
             </select>
-            <select name="order_way" class="ft_order_way">
+            <select name="order_way" class="ft_order_way" aria-label="Direction to order">
               <option value="desc"<?Format::selected('order_way', 'desc')?>>Descending</option>
               <option value="asc"<?Format::selected('order_way', 'asc')?>>Ascending</option>
             </select>
@@ -463,17 +463,17 @@ View::show_header('Browse Torrents', 'browse');
       <td><a href="<?=header_link('time')?>">Time</a></td>
       <td><a href="<?=header_link('size')?>">Size</a></td>
       <td class="sign snatches">
-        <a href="<?=header_link('snatched')?>">
+        <a href="<?=header_link('snatched')?>" aria-label="Sort by snatches">
           <svg width="15" height="15" fill="white" class="tooltip" alt="Snatches" title="Snatches" viewBox="3 0 88 98"><path d="M20 20 A43 43,0,1,0,77 23 L90 10 L55 10 L55 45 L68 32 A30.27 30.27,0,1,1,28 29"></path></svg>
         </a>
       </td>
       <td class="sign seeders">
-        <a href="<?=header_link('seeders')?>">
+        <a href="<?=header_link('seeders')?>" aria-label="Sort by seeders">
           <svg width="11" height="15" fill="white" class="tooltip" alt="Seeders" title="Seeders"><polygon points="0,7 5.5,0 11,7 8,7 8,15 3,15 3,7"></polygon></svg>
         </a>
       </td>
       <td class="sign leechers">
-        <a href="<?=header_link('leechers')?>">
+        <a href="<?=header_link('leechers')?>" aria-label="Sort by leechers">
           <svg width="11" height="15" fill="white" class="tooltip" alt="Leechers" title="Leechers"><polygon points="0,8 5.5,15 11,8 8,8 8,0 3,0 3,8"></polygon></svg>
         </a>
       </td>

static/functions/validate_upload.js

@@ -26,4 +26,5 @@ $(() => {
       soft_error('You did not include a cover image, which is mandatory if one exists')
     }
   })
+  $('#tags').on('blur', e => $('#tags').raw().value = $('#tags').raw().value.split(',').map(t=>t.trim()).filter(t=>t).join(', '))
 })

static/styles/global.css

@@ -823,14 +823,12 @@ div.torrent_artists {
 /* Ratio Colors */
 .r00           { color: #FF0000; }
 .r01,.r02      { color: #FF1300; }
-.r03           { color: #FF2600; }
-.r04           { color: #FF4C00; }
-.r05,.r06      { color: #FF5E00; }
-.r07           { color: #FF7100; }
-.r08           { color: #FF9700; }
-.r09           { color: #FFAA00; }
-.r10           { color: #74C42E; }
-.r20,.r50,.r99 { color: #418B00; }
+.r03           { color: #b70000; }
+.r04           { color: #a20000; }
+.r05,.r06      { color: #8e0000; }
+.r07           { color: #983100; }
+.r08           { color: #8c4802; }
+.r09           { color: #7b5200; }
 
 #coverCont.left {
   left: 20px;

static/styles/oppai/style.css

@@ -563,7 +563,7 @@ td, th {
 .colhead {
   background: #E197E5;
   font-weight: bold;
-  color: #ffffff;
+  color: #000;
 }
 
 td.colhead, .colhead td, .colhead th {