Add icon titles for accessibility.

Make clear the icons purpose with a `title` tooltip.
This commit is contained in:
delucac 2016-08-02 14:50:53 -04:00
parent 66b41e2422
commit e95b5a7904
5 changed files with 18 additions and 18 deletions

View File

@ -1,16 +1,16 @@
{{ define "actions" }}
<div class="action" id="open">
<i class="material-icons">open_in_new</i> <span>See raw</span>
<i class="material-icons" title="See raw">open_in_new</i> <span>See raw</span>
</div>
{{ if .IsDir }}
<div class="action" id="rename">
<i class="material-icons">mode_edit</i>
<i class="material-icons" title="Edit">mode_edit</i>
</div>
{{ end }}
<div class="action" id="download">
<i class="material-icons">file_download</i> <span>Download</span>
<i class="material-icons" title="Download">file_download</i> <span>Download</span>
</div>
<div class="action" id="delete">
<i class="material-icons">delete</i> <span>Delete</span>
<i class="material-icons" title="Delete">delete</i> <span>Delete</span>
</div>
{{ end }}

View File

@ -21,14 +21,14 @@
<a href="{{ $lnk }}">
{{ end }}
<div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
<i class="material-icons">subdirectory_arrow_left</i>
<i class="material-icons" title="Previous">subdirectory_arrow_left</i>
</div>
{{ if ne $lnk ""}}
</a>
{{ end }}
<div class="action" id="open-nav">
<i class="material-icons">menu</i>
<i class="material-icons" title="Menu">menu</i>
</div>
<p>
@ -48,7 +48,7 @@
<a href="{{ $lnk }}">
{{ end }}
<div class="action{{ if eq $lnk ""}} disabled{{ end }}" id="prev">
<i class="material-icons">subdirectory_arrow_left</i>
<i class="material-icons" title="Previous">subdirectory_arrow_left</i>
</div>
{{ if ne $lnk ""}}
</a>
@ -64,23 +64,23 @@
{{ if .IsDir}}
<div id="search">
<i class="material-icons">storage</i>
<i class="material-icons" title="Storage">storage</i>
<input type="text" placeholder="Execute a command...">
<div>Write your git, mercurial or svn command and press enter.</div>
</div>
<div class="action" id="view">
<i class="material-icons">view_headline</i> <span>Switch view</span>
<i class="material-icons" title="Switch view">view_headline</i> <span>Switch view</span>
</div>
<div class="action" id="upload">
<i class="material-icons">file_upload</i> <span>Upload</span>
<i class="material-icons" title="Upload">file_upload</i> <span>Upload</span>
</div>
{{ else }}
{{ template "actions" . }}
{{ end }}
<div class="action" id="logout">
<i class="material-icons">exit_to_app</i> <span>Logout</span>
<i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>
</div>
</div>
<div id="overlay"></div>
@ -90,7 +90,7 @@
<div id="toolbar">
<div>
<div class="action" id="back">
<i class="material-icons">arrow_back</i>
<i class="material-icons" title="Back">arrow_back</i>
</div>
<p>
<span id="selected-number">0</span>

View File

@ -22,7 +22,7 @@
<div>
<button id="submit" type="submit" data-type="{{ .Class }}">
<span>
<i class="material-icons">save</i>
<i class="material-icons" title="Save">save</i>
</span>
<span>save</span>
</button>

View File

@ -7,7 +7,7 @@
<div id="{{ $value.Name }}-{{ $key }}" data-type="array-item">
{{ template "value" $value }}
<div class="action delete" data-delete="{{ $value.Name }}-{{ $key }}">
<i class="material-icons">close</i>
<i class="material-icons" title="Close">close</i>
</div>
</div>
{{ else }}
@ -15,7 +15,7 @@
<label for="{{ $value.Name }}">{{ $value.Title }}</label>
{{ template "value" $value }}
<div class="action delete" data-delete="block-{{ $value.Name }}">
<i class="material-icons">close</i>
<i class="material-icons" title="Close">close</i>
</div>
</div>
{{ end }}
@ -50,10 +50,10 @@
<h3>{{ .Title }}</h3>
{{ end }}
<div class="action add">
<i class="material-icons">add</i>
<i class="material-icons" title="Add">add</i>
</div>
<div class="action delete" data-delete="{{ .Name }}">
<i class="material-icons">close</i>
<i class="material-icons" title="Close">close</i>
</div>
{{ template "blocks" .Content }}
</fieldset>

View File

@ -36,7 +36,7 @@
<div class="floating">
<div class="action" id="new">
<i class="material-icons">add</i>
<i class="material-icons" title="New">add</i>
</div>
</div>
{{ end }}