Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch Role: Example using the DIV element #1892

Merged
merged 55 commits into from
Oct 4, 2021
Merged
Changes from 1 commit
Commits
Show all changes
55 commits
Select commit Hold shift + click to select a range
3b972ac
Add basis code
Jul 17, 2017
198a699
Fix switch functionality
Jul 17, 2017
0ba2018
Add keyboard support
Jul 20, 2017
01babec
Add line about where to comment
Jul 20, 2017
24f2fc7
Remove enter key as an activation key
Jul 20, 2017
0aedd74
Merge branch 'master' into switch
mcking65 Jul 19, 2018
c6d2ddb
Add draft of switch design pattern (pull #788)
jongund Jul 19, 2018
6194469
Switch Pattern: add note with link to development issue
mcking65 Jul 19, 2018
fa3d3c3
Switch Example: Add header nav and make minor editorial revisions.
mcking65 Aug 13, 2018
a39fe5f
Merge branch 'master' into switch
mcking65 Jan 28, 2019
40d10e3
Merge branch 'master' into switch
mcking65 Feb 4, 2019
e37e753
Add basis code
Jul 17, 2017
55afcf7
Fix switch functionality
Jul 17, 2017
639bbda
Add keyboard support
Jul 20, 2017
32ae95a
Add line about where to comment
Jul 20, 2017
8ea5ed1
Remove enter key as an activation key
Jul 20, 2017
9c4da45
Add draft of switch design pattern (pull #788)
jongund Jul 19, 2018
09a4dc4
Switch Pattern: add note with link to development issue
mcking65 Jul 19, 2018
8a6c110
Switch Example: Add header nav and make minor editorial revisions.
mcking65 Aug 13, 2018
4830d6a
#243 Update Switch JS/CSS/HTML
Feb 4, 2019
ff76296
Merge branch 'switch' of github.com:w3c/aria-practices into switch
Feb 5, 2019
5fe0eff
Merge branch 'master' into switch
mcking65 Feb 27, 2019
146ae8a
Merge branch 'master' into switch
jongund Mar 2, 2021
da6f59f
Merge branch 'main' into switch
jongund May 4, 2021
278e3d2
initial implementation of a switch that supports HC
jongund May 5, 2021
e4a9fce
intial implementation of a switch example using a DIV element
jongund May 5, 2021
d7fa02f
fixed spelling issues
jongund May 5, 2021
5d90774
updated documentation and hover styling
jongund May 6, 2021
99058e9
update cspell
jongund May 6, 2021
b744849
update cspell
jongund May 6, 2021
dceedb0
update cspell
jongund May 6, 2021
252deff
fixed spelling error
jongund May 6, 2021
44f11fe
fixed spelling error and update cspell
jongund May 6, 2021
1b5dc1a
updated documentation
jongund May 7, 2021
d815a3e
updated documentation
jongund May 7, 2021
23ae014
updated documentation
jongund May 7, 2021
d76296a
fixed selection and moved on/off labels to content
jongund May 27, 2021
b59317d
updated code to include DIV with class example-header for code pen sp…
jongund Jul 15, 2021
9fba33f
fixed code pen issue and added pointer cursor on hover
jongund Jul 27, 2021
4372458
updated reference table
jongund Sep 21, 2021
2cac238
updated documentation for switch example and added aria-hidden
jongund Sep 21, 2021
9483e3a
fixed linting bug
jongund Sep 21, 2021
24655f1
updated documentation
jongund Sep 22, 2021
7ecbbd9
Merge branch 'main' into switch
jongund Sep 22, 2021
0a58b73
Resolve conflicts in aria-practices.html
mcking65 Oct 3, 2021
63f35d5
Merge remote-tracking branch 'origin/main' into switch
mcking65 Oct 3, 2021
0720a1d
Revise intro
mcking65 Oct 3, 2021
b243661
Remove extraneous section tags
mcking65 Oct 3, 2021
cce4836
Revise accessibility features documentation for clarity and consistency
mcking65 Oct 3, 2021
34197b6
Minor update to kbd doc
mcking65 Oct 3, 2021
0069358
Editorial clean up of kb documentation section
mcking65 Oct 3, 2021
a4fe905
white space consistency
mcking65 Oct 3, 2021
192f8a5
updated example to have just one switch and corrected the accessibili…
jongund Oct 4, 2021
f73aca5
Merge branch 'main' into switch
mcking65 Oct 4, 2021
2a5ad2f
Add link to example from main doc
mcking65 Oct 4, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
#243 Update Switch JS/CSS/HTML
Michiel Bijl committed Feb 5, 2019

Verified

This commit was signed with the committer’s verified signature.
sjoerdtalsma Sjoerd Talsma
commit 4830d6af2075cff8c142474fcbae3915c45a8f50
79 changes: 75 additions & 4 deletions examples/switch/css/switch.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,74 @@
body {
:root {
--toggle-circle-size: 1.5rem;
--toggle-spacing: 0.125rem;
--toggle-height: calc(var(--toggle-circle-size) + calc(2 * var(--toggle-spacing)));
--toggle-width: calc(2 * calc(var(--toggle-circle-size) + var(--toggle-spacing)));
--toggle-border-radius: calc(var(--toggle-height) / 2);
}

* {
box-sizing: border-box;
}

*::before,
*::after {
box-sizing: inherit;
}

[role^="switch"] {
display: flex;
flex-direction: row;
align-items: center;
outline: none;
user-select: none;
max-width: 15em;
}

[role^="switch"] span:first-child {
width: 100%;
}

[role^="switch"] span:last-child {
display: block;
flex-shrink: 0;
padding: var(--toggle-spacing);
width: var(--toggle-width);
height: var(--toggle-height);
border-radius: var(--toggle-border-radius);
background: #ccc;
transition: background-color cubic-bezier(0.23, 1, 0.32, 1) .4s;
}

[role^="switch"] span:last-child::before {
display: block;
width: var(--toggle-circle-size);
height: var(--toggle-circle-size);
border-radius: 50%;
background: #fff;
transition: transform cubic-bezier(0.23, 1, 0.32, 1) .4s;
content: '';
}

[role^="switch"][aria-checked="true"] span:last-child {
background: #22AB34;
}

[role^="switch"][aria-checked="true"] span:last-child::before {
transform: translateX(var(--toggle-circle-size));
}

[role^="switch"]:focus span:last-child {
box-shadow:
0 0 0 1px #fff,
0 0 0 3px hsl(205, 75%, 76%);
}

[role^="switch"] + [role^="switch"] {
margin-top: 1em;
}


/* body {
font-family: sans-serif;
}

@@ -9,8 +79,10 @@ body {
*::before,
*::after {
box-sizing: inherit;
}
} */


/*
[role^=switch] {
display: inline-block;
margin-top: .5em;
@@ -30,7 +102,6 @@ body {
border-radius: 3px;
vertical-align: middle;
background: hsl(240, 25%, 98%);
/* overflow: hidden; */
}

[role^=switch][aria-checked="true"] span {
@@ -76,4 +147,4 @@ body {

[role^=switch][aria-checked="true"]:focus span::after {
/* border-color: hsl(137, 29%, 49%); */
}
/*}
62 changes: 24 additions & 38 deletions examples/switch/js/switch.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,32 @@
// Run the load function after all resources are loaded.
window.onload = load;

const keys = {
space: 32
};

function load() {
// Create an array of all the switches on the page.
// The query looks for elements with a role attribute that starts with "switch".
let HTMLSwitches = [].slice.call(document.querySelectorAll('[role^=switch]'));

// Add an event listener to all the switches.
for (let HTMLSwitch of HTMLSwitches) {
HTMLSwitch.addEventListener('click', activateSwitch);
HTMLSwitch.addEventListener('keydown', HTMLSwitchKeyHandler);
class Switch {
constructor (element) {
this.element = element
this.bindEvents()
console.log('switch')
}
};

function HTMLSwitchKeyHandler (event) {
let switchEl = this;
let key = event.keyCode;
bindEvents () {
this.element.addEventListener('click', () => this.toggleStatus())
this.element.addEventListener('keydown', event => this.onKeydown(event))
}

// If space is pressed activate the switch.
if (key === keys.space) {
event.preventDefault();
activateSwitch(event, this);
onKeydown(event) {
// Only do something when space or return is pressed
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault()
this.toggleStatus()
}
}
};

function activateSwitch (event, eventTarget) {
let switchEl = eventTarget;
// Switch state of a switch, hah, see what I did there, right…
toggleStatus() {
const currentState = this.element.getAttribute('aria-checked') === 'true'
const newState = String(!currentState)

// If no element is provided set it 'this'.
if (eventTarget === undefined) {
switchEl = this;
this.element.setAttribute('aria-checked', newState)
}

// Get the current state for the switch.
let currentState = switchEl.getAttribute('aria-checked');
// Invert the state.
let newState = (currentState === "false" ? "true" : "false");
}

// Set the new state.
switchEl.setAttribute('aria-checked', newState);
};
// Initialize the Switch component on all matching DOM nodes
Array.from(document.querySelectorAll('[role^=switch]'))
.forEach(element => new Switch(element))
11 changes: 5 additions & 6 deletions examples/switch/switch.html
Original file line number Diff line number Diff line change
@@ -30,7 +30,6 @@
Rename these files to match the name of the example, e.g., checkbox.js if implementing the checkbox design pattern.
-->
<link href="css/switch.css" rel="stylesheet">
<script src="js/switch.js" type="text/javascript"></script>
</head>
<body>
<nav aria-label="Related Links" class="feedback">
@@ -64,18 +63,17 @@ <h2 id="ex_label">Example</h2>
role="switch checkbox"
aria-checked="false"
tabindex="0">
<span>Larger text</span>
<span></span>
Larger text</div>

<br>
</div>

<div id="switch-colours"
role="switch checkbox"
aria-checked="false"
tabindex="0">
<span>Invert colours</span>
<span></span>
Invert colours</div>

</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
@@ -215,5 +213,6 @@ <h2 id="sc1_label">HTML Source Code</h2>
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
<a href="../../#switch">Switch Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
<script src="js/switch.js" type="text/javascript"></script>
</body>
</html>