nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add titles (tooltips) to the history navigation buttons

This commit is contained in:
Jesse D. McDonald 2020-03-14 17:16:40 -05:00
parent 67daeba99e
commit 2c355ddd87
2 changed files with 29 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/chess.css
View File

@ -8,15 +8,13 @@ h1 {
margin-bottom: 0; margin-bottom: 0;
} }
button:disabled .silhouette { .media-button-svg {
fill: #c0c0c0; width: 12pt;
height: 12pt;
} }
.screen-reader { button:disabled .silhouette {
height: 1px; fill: #c0c0c0;
overflow: hidden;
position: absolute;
width: 1px;
} }
#content { #content {

54
index.html
View File

@ -161,47 +161,41 @@
</select> </select>
</div> </div>
<div id='cb_navigate'> <div id='cb_navigate'>
<button id="cb_nav_first" type="button" disabled="true"> <button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 6 24 H 24 V 120 H 6" class="silhouette"/> <path d="M 6 24 H 24 V 120 H 6"/>
<path d="M 18 72 L 90 24 V 120" class="silhouette"/> <path d="M 18 72 L 90 24 V 120"/>
<path d="M 66 72 L 138 24 V 120" class="silhouette"/> <path d="M 66 72 L 138 24 V 120"/>
</svg> </svg>
<span class="screen-reader">View Start</span>
</button> </button>
<button id="cb_nav_prev_turn" type="button" disabled="true"> <button id="cb_nav_prev_turn" title="View Prior Turn" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 12 72 L 84 24 V 120" class="silhouette"/> <path d="M 12 72 L 84 24 V 120"/>
<path d="M 60 72 L 132 24 V 120" class="silhouette"/> <path d="M 60 72 L 132 24 V 120"/>
</svg> </svg>
<span class="screen-reader">View Prior Turn</span>
</button> </button>
<button id="cb_nav_prev_state" type="button" disabled="true"> <button id="cb_nav_prev_state" title="View Prior State" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 36 72 L 108 24 V 120" class="silhouette"/> <path d="M 36 72 L 108 24 V 120"/>
</svg> </svg>
<span class="screen-reader">View Prior State</span>
</button> </button>
<button id="cb_nav_next_state" type="button" disabled="true"> <button id="cb_nav_next_state" title="View Next State" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 108 72 L 36 24 V 120" class="silhouette"/> <path d="M 108 72 L 36 24 V 120"/>
</svg> </svg>
<span class="screen-reader">View Next State</span>
</button> </button>
<button id="cb_nav_next_turn" type="button" disabled="true"> <button id="cb_nav_next_turn" title="View Next Turn" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 84 72 L 12 24 V 120" class="silhouette"/> <path d="M 84 72 L 12 24 V 120"/>
<path d="M 132 72 L 60 24 V 120" class="silhouette"/> <path d="M 132 72 L 60 24 V 120"/>
</svg> </svg>
<span class="screen-reader">View Next Turn</span>
</button> </button>
<button id="cb_nav_last" type="button" disabled="true"> <button id="cb_nav_last" title="View Current Move" type="button" disabled="true">
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0"> <svg viewBox="0 0 144 144" class="media-button-svg silhouette">
<path d="M 78 72 L 6 24 V 120" class="silhouette"/> <path d="M 78 72 L 6 24 V 120"/>
<path d="M 126 72 L 54 24 V 120" class="silhouette"/> <path d="M 126 72 L 54 24 V 120"/>
<path d="M 138 24 H 120 V 120 H 138" class="silhouette"/> <path d="M 138 24 H 120 V 120 H 138"/>
</svg> </svg>
<span class="screen-reader">View Current Move</span>
</button> </button>
</div> </div>
</form> </form>