javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(checkbox): use a native input to fix a11y issues with axe and screen readers (#22402)

Browse Source 
fixes #21644
fixes #20517
fixes #17796
This commit is contained in:
Brandy Carney
2020-11-12 11:25:33 -05:00
committed by GitHub
parent 0956f8bc55
commit 7214a8401b
11 changed files with 347 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
core/src/components/checkbox/test/basic/index.html
View File

@ -38,7 +38,7 @@
<ion-item>
<ion-label>Secondary</ion-label>
<ion-checkbox checked color="secondary"></ion-checkbox>
<ion-checkbox disabled checked color="secondary"></ion-checkbox>
</ion-item>
<ion-item>
@ -103,6 +103,31 @@
</ion-content>
</ion-app>
<script>
const inputs = document.querySelectorAll('ion-checkbox');
for (var i = 0; i < inputs.length; i++) {
const input = inputs[i];
input.addEventListener('ionBlur', function() {
console.log('Listen ionBlur: fired');
});
input.addEventListener('ionFocus', function() {
console.log('Listen ionFocus: fired');
});
input.addEventListener('ionChange', function(ev) {
console.log('Listen ionChange: fired', ev.detail);
});
input.addEventListener('click', function() {
console.log('Listen click: fired');
});
}
</script>
</body>
</html>

42
core/src/components/checkbox/test/indeterminate/index.html
View File

@ -31,22 +31,22 @@
<div class="ion-padding-start">
<!-- Default to unchecked -->
<label for="unchecked">Unchecked</label>
<input name="unchecked" type="checkbox">
<input name="unchecked" id="unchecked" type="checkbox">
<br>
<!-- Default to checked -->
<label for="checked">Checked</label>
<input name="checked" type="checkbox" checked />
<input name="checked" id="checked" type="checkbox" checked />
<br>
<!-- Default to indeterminate -->
<label for="indeterminate">Indeterminate</label>
<input name="indeterminate" type="checkbox" class="indeterminate">
<input name="indeterminate" id="indeterminate" type="checkbox" class="indeterminate">
<br>
<!-- Default to checked / indeterminate -->
<label for="both">Checked / Indeterminate</label>
<input name="both" type="checkbox" checked class="indeterminate">
<input name="both" id="both" type="checkbox" checked class="indeterminate">
<br>
</div>
@ -81,15 +81,15 @@
</ion-label>
</ion-list-header>
<div class="ion-padding-start">
<ion-checkbox indeterminate></ion-checkbox>
<ion-checkbox indeterminate color="secondary"></ion-checkbox>
<ion-checkbox indeterminate color="tertiary"></ion-checkbox>
<ion-checkbox indeterminate color="success"></ion-checkbox>
<ion-checkbox indeterminate color="warning"></ion-checkbox>
<ion-checkbox indeterminate color="danger"></ion-checkbox>
<ion-checkbox indeterminate color="dark"></ion-checkbox>
<ion-checkbox indeterminate color="medium"></ion-checkbox>
<ion-checkbox indeterminate color="light"></ion-checkbox>
<ion-checkbox aria-label="Default Indeterminate" indeterminate></ion-checkbox>
<ion-checkbox aria-label="Secondary Indeterminate" indeterminate color="secondary"></ion-checkbox>
<ion-checkbox aria-label="Tertiary Indeterminate" indeterminate color="tertiary"></ion-checkbox>
<ion-checkbox aria-label="Success Indeterminate" indeterminate color="success"></ion-checkbox>
<ion-checkbox aria-label="Warning Indeterminate" indeterminate color="warning"></ion-checkbox>
<ion-checkbox aria-label="Danger Indeterminate" indeterminate color="danger"></ion-checkbox>
<ion-checkbox aria-label="Dark Indeterminate" indeterminate color="dark"></ion-checkbox>
<ion-checkbox aria-label="Medium Indeterminate" indeterminate color="medium"></ion-checkbox>
<ion-checkbox aria-label="Light Indeterminate" indeterminate color="light"></ion-checkbox>
</div>
<ion-list-header>
@ -100,20 +100,20 @@
<ul>
<li>
<ion-checkbox name="tall" id="tall" indeterminate></ion-checkbox>
<label for="tall">Tall Things</label>
<ion-checkbox aria-labelledby="tall-label-0" indeterminate></ion-checkbox>
<label id="tall-label-0">Tall Things</label>
<ul>
<li>
<ion-checkbox name="tall-1" id="tall-1" checked></ion-checkbox>
<label for="tall-1">Skyscrapers</label>
<ion-checkbox aria-labelledby="tall-label-1" checked></ion-checkbox>
<label id="tall-label-1">Skyscrapers</label>
</li>
<li>
<ion-checkbox name="tall-2" id="tall-2"></ion-checkbox>
<label for="tall-2">Trees</label>
<ion-checkbox aria-labelledby="tall-label-2"></ion-checkbox>
<label id="tall-label-2">Trees</label>
</li>
<li>
<ion-checkbox name="tall-2" id="tall-2"></ion-checkbox>
<label for="tall-2">Giants</label>
<ion-checkbox aria-labelledby="tall-label-3"></ion-checkbox>
<label id="tall-label-3">Giants</label>
</li>
</ul>
</li>

90
core/src/components/checkbox/test/standalone/index.html
View File

@ -13,67 +13,67 @@
<body class="ion-padding">
<h1>Default</h1>
<ion-checkbox></ion-checkbox>
<ion-checkbox checked></ion-checkbox>
<ion-checkbox disabled></ion-checkbox>
<ion-checkbox disabled checked></ion-checkbox>
<ion-checkbox aria-label="Default Checkbox"></ion-checkbox>
<ion-checkbox aria-label="Default Checkbox" checked></ion-checkbox>
<ion-checkbox aria-label="Default Checkbox" disabled></ion-checkbox>
<ion-checkbox aria-label="Default Checkbox" disabled checked></ion-checkbox>
<h1>Colors</h1>
<ion-checkbox color="primary"></ion-checkbox>
<ion-checkbox color="secondary"></ion-checkbox>
<ion-checkbox color="tertiary"></ion-checkbox>
<ion-checkbox color="success"></ion-checkbox>
<ion-checkbox color="warning"></ion-checkbox>
<ion-checkbox color="danger"></ion-checkbox>
<ion-checkbox color="light"></ion-checkbox>
<ion-checkbox color="medium"></ion-checkbox>
<ion-checkbox color="dark"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Primary" color="primary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Secondary" color="secondary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Tertiary" color="tertiary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Success" color="success"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Warning" color="warning"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Danger" color="danger"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Light" color="light"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Medium" color="medium"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Dark" color="dark"></ion-checkbox>
<hr>
<ion-checkbox checked color="primary"></ion-checkbox>
<ion-checkbox checked color="secondary"></ion-checkbox>
<ion-checkbox checked color="tertiary"></ion-checkbox>
<ion-checkbox checked color="success"></ion-checkbox>
<ion-checkbox checked color="warning"></ion-checkbox>
<ion-checkbox checked color="danger"></ion-checkbox>
<ion-checkbox checked color="light"></ion-checkbox>
<ion-checkbox checked color="medium"></ion-checkbox>
<ion-checkbox checked color="dark"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Primary" checked color="primary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Secondary" checked color="secondary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Tertiary" checked color="tertiary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Success" checked color="success"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Warning" checked color="warning"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Danger" checked color="danger"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Light" checked color="light"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Medium" checked color="medium"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Dark" checked color="dark"></ion-checkbox>
<hr>
<ion-checkbox checked disabled color="primary"></ion-checkbox>
<ion-checkbox checked disabled color="secondary"></ion-checkbox>
<ion-checkbox checked disabled color="tertiary"></ion-checkbox>
<ion-checkbox checked disabled color="success"></ion-checkbox>
<ion-checkbox checked disabled color="warning"></ion-checkbox>
<ion-checkbox checked disabled color="danger"></ion-checkbox>
<ion-checkbox checked disabled color="light"></ion-checkbox>
<ion-checkbox checked disabled color="medium"></ion-checkbox>
<ion-checkbox checked disabled color="dark"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Primary" checked disabled color="primary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Secondary" checked disabled color="secondary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Tertiary" checked disabled color="tertiary"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Success" checked disabled color="success"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Warning" checked disabled color="warning"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Danger" checked disabled color="danger"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Light" checked disabled color="light"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Medium" checked disabled color="medium"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Dark" checked disabled color="dark"></ion-checkbox>
<h1>Custom</h1>
<ion-checkbox class="custom"></ion-checkbox>
<ion-checkbox class="custom" checked></ion-checkbox>
<ion-checkbox class="custom" disabled></ion-checkbox>
<ion-checkbox class="custom" disabled checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom" checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom" disabled checked></ion-checkbox>
<h1>Custom: checked</h1>
<ion-checkbox class="custom-checked"></ion-checkbox>
<ion-checkbox class="custom-checked" checked></ion-checkbox>
<ion-checkbox class="custom-checked" disabled></ion-checkbox>
<ion-checkbox class="custom-checked" disabled checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom" class="custom-checked" disabled checked></ion-checkbox>
<h1>Custom: light</h1>
<ion-checkbox class="custom-light"></ion-checkbox>
<ion-checkbox class="custom-light" checked></ion-checkbox>
<ion-checkbox class="custom-light" disabled></ion-checkbox>
<ion-checkbox class="custom-light" disabled checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Light" class="custom-light" disabled checked></ion-checkbox>
<h1>Custom: transition</h1>
<ion-checkbox class="custom-transition"></ion-checkbox>
<ion-checkbox class="custom-transition" checked></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition"></ion-checkbox>
<ion-checkbox aria-label="Checkbox Custom Transition" class="custom-transition" checked></ion-checkbox>
<style>
.custom {