Skip to content

Commit

Permalink
All Examples: Add button type to non-submit buttons (pull #1202)
Browse files Browse the repository at this point in the history
  • Loading branch information
@smhigley @ZoeBijl
smhigley authored and ZoeBijl committed Oct 7, 2019
1 parent 7461a10 commit 545d852
Show file tree
Hide file tree
Showing 34 changed files with 138 additions and 137 deletions.
6 changes: 3 additions & 3 deletions examples/accordion/accordion.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h2 id="ex_label">Example</h2>
-->
<div id="accordionGroup" class="Accordion">
<h3>
<button aria-expanded="true" class="Accordion-trigger"
<button type="button" aria-expanded="true" class="Accordion-trigger"
aria-controls="sect1" id="accordion1id">
<span class="Accordion-title">
Personal Information
Expand Down Expand Up @@ -98,7 +98,7 @@ <h3>
</div>
</div>
<h3>
<button aria-expanded="false" class="Accordion-trigger"
<button type="button" aria-expanded="false" class="Accordion-trigger"
aria-controls="sect2" id="accordion2id">
<span class="Accordion-title">
Billing Address
Expand Down Expand Up @@ -133,7 +133,7 @@ <h3>
</div>
</div>
<h3>
<button aria-expanded="false" class="Accordion-trigger"
<button type="button" aria-expanded="false" class="Accordion-trigger"
aria-controls="sect3" id="accordion3id">
<span class="Accordion-title">
Shipping Address
Expand Down
2 changes: 1 addition & 1 deletion examples/alert/alert.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ <h2 id="ex_label">Example</h2>
</p>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<button id="alert-trigger">Trigger Alert</button>
<button type="button" id="alert-trigger">Trigger Alert</button>

<div id="example" role="alert"></div>

Expand Down
6 changes: 3 additions & 3 deletions examples/carousel/carousel-1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ <h2 id="ex_label">Example</h2>

<div class="controls">

<button class="rotation pause"
<button type="button" class="rotation pause"
aria-label="Stop automatic slide show">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"/>
Expand All @@ -80,7 +80,7 @@ <h2 id="ex_label">Example</h2>
</button>


<button class="previous"
<button type="button" class="previous"
aria-controls="myCarousel-items"
aria-label="Previous Slide">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
Expand All @@ -90,7 +90,7 @@ <h2 id="ex_label">Example</h2>
</svg>
</button>

<button class="next"
<button type="button" class="next"
aria-controls="myCarousel-items"
aria-label="Next Slide">
<svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h2 id="ex_label">Example</h2>
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-haspopup="true" aria-owns="lb1"
/>
<button id="cb1-button" aria-label="Open" tabindex="-1">&#9661;</button>
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">&#9661;</button>
</div>
<ul id="lb1" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h2 id="ex_label">Example</h2>
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
aria-expanded="false" aria-haspopup="true" aria-owns="cb1-listbox"
/>
<button id="cb1-button" tabindex="-1" aria-label="Open">&#9661;</button>
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">&#9661;</button>
</div>
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
Expand Down
2 changes: 1 addition & 1 deletion examples/combobox/aria1.0pattern/combobox-autocomplete-none.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h2 id="ex_label">Example</h2>
aria-haspopup="true"
aria-owns="cb1-listbox"
/>
<button id="cb1-button" tabindex="-1" aria-label="Open">
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
&#9661;
</button>
</div>
Expand Down
98 changes: 49 additions & 49 deletions examples/dialog-modal/datepicker-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2 id="ex_label">Example</h2>
id="id-textbox-1"
aria-autocomplete="none">

<button class="icon"
<button type="button" class="icon"
aria-label="Choose Date"
>
<span class="fa fa-calendar-alt fa-2x"></span>
Expand All @@ -73,12 +73,12 @@ <h2 id="ex_label">Example</h2>

<div class="header">

<button class="prevYear"
<button type="button" class="prevYear"
aria-label="previous year">
<span class="fas fa-angle-double-left fa-lg"></span>
</button>

<button class="prevMonth"
<button type="button" class="prevMonth"
aria-label="previous month">
<span class="fas fa-angle-left fa-lg"></span>
</button>
Expand All @@ -89,12 +89,12 @@ <h2 id="ex_label">Example</h2>
Month Year
</h2>

<button class="nextMonth"
<button type="button" class="nextMonth"
aria-label="next month">
<span class="fas fa-angle-right fa-lg"></span>
</button>

<button class="nextYear"
<button type="button" class="nextYear"
aria-label="next year">
<span class="fas fa-angle-double-right fa-lg"></span>
</button>
Expand All @@ -119,65 +119,65 @@ <h2 id="ex_label">Example</h2>

<tbody>
<tr>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">25</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">26</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">27</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">28</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">29</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">30</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">1</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">25</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">26</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">27</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">28</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">29</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">30</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">1</button></td>
</tr>
<tr>
<td class="dateCell"><button class="dateButton" tabindex="-1">2</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">3</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">4</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">5</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">6</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">7</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">8</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">2</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">3</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">4</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">5</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">6</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">7</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">8</button></td>
</tr>
<tr>
<td class="dateCell"><button class="dateButton" tabindex="-1">9</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">10</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">11</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">12</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">13</button></td>
<td class="dateCell"><button class="dateButton">14</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">15</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">9</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">10</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">11</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">12</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">13</button></td>
<td class="dateCell"><button type="button" class="dateButton">14</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">15</button></td>
</tr>
<tr>
<td class="dateCell"><button class="dateButton" tabindex="-1">16</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">17</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">18</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">19</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">20</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">21</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">22</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">16</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">17</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">18</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">19</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">20</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">21</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">22</button></td>
</tr>
<tr>
<td class="dateCell"><button class="dateButton" tabindex="-1">23</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">24</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">25</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">26</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">27</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">28</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">29</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">23</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">24</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">25</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">26</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">27</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">28</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">29</button></td>
</tr>
<tr>
<td class="dateCell"><button class="dateButton" tabindex="-1">30</button></td>
<td class="dateCell"><button class="dateButton" tabindex="-1">31</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">1</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">2</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">3</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">4</button></td>
<td class="dateCell"><button class="dateButton disabled" tabindex="-1">5</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">30</button></td>
<td class="dateCell"><button type="button" class="dateButton" tabindex="-1">31</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">1</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">2</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">3</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">4</button></td>
<td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">5</button></td>
</tr>
</tbody>
</table>

<div class="dialogButtonGroup">
<button class="dialogButton" value="cancel">Cancel</button>
<button class="dialogButton" value="ok">OK</button>
<button type="button" class="dialogButton" value="cancel">Cancel</button>
<button type="button" class="dialogButton" value="ok">OK</button>
</div>

<div class="message" aria-live="polite">
Expand Down
16 changes: 8 additions & 8 deletions examples/dialog-modal/dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ <h1>Modal Dialog Example</h1>
<h2 id="ex_label">Example</h2>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<button onclick="openDialog('dialog1', this)">Add Delivery Address</button>
<button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
Expand Down Expand Up @@ -275,9 +275,9 @@ <h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
</div>
</div>
<div class="dialog_form_actions">
<button onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
<button onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
<button onclick="closeDialog(this)">Cancel</button>
<button type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
<button type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
<button type="button" onclick="closeDialog(this)">Cancel</button>
</div>
</div>

Expand Down Expand Up @@ -336,8 +336,8 @@ <h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
</div>
<div class="dialog_form_actions">
<a href="#" onclick="openDialog('dialog4', this)">link to help</a>
<button onclick="openDialog('dialog4', this)">accepting an alternative form</button>
<button onclick="closeDialog(this)">Close</button>
<button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
<button type="button" onclick="closeDialog(this)">Close</button>
</div>
</div>

Expand All @@ -351,7 +351,7 @@ <h2 id="dialog3_label" class="dialog_label">Address Added</h2>
<a href="#" onclick="openDialog('dialog4', this)">your profile.</a>
</p>
<div class="dialog_form_actions">
<button id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
<button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
</div>
</div>

Expand All @@ -364,7 +364,7 @@ <h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
The link or button is present for demonstration purposes only.
</p>
<div class="dialog_form_actions">
<button id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
<button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions examples/dialog-modal/js/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ DatePicker.prototype.init = function () {
cell.classList.add('dateCell');
var cellButton = document.createElement('button');
cellButton.classList.add('dateButton');
cellButton.setAttribute('type', 'button');
cell.appendChild(cellButton);
row.appendChild(cell);
var dpDay = new DatePickerDay(cellButton, this, index, i, j);
Expand Down
8 changes: 4 additions & 4 deletions examples/disclosure/disclosure-faq.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h2 id="ex_label">Example</h2>
<div id="ex1">
<dl class="faq">
<dt>
<button aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
<button type="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
</dt>
<dd>
<p id="faq1_desc" class="desc">
Expand All @@ -58,7 +58,7 @@ <h2 id="ex_label">Example</h2>
</p>
</dd>
<dt>
<button aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
<button type="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
</dt>
<dd>
<p id="faq2_desc" class="desc">You should come to the Parking office and report the
Expand All @@ -68,7 +68,7 @@ <h2 id="ex_label">Example</h2>
</p>
</dd>
<dt>
<button aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
<button type="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
</dt>
<dd>
<p id="faq3_desc" class="desc">
Expand All @@ -79,7 +79,7 @@ <h2 id="ex_label">Example</h2>
</p>
</dd>
<dt>
<button aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
<button type="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
</dt>
<dd>
<p id="faq4_desc" class="desc">
Expand Down
Loading

0 comments on commit 545d852

Please sign in to comment.