From 2c355ddd87ee3c23afbcb43b22d073b189559be9 Mon Sep 17 00:00:00 2001
From: Jesse McDonald <nybble41@gmail.com>
Date: Sat, 14 Mar 2020 17:16:40 -0500
Subject: [PATCH] add titles (tooltips) to the history navigation buttons

---
 css/chess.css | 12 +++++-------
 index.html    | 54 +++++++++++++++++++++++----------------------------
 2 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/css/chess.css b/css/chess.css
index 546cc86..9ebcff4 100644
--- a/css/chess.css
+++ b/css/chess.css
@@ -8,15 +8,13 @@ h1 {
 	 margin-bottom: 0;
 }
 
-button:disabled .silhouette {
-	 fill: #c0c0c0;
+.media-button-svg {
+	 width: 12pt;
+	 height: 12pt;
 }
 
-.screen-reader {
-	 height: 1px;
-	 overflow: hidden;
-	 position: absolute;
-	 width: 1px;
+button:disabled .silhouette {
+	 fill: #c0c0c0;
 }
 
 #content {
diff --git a/index.html b/index.html
index a4dde41..8c92946 100644
--- a/index.html
+++ b/index.html
@@ -161,47 +161,41 @@
                   </select>
                </div>
                <div id='cb_navigate'>
-                  <button id="cb_nav_first" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 6 24 H 24 V 120 H 6" class="silhouette"/>
-                        <path d="M 18 72 L 90 24 V 120" class="silhouette"/>
-                        <path d="M 66 72 L 138 24 V 120" class="silhouette"/>
+                  <button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 6 24 H 24 V 120 H 6"/>
+                        <path d="M 18 72 L 90 24 V 120"/>
+                        <path d="M 66 72 L 138 24 V 120"/>
                      </svg>
-                     <span class="screen-reader">View Start</span>
                   </button>
-                  <button id="cb_nav_prev_turn" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 12 72 L 84 24 V 120" class="silhouette"/>
-                        <path d="M 60 72 L 132 24 V 120" class="silhouette"/>
+                  <button id="cb_nav_prev_turn" title="View Prior Turn" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 12 72 L 84 24 V 120"/>
+                        <path d="M 60 72 L 132 24 V 120"/>
                      </svg>
-                     <span class="screen-reader">View Prior Turn</span>
                   </button>
-                  <button id="cb_nav_prev_state" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 36 72 L 108 24 V 120" class="silhouette"/>
+                  <button id="cb_nav_prev_state" title="View Prior State" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 36 72 L 108 24 V 120"/>
                      </svg>
-                     <span class="screen-reader">View Prior State</span>
                   </button>
-                  <button id="cb_nav_next_state" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 108 72 L 36 24 V 120" class="silhouette"/>
+                  <button id="cb_nav_next_state" title="View Next State" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 108 72 L 36 24 V 120"/>
                      </svg>
-                     <span class="screen-reader">View Next State</span>
                   </button>
-                  <button id="cb_nav_next_turn" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 84 72 L 12 24 V 120" class="silhouette"/>
-                        <path d="M 132 72 L 60 24 V 120" class="silhouette"/>
+                  <button id="cb_nav_next_turn" title="View Next Turn" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 84 72 L 12 24 V 120"/>
+                        <path d="M 132 72 L 60 24 V 120"/>
                      </svg>
-                     <span class="screen-reader">View Next Turn</span>
                   </button>
-                  <button id="cb_nav_last" type="button" disabled="true">
-                     <svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
-                        <path d="M 78 72 L 6 24 V 120" class="silhouette"/>
-                        <path d="M 126 72 L 54 24 V 120" class="silhouette"/>
-                        <path d="M 138 24 H 120 V 120 H 138" class="silhouette"/>
+                  <button id="cb_nav_last" title="View Current Move" type="button" disabled="true">
+                     <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
+                        <path d="M 78 72 L 6 24 V 120"/>
+                        <path d="M 126 72 L 54 24 V 120"/>
+                        <path d="M 138 24 H 120 V 120 H 138"/>
                      </svg>
-                     <span class="screen-reader">View Current Move</span>
                   </button>
                </div>
             </form>