From 2b093d1595116c366a736dd8d2a0f4834a4ca12c Mon Sep 17 00:00:00 2001 From: David Elisma Date: Wed, 29 Apr 2020 16:55:01 -0400 Subject: [PATCH 01/13] feat(checklist): Create checklist files feat(checklist): Create checklist files Auto stash before rebase of "origin/feature/checklist" --- working-on/checklist/checkbox.scss | 126 ++++++++++++++ working-on/checklist/checklist.css | 107 ++++++++++++ working-on/checklist/checklist.html | 139 +++++++++++++++ working-on/checklist/tmp/w3-checkbox.css | 77 +++++++++ working-on/checklist/tmp/w3-checkbox.js | 84 +++++++++ working-on/checklist/tmp/w3-checkboxMixed.js | 159 ++++++++++++++++++ .../checklist/tmp/w3-controlledCheckbox.js | 106 ++++++++++++ working-on/checklist/wb-checklist.js | 48 ++++++ 8 files changed, 846 insertions(+) create mode 100644 working-on/checklist/checkbox.scss create mode 100644 working-on/checklist/checklist.css create mode 100644 working-on/checklist/checklist.html create mode 100644 working-on/checklist/tmp/w3-checkbox.css create mode 100644 working-on/checklist/tmp/w3-checkbox.js create mode 100644 working-on/checklist/tmp/w3-checkboxMixed.js create mode 100644 working-on/checklist/tmp/w3-controlledCheckbox.js create mode 100644 working-on/checklist/wb-checklist.js diff --git a/working-on/checklist/checkbox.scss b/working-on/checklist/checkbox.scss new file mode 100644 index 000000000..5b122ae32 --- /dev/null +++ b/working-on/checklist/checkbox.scss @@ -0,0 +1,126 @@ +.provisional { + [role="checkbox"] { + /* (0,2,0) */ + cursor: default; + display: inline-block; + padding-left: 30px; + position: relative; + + &::before, &::after { + /* (0,2,1) */ + left: 0; + position: absolute; + top: 0; + transform: translate(-50%, -50%); + } + + &::before { + /* (0,2,1) */ + border: 2px solid hsl(0, 0%, 15%); + content: ""; + height: 36px; + width: 36px; + } + + &::after { + /* (0,2,1) */ + content: none; + } + + &:focus { + /* (0,3,0) */ + outline: none; + } + + &:checked::after { + /* (0,3,1) */ + content: ""; + } + + &:active::before, + &[aria-checked="false"]:hover::before { + /* (0,3,1) */ + background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%); + } + + &[aria-checked="true"]::after { + /* (0,3,1) */ + border-color: #333; + border-style: solid; + border-width: 0 5px 5px 0; + content: ""; + display: inline-block; + height: 26px; + left: -4px; + top: 1px; + width: 13px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + + &:focus::before { + /* (0,3,1) */ + box-shadow: 0 0 3pt 2pt rgb(59, 153, 252); + box-sizing: content-box; + height: 16px; + width: 16px; + } + } + + ul.wb-chcklst { + /* (0,2,1) */ + font-size: 20px; + margin-left: 0; + padding-top: 6px; + } + + .lst-none ul li { + /* (0,2,2) */ + list-style-type: disc; + } + + ul.wb-chcklst.sm-chcklst { + /* (0,3,1) */ + font-size: 17px; + } + + .sm-chcklst [role="checkbox"]::before { + /* (0,3,1) */ + height: 24px; + left: 10px; + top: 11px; + width: 24px; + } + + ul.wb-chcklst { + &.sm-chcklst > li { + /* (0,3,2) */ + line-height: 23px; + margin-bottom: 25px; + margin-top: 10px; + } + + [role="checkbox"][aria-checked="true"] { + &::before { + /* (0,4,2) */ + background-color: #318000; + } + + &::after { + /* (0,4,2) */ + border-color: white; + border-width: 0 4px 4px 0; + } + } + } + + .sm-chcklst [role="checkbox"][aria-checked="true"]::after { + /* (0,4,1) */ + border-width: 0 4px 4px 0; + height: 16px; + left: 6px; + top: 1px; + width: 9px; + } +} \ No newline at end of file diff --git a/working-on/checklist/checklist.css b/working-on/checklist/checklist.css new file mode 100644 index 000000000..fe36abdd9 --- /dev/null +++ b/working-on/checklist/checklist.css @@ -0,0 +1,107 @@ +.provisional [role="checkbox"] { /* (0,2,0) */ + cursor: default; + display: inline-block; + padding-left: 30px; + position: relative; +} + +.provisional [role="checkbox"]::before, +.provisional [role="checkbox"]::after { /* (0,2,1) */ + left: 0; + position: absolute; + top: 0; + transform: translate(-50%, -50%); +} + +.provisional [role="checkbox"]::before { /* (0,2,1) */ + border: 2px solid hsl(0, 0%, 15%); + content: ""; + height: 36px; + width: 36px; +} +.provisional [role="checkbox"]::after { /* (0,2,1) */ + content: none; +} + +.provisional ul.wb-chcklst { /* (0,2,1) */ + font-size: 20px; + margin-left: 0; + padding-top: 6px; +} + +.provisional .lst-none ul li { /* (0,2,2) */ + list-style-type: disc; +} + +.provisional [role="checkbox"]:focus { /* (0,3,0) */ + outline: none; +} +.provisional [role="checkbox"]:hover { /* (0,3,0) */ + cursor: pointer; +} +.provisional [role="checkbox"]:checked::after { /* (0,3,1) */ + content: ""; +} + +.provisional [role="checkbox"]:active::before, +.provisional [role="checkbox"][aria-checked="false"]:hover::before { /* (0,3,1) */ + background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%); +} + +.provisional [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */ + border-color: #333; + border-style: solid; + border-width: 0 5px 5px 0; + content: ""; + display: inline-block; + height: 26px; + left: -4px; + top: 1px; + width: 13px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + +.provisional [role="checkbox"]:focus::before { /* (0,3,1) */ + box-shadow: 0 0 3pt 2pt rgb(59, 153, 252); + box-sizing: content-box; + height: 16px; + width: 16px; +} + +.provisional ul.wb-chcklst.sm-chcklst { /* (0,3,1) */ + font-size: 17px; +} + + +.provisional .sm-chcklst [role="checkbox"]::before { /* (0,3,1) */ + height: 24px; + left: 10px; + top: 11px; + width: 24px; +} + +.provisional ul.wb-chcklst.sm-chcklst > li { /* (0,3,2) */ + line-height: 23px; + margin-bottom: 25px; + margin-top: 10px; +} + +.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]::before, +.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]:hover::before { /* (0,4,2) */ + background-color: #318000; +} + +.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]::after { /* (0,4,2) */ + border-color: white; + border-width: 0 4px 4px 0; +} + +.provisional .sm-chcklst [role="checkbox"][aria-checked="true"]::after { /* (0,4,1) */ + border-width: 0 4px 4px 0; + height: 16px; + left: 6px; + top: 1px; + width: 9px; +} \ No newline at end of file diff --git a/working-on/checklist/checklist.html b/working-on/checklist/checklist.html new file mode 100644 index 000000000..3290eef44 --- /dev/null +++ b/working-on/checklist/checklist.html @@ -0,0 +1,139 @@ + + + + + + Checklist, checboxes and radio button experimentations - Canada.ca + + + + + + + + +
+ + +
+

Checklist examples

+
+

Example 1

+

To qualify, you must meet all of the following conditions:

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
+

Example 2

+
+ + To qualify, you must meet all of the following conditions: + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
+
+ + +
+ + + + + + + diff --git a/working-on/checklist/tmp/w3-checkbox.css b/working-on/checklist/tmp/w3-checkbox.css new file mode 100644 index 000000000..10c808e3f --- /dev/null +++ b/working-on/checklist/tmp/w3-checkbox.css @@ -0,0 +1,77 @@ +ul.checkboxes { + list-style: none; + margin-left: 0; + padding-left: 1em; +} + +[role="checkbox"] { + display: inline-block; + position: relative; + padding-left: 1.4em; + cursor: default; +} + +[role="checkbox"]::before, +[role="checkbox"]::after { + position: absolute; + top: 50%; + left: 7px; + transform: translate(-50%, -50%); + content: ''; +} + +[role="checkbox"]::before { + width: 14px; + height: 14px; + border: 1px solid hsl(0, 0%, 66%); + border-radius: 0.2em; + background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%); +} + +[role="checkbox"]:active::before { + background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%); +} + +[role="checkbox"][aria-checked="mixed"]::before, +[role="checkbox"][aria-checked="true"]::before { + border-color: hsl(216, 80%, 50%); + background: hsl(217, 95%, 68%); + background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%)); +} + +[role="checkbox"][aria-checked="mixed"]::after { + display: block; + width: 8px; + border-bottom: 0.125em solid #fff; + transform: translate(-50%, -50%) rotateZ(45deg); + transform-origin: center center; +} + +[role="checkbox"][aria-checked="mixed"]:active::after, +[role="checkbox"][aria-checked="true"]::after { + display: block; + width: 0.25em; + height: 0.4em; + border: solid #fff; + border-width: 0 0.125em 0.125em 0; + transform: translateY(-65%) translateX(-50%) rotate(45deg); +} + +[role="checkbox"][aria-checked="mixed"]:active::before, +[role="checkbox"][aria-checked="true"]:active::before { + background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%)); +} + +[role="checkbox"]:focus { + outline: none; +} + +[role="checkbox"]:focus::before { + width: 16px; + height: 16px; + box-sizing: content-box; + border-color: hsl(216, 94%, 73%); + border-width: 3px; + border-radius: calc(0.2em + 3px); + box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%); +} diff --git a/working-on/checklist/tmp/w3-checkbox.js b/working-on/checklist/tmp/w3-checkbox.js new file mode 100644 index 000000000..71383afec --- /dev/null +++ b/working-on/checklist/tmp/w3-checkbox.js @@ -0,0 +1,84 @@ +/* +* This content is licensed according to the W3C Software License at +* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document +* +* File: Checkbox.js +* +* Desc: Checkbox widget that implements ARIA Authoring Practices +* for a menu of links +* +*/ + +/* +* @constructor Checkbox +* +* +*/ +var Checkbox = function (domNode) { + + this.domNode = domNode; + + this.keyCode = Object.freeze({ + 'RETURN': 13, + 'SPACE': 32 + }); +}; + +Checkbox.prototype.init = function () { + this.domNode.tabIndex = 0; + + if (!this.domNode.getAttribute('aria-checked')) { + this.domNode.setAttribute('aria-checked', 'false'); + } + + this.domNode.addEventListener('keydown', this.handleKeydown.bind(this)); + this.domNode.addEventListener('click', this.handleClick.bind(this)); + this.domNode.addEventListener('focus', this.handleFocus.bind(this)); + this.domNode.addEventListener('blur', this.handleBlur.bind(this)); + +}; + +Checkbox.prototype.toggleCheckbox = function () { + + if (this.domNode.getAttribute('aria-checked') === 'true') { + this.domNode.setAttribute('aria-checked', 'false'); + } + else { + this.domNode.setAttribute('aria-checked', 'true'); + } + +}; + +/* EVENT HANDLERS */ + +Checkbox.prototype.handleKeydown = function (event) { + var flag = false; + + switch (event.keyCode) { + case this.keyCode.SPACE: + this.toggleCheckbox(); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.stopPropagation(); + event.preventDefault(); + } +}; + +Checkbox.prototype.handleClick = function (event) { + this.toggleCheckbox(); +}; + +Checkbox.prototype.handleFocus = function (event) { + this.domNode.classList.add('focus'); +}; + +Checkbox.prototype.handleBlur = function (event) { + this.domNode.classList.remove('focus'); +}; + diff --git a/working-on/checklist/tmp/w3-checkboxMixed.js b/working-on/checklist/tmp/w3-checkboxMixed.js new file mode 100644 index 000000000..c69a56e70 --- /dev/null +++ b/working-on/checklist/tmp/w3-checkboxMixed.js @@ -0,0 +1,159 @@ +/* +* This content is licensed according to the W3C Software License at +* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document +* +* File: CheckboxMixed.js +* +* Desc: CheckboxMixed widget that implements ARIA Authoring Practices +* for a menu of links +*/ + +/* +* @constructor CheckboxMixed +* +* +*/ +var CheckboxMixed = function (domNode) { + + this.domNode = domNode; + + this.controlledCheckboxes = []; + + this.keyCode = Object.freeze({ + 'RETURN': 13, + 'SPACE': 32 + }); +}; + +CheckboxMixed.prototype.init = function () { + this.domNode.tabIndex = 0; + + var ids = this.domNode.getAttribute('aria-controls').split(' '); + + for (var i = 0; i < ids.length; i++) { + var node = document.getElementById(ids[i]); + var ccb = new ControlledCheckbox(node, this); + ccb.init(); + this.controlledCheckboxes.push(ccb); + } + + this.domNode.addEventListener('keydown', this.handleKeydown.bind(this)); + this.domNode.addEventListener('click', this.handleClick.bind(this)); + this.domNode.addEventListener('focus', this.handleFocus.bind(this)); + this.domNode.addEventListener('blur', this.handleBlur.bind(this)); + + this.updateCheckboxMixed(); + +}; + +CheckboxMixed.prototype.updateCheckboxMixed = function () { + + var count = 0; + + for (var i = 0; i < this.controlledCheckboxes.length; i++) { + if (this.controlledCheckboxes[i].isChecked()) { + count++; + } + } + + if (count === 0) { + this.domNode.setAttribute('aria-checked', 'false'); + } + else { + if (count === this.controlledCheckboxes.length) { + this.domNode.setAttribute('aria-checked', 'true'); + } + else { + this.domNode.setAttribute('aria-checked', 'mixed'); + this.updateControlledStates(); + } + } +}; + +CheckboxMixed.prototype.updateControlledStates = function () { + for (var i = 0; i < this.controlledCheckboxes.length; i++) { + this.controlledCheckboxes[i].lastState = this.controlledCheckboxes[i].isChecked(); + } +}; + +CheckboxMixed.prototype.anyLastChecked = function () { + + var count = 0; + + for (var i = 0; i < this.controlledCheckboxes.length; i++) { + if (this.controlledCheckboxes[i].lastState) { + count++; + } + } + + return count > 0; + +}; + +CheckboxMixed.prototype.setControlledCheckboxes = function (value) { + + for (var i = 0; i < this.controlledCheckboxes.length; i++) { + this.controlledCheckboxes[i].setChecked(value); + } + + this.updateCheckboxMixed(); + +}; + +CheckboxMixed.prototype.toggleCheckboxMixed = function () { + + var state = this.domNode.getAttribute('aria-checked'); + + if (state === 'false') { + if (this.anyLastChecked()) { + this.setControlledCheckboxes('last'); + } + else { + this.setControlledCheckboxes('true'); + } + } + else { + if (state === 'mixed') { + this.setControlledCheckboxes('true'); + } + else { + this.setControlledCheckboxes('false'); + } + } + + this.updateCheckboxMixed(); +}; + +/* EVENT HANDLERS */ + +CheckboxMixed.prototype.handleKeydown = function (event) { + var flag = false; + + switch (event.keyCode) { + case this.keyCode.SPACE: + this.toggleCheckboxMixed(); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.stopPropagation(); + event.preventDefault(); + } +}; + +CheckboxMixed.prototype.handleClick = function (event) { + this.toggleCheckboxMixed(); +}; + +CheckboxMixed.prototype.handleFocus = function (event) { + this.domNode.classList.add('focus'); +}; + +CheckboxMixed.prototype.handleBlur = function (event) { + this.domNode.classList.remove('focus'); +}; + diff --git a/working-on/checklist/tmp/w3-controlledCheckbox.js b/working-on/checklist/tmp/w3-controlledCheckbox.js new file mode 100644 index 000000000..3ecdf8bfa --- /dev/null +++ b/working-on/checklist/tmp/w3-controlledCheckbox.js @@ -0,0 +1,106 @@ +/* +* This content is licensed according to the W3C Software License at +* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document +* +* File: controlledCheckbox.js +* +* Desc: ControlledCheckbox widget that implements ARIA Authoring Practices +* for a mixed checkbox +*/ + +/* +* @constructor ControlledCheckbox +* +* +*/ +var ControlledCheckbox = function (domNode, controllerObj) { + + this.domNode = domNode; + this.controller = controllerObj; + this.lastState = false; + +}; + +ControlledCheckbox.prototype.init = function () { + + this.lastState = this.isChecked(); + + console.log(this.lastState); + + this.domNode.addEventListener('change', this.handleChange.bind(this)); + + this.domNode.addEventListener('keydown', this.handleKeyup.bind(this), true); + this.domNode.addEventListener('click', this.handleClick.bind(this), true); + +}; + +ControlledCheckbox.prototype.isChecked = function () { + // if standard input[type=checkbox] + if (typeof this.domNode.checked === 'boolean') { + return this.domNode.checked; + } + + // If ARIA checkbox widget + return this.domNode.getAttribute('aria-checked') === 'true'; +}; + +ControlledCheckbox.prototype.setChecked = function (value) { + // if standard input[type=checkbox] + if (typeof this.domNode.checked === 'boolean') { + + switch (value) { + case 'true': + this.domNode.checked = true; + break; + + case 'false': + this.domNode.checked = false; + break; + + case 'last': + this.domNode.checked = this.lastState; + break; + + default: + break; + } + } + + // If ARIA checkbox widget + if (typeof this.domNode.getAttribute('aria-checked') === 'string') { + + switch (value) { + case 'true': + case 'false': + this.domNode.setAttribute('aria-checked', value); + break; + + case 'last': + if (this.lastState) { + this.domNode.setAttribute('aria-checked', 'true'); + } + else { + this.domNode.setAttribute('aria-checked', 'false'); + } + break; + + default: + break; + } + } +}; + +/* EVENT HANDLERS */ + +ControlledCheckbox.prototype.handleChange = function (event) { + this.controller.updateCheckboxMixed(); +}; + +ControlledCheckbox.prototype.handleKeyup = function (event) { + this.lastState = this.isChecked(); +}; + +ControlledCheckbox.prototype.handleClick = function (event) { + this.lastState = this.isChecked(); +}; + diff --git a/working-on/checklist/wb-checklist.js b/working-on/checklist/wb-checklist.js new file mode 100644 index 000000000..5b7c9ab1c --- /dev/null +++ b/working-on/checklist/wb-checklist.js @@ -0,0 +1,48 @@ +/** + * @title WET-BOEW Checklist plugin + * @overview Plugin contained to show an example of a custom WET checklist plugin + * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html + * @author @ux-tbs + */ +( function( $, window, wb ) { + "use strict"; + /* + * Variable and function definitions. + * These are global to the plugin - meaning that they will be initialized once per page, + * not once per instance of plugin on the page. So, this is a good place to define + * variables that are common to all instances of the plugin on a page. + */ + var componentName = "wb-checklist", + selector = "." + componentName, + initEvent = "wb-init" + selector, + $document = wb.doc, + /** + * @method init + * @param {jQuery Event} event Event that triggered the function call + */ + init = function( event ) { + // Start initialization + // returns DOM object = proceed with init + // returns undefined = do not proceed with init (e.g., already initialized) + var elm = wb.init( event, componentName, selector ), + $elm; + if ( elm ) { + $elm = $( elm ); + // ... Do the plugin initialisation + // Call my custom event + $elm.trigger( "name.of.your.event" ); + // Identify that initialization has completed + wb.ready( $elm, componentName ); + } + }; + // Add your plugin event handler + $document.on( "name.of.your.event", selector, function( event ) { + var elm = event.currentTarget, + $elm = $( elm ); + $elm.append( "Checklist" ); + } ); + // Bind the init event of the plugin + $document.on( "timerpoke.wb " + initEvent, selector, init ); + // Add the timer poke to initialize the plugin + wb.add( selector ); + } )( jQuery, window, wb ); \ No newline at end of file From 1717b5331a3c2260ced5a635c8ec743266f3cbc3 Mon Sep 17 00:00:00 2001 From: David Elisma Date: Sun, 3 May 2020 12:19:43 -0400 Subject: [PATCH 02/13] feat(checklist): Update checklist files HTML CSS --- working-on/checklist/checklist.css | 174 ++++++++++++++++++---------- working-on/checklist/checklist.html | 128 +++++++++++++++++--- 2 files changed, 223 insertions(+), 79 deletions(-) diff --git a/working-on/checklist/checklist.css b/working-on/checklist/checklist.css index fe36abdd9..83d719144 100644 --- a/working-on/checklist/checklist.css +++ b/working-on/checklist/checklist.css @@ -1,107 +1,153 @@ +/******** + ******** + ** Heydron Pickering example + ** October 15, 2014 + ** Replacing radio buttons without replacing radio buttons + ** https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/ + ******** + ********/ + + /* One input per line */ +.provisional label { /* (0,1,1) */ + cursor: pointer; + display: block; + font-size: 20px; + line-height: 2; +} + .provisional [role="checkbox"] { /* (0,2,0) */ - cursor: default; + cursor: pointer; display: inline-block; - padding-left: 30px; + padding-left: 15px; position: relative; } +.provisional fieldset.chkbxrdio-grp legend { /* (0,2,2) */ + float: none; + font-size: 22px; + margin-bottom: 15px; + margin-top: 0; +} + +.provisional [type="radio"], +.provisional [type="checkbox"] { /* (0,2,0) */ + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + padding: 0; + position: absolute; + overflow: hidden; + width: 1px; +} + +.provisional [type="radio"] + span, +.provisional [type="checkbox"] + span { /* (0,2,1) */ + display: block; + margin-left: 36px; +} + .provisional [role="checkbox"]::before, .provisional [role="checkbox"]::after { /* (0,2,1) */ + content: ""; left: 0; position: absolute; top: 0; - transform: translate(-50%, -50%); + transform: translate(-100%, 0%); } +.provisional .wb-checklist.wb-checklist-sm { /* (0,3,0) */ + font-size: 17px; +} + +/* the basic, unchecked style */ .provisional [role="checkbox"]::before { /* (0,2,1) */ - border: 2px solid hsl(0, 0%, 15%); - content: ""; + border: 4px solid #fff; + box-shadow: 0 0 0 2px #000; + display: inline-block; height: 36px; width: 36px; } -.provisional [role="checkbox"]::after { /* (0,2,1) */ - content: none; + +.provisional .wb-checklist-sm [role="checkbox"]::before { /* (0,3,1) */ + border-width: 3px; + height: 24px; + transform: translate(-100%, 20%); + width: 24px; } -.provisional ul.wb-chcklst { /* (0,2,1) */ - font-size: 20px; - margin-left: 0; - padding-top: 6px; +.provisional [type="radio"] + span::before, +.provisional [type="checkbox"] + span::before { /* (0,2,2) */ + border: 4px solid #fff; + box-shadow: 0 0 0 2px #000; + content: ""; + display: inline-block; + height: 36px; + left: 0; + position: absolute; + top: 0; + width: 36px; } -.provisional .lst-none ul li { /* (0,2,2) */ - list-style-type: disc; +.provisional [type="radio"] + span::before { /* (0,2,2) */ + border-radius: 50%; } +/* hover styling */ +.provisional [type="radio"]:hover + span::before, +.provisional [type="checkbox"]:hover + span::before, /* (0,3,2) */ +.provisional [role="checkbox"][aria-checked="false"]:hover::before { /* (0,3,1) */ + background-image: linear-gradient(to bottom, hsl(10, 0%, 90%), hsl(10, 0%, 100%) 50%); +} + +/* focus styling */ .provisional [role="checkbox"]:focus { /* (0,3,0) */ outline: none; } -.provisional [role="checkbox"]:hover { /* (0,3,0) */ - cursor: pointer; -} -.provisional [role="checkbox"]:checked::after { /* (0,3,1) */ - content: ""; + +.provisional [type="radio"]:focus + span::before, +.provisional [type="checkbox"]:focus + span::before, +.provisional [role="checkbox"]:focus::before { /* (0,3,2) */ + box-shadow: 0 0 0 2px #000, 0 0 8px 4px rgb(59, 153, 252); } -.provisional [role="checkbox"]:active::before, -.provisional [role="checkbox"][aria-checked="false"]:hover::before { /* (0,3,1) */ - background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%); +/* the checked style using the :checked pseudo class and aria-checked=true attribute */ +.provisional [role="checkbox"][aria-checked="true"]::before { /* (0,3,1) */ + background-color: #318000; + border-width: 2px; } .provisional [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */ - border-color: #333; + border-color: white; border-style: solid; border-width: 0 5px 5px 0; - content: ""; display: inline-block; height: 26px; - left: -4px; - top: 1px; width: 13px; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + transform: translate(-185%, 10%) rotate(45deg); } -.provisional [role="checkbox"]:focus::before { /* (0,3,1) */ - box-shadow: 0 0 3pt 2pt rgb(59, 153, 252); - box-sizing: content-box; +.provisional .wb-checklist-sm [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */ + border-width: 0 4px 4px 0; height: 16px; - width: 16px; -} - -.provisional ul.wb-chcklst.sm-chcklst { /* (0,3,1) */ - font-size: 17px; -} - - -.provisional .sm-chcklst [role="checkbox"]::before { /* (0,3,1) */ - height: 24px; - left: 10px; - top: 11px; - width: 24px; -} - -.provisional ul.wb-chcklst.sm-chcklst > li { /* (0,3,2) */ - line-height: 23px; - margin-bottom: 25px; - margin-top: 10px; + width: 9px; + transform: translate(-185%, 40%) rotate(45deg); } -.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]::before, -.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]:hover::before { /* (0,4,2) */ - background-color: #318000; +.provisional [type="radio"]:checked + span::before { /* (0,3,2) */ + background: #444; } -.provisional ul.wb-chcklst [role="checkbox"][aria-checked="true"]::after { /* (0,4,2) */ - border-color: white; - border-width: 0 4px 4px 0; -} - -.provisional .sm-chcklst [role="checkbox"][aria-checked="true"]::after { /* (0,4,1) */ - border-width: 0 4px 4px 0; - height: 16px; - left: 6px; - top: 1px; - width: 9px; +.provisional [type="checkbox"]:checked + span::after { /* (0,3,2) */ + border-color: #333; + border-style: solid; + border-width: 0 5px 5px 0; + content: ""; + display: inline-block; + height: 26px; + left: 12px; + position: absolute; + top: 2px; + transform: rotate(45deg); + width: 13px; } \ No newline at end of file diff --git a/working-on/checklist/checklist.html b/working-on/checklist/checklist.html index 3290eef44..d09bca649 100644 --- a/working-on/checklist/checklist.html +++ b/working-on/checklist/checklist.html @@ -5,7 +5,7 @@ Checklist, checboxes and radio button experimentations - Canada.ca - + @@ -44,13 +44,13 @@

Checklist examples

Example 1

-

To qualify, you must meet all of the following conditions:

-
    +

    To qualify, you must meet all of the following conditions: (checklist, large box)

    +
      • @@ -58,7 +58,7 @@

      Example 1

      @@ -66,7 +66,7 @@

      Example 1

      @@ -75,41 +75,139 @@

      Example 1

Example 2

+

To qualify, you must meet all of the following conditions: (checklist, small box)

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
+

Example 3

+

To qualify, you must meet all of the following conditions: (checklist + label, small box)

+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
+

Example 4

- To qualify, you must meet all of the following conditions: + To qualify, you must meet all of the following (checkboxes + implicite label, large box)
-
+
+

Example 5

+
+ + To qualify, you must meet all of the following (checkboxes + implicite label, large box) + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+
- + + diff --git a/working-on/checklist/wb-checklist.js b/working-on/checklist/wb-checklist.js index 5b7c9ab1c..28c78efd5 100644 --- a/working-on/checklist/wb-checklist.js +++ b/working-on/checklist/wb-checklist.js @@ -25,22 +25,64 @@ // returns DOM object = proceed with init // returns undefined = do not proceed with init (e.g., already initialized) var elm = wb.init( event, componentName, selector ), - $elm; + $elm; + if ( elm ) { $elm = $( elm ); - // ... Do the plugin initialisation - // Call my custom event - $elm.trigger( "name.of.your.event" ); - // Identify that initialization has completed + var $elms = $elm.find($("[role='checkbox']")); + for (let i = 0; i < $elms.length; i++) { + this.domNode = $elms.get(i); + this.keyCode = Object.freeze({ + "RETURN": 13, + "SPACE": 32 + }) + this.domNode.tabIndex = 0; + if (!$(this.domNode).attr("aria-checked")) { + $(this.domNode).attr("aria-checked", "false"); + } + } + + $elm.trigger( "click" ); + $elm.trigger( "keydown" ); + wb.ready( $elm, componentName ); } + }, + toggleCheckbox = function() { + if( $elm.attr("aria-checked") === "true" ) { + $elm.attr("aria-checked", "false"); + } else { + $elm.attr("aria-checked", "true"); + }; }; // Add your plugin event handler - $document.on( "name.of.your.event", selector, function( event ) { - var elm = event.currentTarget, - $elm = $( elm ); - $elm.append( "Checklist" ); + $document.on( "click", selector, function( event ) { + var elm = event.target, + $elm = $( elm ); + if( $elm.attr("aria-checked") === "true" ) { + $elm.attr("aria-checked", "false"); + } else { + $elm.attr("aria-checked", "true"); + } } ); + + $document.on( "keydown", selector, function( event ) { + var flag = false; + switch (event.keyCode) { + case this.keyCode.SPACE: + this.toggleCheckbox(); + flag = true; + break; + + default: + break; + } + + if (flag) { + event.stopPropagation(); + event.preventDefault(); + } + }); // Bind the init event of the plugin $document.on( "timerpoke.wb " + initEvent, selector, init ); // Add the timer poke to initialize the plugin From 87a6eece435d8a76f78b245e79b3bb3e7d15ab09 Mon Sep 17 00:00:00 2001 From: "Elisma, David" Date: Mon, 4 May 2020 09:27:28 -0400 Subject: [PATCH 05/13] Delete w3-checkbox.js --- working-on/checklist/tmp/w3-checkbox.js | 84 ------------------------- 1 file changed, 84 deletions(-) delete mode 100644 working-on/checklist/tmp/w3-checkbox.js diff --git a/working-on/checklist/tmp/w3-checkbox.js b/working-on/checklist/tmp/w3-checkbox.js deleted file mode 100644 index 71383afec..000000000 --- a/working-on/checklist/tmp/w3-checkbox.js +++ /dev/null @@ -1,84 +0,0 @@ -/* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: Checkbox.js -* -* Desc: Checkbox widget that implements ARIA Authoring Practices -* for a menu of links -* -*/ - -/* -* @constructor Checkbox -* -* -*/ -var Checkbox = function (domNode) { - - this.domNode = domNode; - - this.keyCode = Object.freeze({ - 'RETURN': 13, - 'SPACE': 32 - }); -}; - -Checkbox.prototype.init = function () { - this.domNode.tabIndex = 0; - - if (!this.domNode.getAttribute('aria-checked')) { - this.domNode.setAttribute('aria-checked', 'false'); - } - - this.domNode.addEventListener('keydown', this.handleKeydown.bind(this)); - this.domNode.addEventListener('click', this.handleClick.bind(this)); - this.domNode.addEventListener('focus', this.handleFocus.bind(this)); - this.domNode.addEventListener('blur', this.handleBlur.bind(this)); - -}; - -Checkbox.prototype.toggleCheckbox = function () { - - if (this.domNode.getAttribute('aria-checked') === 'true') { - this.domNode.setAttribute('aria-checked', 'false'); - } - else { - this.domNode.setAttribute('aria-checked', 'true'); - } - -}; - -/* EVENT HANDLERS */ - -Checkbox.prototype.handleKeydown = function (event) { - var flag = false; - - switch (event.keyCode) { - case this.keyCode.SPACE: - this.toggleCheckbox(); - flag = true; - break; - - default: - break; - } - - if (flag) { - event.stopPropagation(); - event.preventDefault(); - } -}; - -Checkbox.prototype.handleClick = function (event) { - this.toggleCheckbox(); -}; - -Checkbox.prototype.handleFocus = function (event) { - this.domNode.classList.add('focus'); -}; - -Checkbox.prototype.handleBlur = function (event) { - this.domNode.classList.remove('focus'); -}; - From 5bc9a2fa5a3fd80fb62abcbb83397d4f5a558983 Mon Sep 17 00:00:00 2001 From: "Elisma, David" Date: Mon, 4 May 2020 09:27:47 -0400 Subject: [PATCH 06/13] Delete w3-checkbox.css --- working-on/checklist/tmp/w3-checkbox.css | 77 ------------------------ 1 file changed, 77 deletions(-) delete mode 100644 working-on/checklist/tmp/w3-checkbox.css diff --git a/working-on/checklist/tmp/w3-checkbox.css b/working-on/checklist/tmp/w3-checkbox.css deleted file mode 100644 index 10c808e3f..000000000 --- a/working-on/checklist/tmp/w3-checkbox.css +++ /dev/null @@ -1,77 +0,0 @@ -ul.checkboxes { - list-style: none; - margin-left: 0; - padding-left: 1em; -} - -[role="checkbox"] { - display: inline-block; - position: relative; - padding-left: 1.4em; - cursor: default; -} - -[role="checkbox"]::before, -[role="checkbox"]::after { - position: absolute; - top: 50%; - left: 7px; - transform: translate(-50%, -50%); - content: ''; -} - -[role="checkbox"]::before { - width: 14px; - height: 14px; - border: 1px solid hsl(0, 0%, 66%); - border-radius: 0.2em; - background-image: linear-gradient(to bottom, hsl(300, 3%, 93%), #fff 30%); -} - -[role="checkbox"]:active::before { - background-image: linear-gradient(to bottom, hsl(300, 3%, 73%), hsl(300, 3%, 93%) 30%); -} - -[role="checkbox"][aria-checked="mixed"]::before, -[role="checkbox"][aria-checked="true"]::before { - border-color: hsl(216, 80%, 50%); - background: hsl(217, 95%, 68%); - background-image: linear-gradient(to bottom, hsl(217, 95%, 68%), hsl(216, 80%, 57%)); -} - -[role="checkbox"][aria-checked="mixed"]::after { - display: block; - width: 8px; - border-bottom: 0.125em solid #fff; - transform: translate(-50%, -50%) rotateZ(45deg); - transform-origin: center center; -} - -[role="checkbox"][aria-checked="mixed"]:active::after, -[role="checkbox"][aria-checked="true"]::after { - display: block; - width: 0.25em; - height: 0.4em; - border: solid #fff; - border-width: 0 0.125em 0.125em 0; - transform: translateY(-65%) translateX(-50%) rotate(45deg); -} - -[role="checkbox"][aria-checked="mixed"]:active::before, -[role="checkbox"][aria-checked="true"]:active::before { - background-image: linear-gradient(to bottom, hsl(216, 80%, 57%), hsl(217, 95%, 68%)); -} - -[role="checkbox"]:focus { - outline: none; -} - -[role="checkbox"]:focus::before { - width: 16px; - height: 16px; - box-sizing: content-box; - border-color: hsl(216, 94%, 73%); - border-width: 3px; - border-radius: calc(0.2em + 3px); - box-shadow: inset 0 0 0 1px hsl(216, 80%, 50%); -} From e60c4eef49589724783901bf15076a26dd0135a9 Mon Sep 17 00:00:00 2001 From: "Elisma, David" Date: Mon, 4 May 2020 09:28:05 -0400 Subject: [PATCH 07/13] Delete w3-checkboxMixed.js --- working-on/checklist/tmp/w3-checkboxMixed.js | 159 ------------------- 1 file changed, 159 deletions(-) delete mode 100644 working-on/checklist/tmp/w3-checkboxMixed.js diff --git a/working-on/checklist/tmp/w3-checkboxMixed.js b/working-on/checklist/tmp/w3-checkboxMixed.js deleted file mode 100644 index c69a56e70..000000000 --- a/working-on/checklist/tmp/w3-checkboxMixed.js +++ /dev/null @@ -1,159 +0,0 @@ -/* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: CheckboxMixed.js -* -* Desc: CheckboxMixed widget that implements ARIA Authoring Practices -* for a menu of links -*/ - -/* -* @constructor CheckboxMixed -* -* -*/ -var CheckboxMixed = function (domNode) { - - this.domNode = domNode; - - this.controlledCheckboxes = []; - - this.keyCode = Object.freeze({ - 'RETURN': 13, - 'SPACE': 32 - }); -}; - -CheckboxMixed.prototype.init = function () { - this.domNode.tabIndex = 0; - - var ids = this.domNode.getAttribute('aria-controls').split(' '); - - for (var i = 0; i < ids.length; i++) { - var node = document.getElementById(ids[i]); - var ccb = new ControlledCheckbox(node, this); - ccb.init(); - this.controlledCheckboxes.push(ccb); - } - - this.domNode.addEventListener('keydown', this.handleKeydown.bind(this)); - this.domNode.addEventListener('click', this.handleClick.bind(this)); - this.domNode.addEventListener('focus', this.handleFocus.bind(this)); - this.domNode.addEventListener('blur', this.handleBlur.bind(this)); - - this.updateCheckboxMixed(); - -}; - -CheckboxMixed.prototype.updateCheckboxMixed = function () { - - var count = 0; - - for (var i = 0; i < this.controlledCheckboxes.length; i++) { - if (this.controlledCheckboxes[i].isChecked()) { - count++; - } - } - - if (count === 0) { - this.domNode.setAttribute('aria-checked', 'false'); - } - else { - if (count === this.controlledCheckboxes.length) { - this.domNode.setAttribute('aria-checked', 'true'); - } - else { - this.domNode.setAttribute('aria-checked', 'mixed'); - this.updateControlledStates(); - } - } -}; - -CheckboxMixed.prototype.updateControlledStates = function () { - for (var i = 0; i < this.controlledCheckboxes.length; i++) { - this.controlledCheckboxes[i].lastState = this.controlledCheckboxes[i].isChecked(); - } -}; - -CheckboxMixed.prototype.anyLastChecked = function () { - - var count = 0; - - for (var i = 0; i < this.controlledCheckboxes.length; i++) { - if (this.controlledCheckboxes[i].lastState) { - count++; - } - } - - return count > 0; - -}; - -CheckboxMixed.prototype.setControlledCheckboxes = function (value) { - - for (var i = 0; i < this.controlledCheckboxes.length; i++) { - this.controlledCheckboxes[i].setChecked(value); - } - - this.updateCheckboxMixed(); - -}; - -CheckboxMixed.prototype.toggleCheckboxMixed = function () { - - var state = this.domNode.getAttribute('aria-checked'); - - if (state === 'false') { - if (this.anyLastChecked()) { - this.setControlledCheckboxes('last'); - } - else { - this.setControlledCheckboxes('true'); - } - } - else { - if (state === 'mixed') { - this.setControlledCheckboxes('true'); - } - else { - this.setControlledCheckboxes('false'); - } - } - - this.updateCheckboxMixed(); -}; - -/* EVENT HANDLERS */ - -CheckboxMixed.prototype.handleKeydown = function (event) { - var flag = false; - - switch (event.keyCode) { - case this.keyCode.SPACE: - this.toggleCheckboxMixed(); - flag = true; - break; - - default: - break; - } - - if (flag) { - event.stopPropagation(); - event.preventDefault(); - } -}; - -CheckboxMixed.prototype.handleClick = function (event) { - this.toggleCheckboxMixed(); -}; - -CheckboxMixed.prototype.handleFocus = function (event) { - this.domNode.classList.add('focus'); -}; - -CheckboxMixed.prototype.handleBlur = function (event) { - this.domNode.classList.remove('focus'); -}; - From ff6b70b698bf43f6e97214ab81c1ed1cbc1157f3 Mon Sep 17 00:00:00 2001 From: "Elisma, David" Date: Mon, 4 May 2020 09:28:21 -0400 Subject: [PATCH 08/13] Delete w3-controlledCheckbox.js --- .../checklist/tmp/w3-controlledCheckbox.js | 106 ------------------ 1 file changed, 106 deletions(-) delete mode 100644 working-on/checklist/tmp/w3-controlledCheckbox.js diff --git a/working-on/checklist/tmp/w3-controlledCheckbox.js b/working-on/checklist/tmp/w3-controlledCheckbox.js deleted file mode 100644 index 3ecdf8bfa..000000000 --- a/working-on/checklist/tmp/w3-controlledCheckbox.js +++ /dev/null @@ -1,106 +0,0 @@ -/* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: controlledCheckbox.js -* -* Desc: ControlledCheckbox widget that implements ARIA Authoring Practices -* for a mixed checkbox -*/ - -/* -* @constructor ControlledCheckbox -* -* -*/ -var ControlledCheckbox = function (domNode, controllerObj) { - - this.domNode = domNode; - this.controller = controllerObj; - this.lastState = false; - -}; - -ControlledCheckbox.prototype.init = function () { - - this.lastState = this.isChecked(); - - console.log(this.lastState); - - this.domNode.addEventListener('change', this.handleChange.bind(this)); - - this.domNode.addEventListener('keydown', this.handleKeyup.bind(this), true); - this.domNode.addEventListener('click', this.handleClick.bind(this), true); - -}; - -ControlledCheckbox.prototype.isChecked = function () { - // if standard input[type=checkbox] - if (typeof this.domNode.checked === 'boolean') { - return this.domNode.checked; - } - - // If ARIA checkbox widget - return this.domNode.getAttribute('aria-checked') === 'true'; -}; - -ControlledCheckbox.prototype.setChecked = function (value) { - // if standard input[type=checkbox] - if (typeof this.domNode.checked === 'boolean') { - - switch (value) { - case 'true': - this.domNode.checked = true; - break; - - case 'false': - this.domNode.checked = false; - break; - - case 'last': - this.domNode.checked = this.lastState; - break; - - default: - break; - } - } - - // If ARIA checkbox widget - if (typeof this.domNode.getAttribute('aria-checked') === 'string') { - - switch (value) { - case 'true': - case 'false': - this.domNode.setAttribute('aria-checked', value); - break; - - case 'last': - if (this.lastState) { - this.domNode.setAttribute('aria-checked', 'true'); - } - else { - this.domNode.setAttribute('aria-checked', 'false'); - } - break; - - default: - break; - } - } -}; - -/* EVENT HANDLERS */ - -ControlledCheckbox.prototype.handleChange = function (event) { - this.controller.updateCheckboxMixed(); -}; - -ControlledCheckbox.prototype.handleKeyup = function (event) { - this.lastState = this.isChecked(); -}; - -ControlledCheckbox.prototype.handleClick = function (event) { - this.lastState = this.isChecked(); -}; - From 8d49991992e65b0fca5b712962e80a183432514f Mon Sep 17 00:00:00 2001 From: David Elisma Date: Mon, 4 May 2020 10:07:33 -0400 Subject: [PATCH 09/13] feat(checklist): Update wb-checklist.js --- working-on/checklist/wb-checklist.js | 69 ++++++++++++++-------------- 1 file changed, 34 insertions(+), 35 deletions(-) diff --git a/working-on/checklist/wb-checklist.js b/working-on/checklist/wb-checklist.js index 28c78efd5..5610402ec 100644 --- a/working-on/checklist/wb-checklist.js +++ b/working-on/checklist/wb-checklist.js @@ -13,47 +13,40 @@ * variables that are common to all instances of the plugin on a page. */ var componentName = "wb-checklist", - selector = "." + componentName, - initEvent = "wb-init" + selector, - $document = wb.doc, - /** - * @method init - * @param {jQuery Event} event Event that triggered the function call - */ - init = function( event ) { - // Start initialization - // returns DOM object = proceed with init - // returns undefined = do not proceed with init (e.g., already initialized) - var elm = wb.init( event, componentName, selector ), - $elm; + selector = "." + componentName, + initEvent = "wb-init" + selector, + $document = wb.doc, + /** + * @method init + * @param {jQuery Event} event Event that triggered the function call + */ + init = function( event ) { + // Start initialization + // returns DOM object = proceed with init + // returns undefined = do not proceed with init (e.g., already initialized) + var elm = wb.init( event, componentName, selector ), + $elm; - if ( elm ) { - $elm = $( elm ); - var $elms = $elm.find($("[role='checkbox']")); - for (let i = 0; i < $elms.length; i++) { - this.domNode = $elms.get(i); - this.keyCode = Object.freeze({ - "RETURN": 13, - "SPACE": 32 - }) - this.domNode.tabIndex = 0; - if (!$(this.domNode).attr("aria-checked")) { - $(this.domNode).attr("aria-checked", "false"); + if ( elm ) { + $elm = $( elm ); + var $elms = $elm.find($("[role='checkbox']")); + for (let i = 0; i < $elms.length; i++) { + this.domNode = $elms.get(i); + this.keyCode = Object.freeze({ + "RETURN": 13, + "SPACE": 32 + }) + this.domNode.tabIndex = 0; + if (!$(this.domNode).attr("aria-checked")) { + $(this.domNode).attr("aria-checked", "false"); + } } - } $elm.trigger( "click" ); $elm.trigger( "keydown" ); wb.ready( $elm, componentName ); } - }, - toggleCheckbox = function() { - if( $elm.attr("aria-checked") === "true" ) { - $elm.attr("aria-checked", "false"); - } else { - $elm.attr("aria-checked", "true"); - }; }; // Add your plugin event handler $document.on( "click", selector, function( event ) { @@ -67,10 +60,16 @@ } ); $document.on( "keydown", selector, function( event ) { - var flag = false; + var elm = event.target, + $elm = $( elm ), + flag = false; switch (event.keyCode) { case this.keyCode.SPACE: - this.toggleCheckbox(); + if( $elm.attr("aria-checked") === "true" ) { + $elm.attr("aria-checked", "false"); + } else { + $elm.attr("aria-checked", "true"); + } flag = true; break; From 167dd59ed3862d83d77c89b50c4b0563bb377812 Mon Sep 17 00:00:00 2001 From: David Elisma Date: Mon, 4 May 2020 14:57:01 -0400 Subject: [PATCH 10/13] feat(checklist): Update checklist files HTML CSS JS --- working-on/checklist/checklist.css | 26 +++-- working-on/checklist/checklist.html | 162 ++++++++++++++++++--------- working-on/checklist/wb-checklist.js | 3 - 3 files changed, 128 insertions(+), 63 deletions(-) diff --git a/working-on/checklist/checklist.css b/working-on/checklist/checklist.css index 83d719144..8656e4c1e 100644 --- a/working-on/checklist/checklist.css +++ b/working-on/checklist/checklist.css @@ -24,6 +24,7 @@ .provisional fieldset.chkbxrdio-grp legend { /* (0,2,2) */ float: none; + font-weight: 400; font-size: 22px; margin-bottom: 15px; margin-top: 0; @@ -42,7 +43,9 @@ } .provisional [type="radio"] + span, -.provisional [type="checkbox"] + span { /* (0,2,1) */ +.provisional [type="checkbox"] + span, +.provisional [type="radio"] + label, +.provisional [type="checkbox"] + label { /* (0,2,1) */ display: block; margin-left: 36px; } @@ -77,7 +80,9 @@ } .provisional [type="radio"] + span::before, -.provisional [type="checkbox"] + span::before { /* (0,2,2) */ +.provisional [type="radio"] + label::before, +.provisional [type="checkbox"] + span::before, +.provisional [type="checkbox"] + label::before { /* (0,2,2) */ border: 4px solid #fff; box-shadow: 0 0 0 2px #000; content: ""; @@ -89,13 +94,16 @@ width: 36px; } -.provisional [type="radio"] + span::before { /* (0,2,2) */ +.provisional [type="radio"] + span::before, +.provisional [type="radio"] + label::before { /* (0,2,2) */ border-radius: 50%; } /* hover styling */ .provisional [type="radio"]:hover + span::before, -.provisional [type="checkbox"]:hover + span::before, /* (0,3,2) */ +.provisional [type="radio"] + label:hover::before, +.provisional [type="checkbox"]:hover + span::before, +.provisional [type="checkbox"] + label:hover::before, /* (0,3,2) */ .provisional [role="checkbox"][aria-checked="false"]:hover::before { /* (0,3,1) */ background-image: linear-gradient(to bottom, hsl(10, 0%, 90%), hsl(10, 0%, 100%) 50%); } @@ -106,7 +114,9 @@ } .provisional [type="radio"]:focus + span::before, +.provisional [type="radio"]:focus + label::before, .provisional [type="checkbox"]:focus + span::before, +.provisional [type="checkbox"]:focus + label::before, .provisional [role="checkbox"]:focus::before { /* (0,3,2) */ box-shadow: 0 0 0 2px #000, 0 0 8px 4px rgb(59, 153, 252); } @@ -114,7 +124,7 @@ /* the checked style using the :checked pseudo class and aria-checked=true attribute */ .provisional [role="checkbox"][aria-checked="true"]::before { /* (0,3,1) */ background-color: #318000; - border-width: 2px; + border: none; } .provisional [role="checkbox"][aria-checked="true"]::after { /* (0,3,1) */ @@ -134,11 +144,13 @@ transform: translate(-185%, 40%) rotate(45deg); } -.provisional [type="radio"]:checked + span::before { /* (0,3,2) */ +.provisional [type="radio"]:checked + span::before, +.provisional [type="radio"]:checked + label::before { /* (0,3,2) */ background: #444; } -.provisional [type="checkbox"]:checked + span::after { /* (0,3,2) */ +.provisional [type="checkbox"]:checked + span::after, +.provisional [type="checkbox"]:checked + label::after { /* (0,3,2) */ border-color: #333; border-style: solid; border-width: 0 5px 5px 0; diff --git a/working-on/checklist/checklist.html b/working-on/checklist/checklist.html index ebb4b509f..9ee3e403e 100644 --- a/working-on/checklist/checklist.html +++ b/working-on/checklist/checklist.html @@ -42,36 +42,44 @@

Checklist examples

-
+

Example 1

To qualify, you must meet all of the following conditions: (checklist, large box)

-
    +
      • +
    • + +
    -

Example 2

@@ -79,69 +87,74 @@

Example 2

- +
-
+

Example 3

To qualify, you must meet all of the following conditions: (checklist + label, small box)

    • -
- +

Example 4

- To qualify, you must meet all of the following (checkboxes + implicite label, large box) + To qualify, you must meet all of the following conditions: (checkboxes + implicit label, large box) -
    +
    -
-
+

Example 5

- To qualify, you must meet all of the following (checkboxes + implicite label, large box) + To qualify, you must meet all of the following conditions: (checkboxes + implicit label, large box) -
    +
-
+
+
+

Example 6

+
+ + To qualify, you must meet all of the following conditions: (checkboxes + explicit label, large box) + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+

Example 7

+
+ + To qualify, you must meet all of the following conditions: (checkboxes + explicit label, large box) + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+
+
+ +
@@ -70,7 +79,7 @@

Example 1

You are 15 years of age or older when you apply -
  • +