Skip to content

Commit

Permalink
Multi-Thumb Slider Example: Remove title attribute (pull #543)
Browse files Browse the repository at this point in the history 
Per discussion in issue #520, remove the title attribute from the slider thumbs.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Nov 28, 2017
1 parent a6dd28d commit 1312252
Showing 1 changed file with 40 additions and 40 deletions.
80 changes: 40 additions & 40 deletions examples/slider/multithumb-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,26 +49,26 @@ <h3>Hotel Price Range</h3>
<div class="rail-label min">
0
</div>
<div class="rail" style="width: 300px;" title="Select a hotel price range between $0 and $400">
<div class="rail" style="width: 300px;">
<img id="minPriceHotel"
src="images/min-arrow.png"
role="slider"
tabindex="0"
class="min thumb"
aria-valuemin="0"
aria-valuenow="100"
src="images/min-arrow.png"
role="slider"
tabindex="0"
class="min thumb"
aria-valuemin="0"
aria-valuenow="100"
aria-valuetext="$100"
aria-valuemax="400"
aria-valuemax="400"
aria-label="Hotel Minimum Price"/>
<img id="maxPriceHotel"
src="images/max-arrow.png"
role="slider"
tabindex="0"
class="max thumb"
aria-valuemin="0"
aria-valuenow="250"
src="images/max-arrow.png"
role="slider"
tabindex="0"
class="max thumb"
aria-valuemin="0"
aria-valuenow="250"
aria-valuetext="$250"
aria-valuemax="400"
aria-valuemax="400"
aria-label="Hotel Maximum Price"/>
</div>
<div class="rail-label max">
Expand All @@ -80,24 +80,24 @@ <h3>Flight Price Range</h3>
<div class="rail-label min">
0
</div>
<div class="rail" style="width: 300px;" title="Select a flight price range between $0 and $1000">
<img src="images/min-arrow.png"
role="slider" tabindex="0"
class="min thumb"
aria-valuemin="0"
aria-valuenow="100"
<div class="rail" style="width: 300px;">
<img src="images/min-arrow.png"
role="slider" tabindex="0"
class="min thumb"
aria-valuemin="0"
aria-valuenow="100"
aria-valuetext="$100"
aria-valuemax="250"
aria-valuemax="250"
aria-label="Flight Minimum Price">
<img src="images/max-arrow.png"
role="slider"
tabindex="0"
class="max thumb"
aria-valuemin="0"
aria-valuenow="250"
<img src="images/max-arrow.png"
role="slider"
tabindex="0"
class="max thumb"
aria-valuemin="0"
aria-valuenow="250"
aria-valuetext="$250"
aria-valuemax="1000"
aria-label="Flight Maximum Price">
aria-valuemax="1000"
aria-label="Flight Maximum Price">
</div>
<div class="rail-label max">
0
Expand Down Expand Up @@ -171,12 +171,12 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
</th>
<td></td>
<td>
<code>div</code>
<code>img</code>
</td>
<td>
<ul>
<li>Identifies the element as a slider.</li>
<li>Set on the the movable thumb because it is the operable element that receives focus and represents the slider value.</li>
<li>Identifies the <code>img</code> element as a slider.</li>
<li>Set on the movable thumb because it is the operable element that receives focus and represents the slider value.</li>
</ul>
</td>
</tr>
Expand All @@ -186,7 +186,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>tabindex=<q>0</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>Includes the slider thumb in the page tab sequence.</td>
</tr>
Expand All @@ -196,7 +196,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-valuemax=<q>NUMBER</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>Specifies the maximum value of the slider.</td>
</tr>
Expand All @@ -206,7 +206,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-valuemin=<q>NUMBER</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>Specifies the minimum value of the slider.</td>
</tr>
Expand All @@ -216,7 +216,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-valuenow=<q>NUMBER</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>Indicates the current value of the slider.</td>
</tr>
Expand All @@ -226,7 +226,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-valuetext=<q>DOLLAR AMOUNT</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>Indicates the current value of the slider in dollars using the <q>$</q> character as a prefix.</td>
</tr>
Expand All @@ -236,14 +236,14 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<code>aria-label=<q>text</q></code>
</th>
<td>
<code>div</code>
<code>img</code>
</td>
<td>A label identifying the purpose of the slider, e.g., <q>Hotel Minimum Price</q>.</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
Expand Down

0 comments on commit 1312252

Please sign in to comment.