From 9e304a18af6ec0d8e88fe68ac6a70edc8ea21cc7 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sat, 18 Mar 2017 07:07:13 -0500 Subject: [PATCH 001/105] update button example --- examples/button/button.html | 12 +++++++++++- examples/button/images/mute.svg | 30 ++++++++++++++++++++++++++++++ examples/button/js/button.js | 7 +++++-- 3 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 examples/button/images/mute.svg diff --git a/examples/button/button.html b/examples/button/button.html index f531b05540..961e5f80e9 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -62,12 +62,22 @@

Button Examples

Example

+ + + + +

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

- Mute + + Mute + +
diff --git a/examples/button/images/mute.svg b/examples/button/images/mute.svg new file mode 100644 index 0000000000..d0123a3613 --- /dev/null +++ b/examples/button/images/mute.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/button/js/button.js b/examples/button/js/button.js index 625d928164..13cff7ea74 100644 --- a/examples/button/js/button.js +++ b/examples/button/js/button.js @@ -9,6 +9,9 @@ * Author: Jon Gunderson */ +var ICON_MUTE_URL = '#icon-mute'; +var ICON_SOUND_URL = '#icon-sound'; + function init () { // Create variables for the various buttons var actionButton = document.getElementById('action'); @@ -68,12 +71,12 @@ function toggleButtonState (event) { var icon = button.getElementsByTagName('use')[0]; var currentIconState = icon.getAttribute('xlink:href'); - var newIconState = '#icon-mute'; + var newIconState = ICON_MUTE_URL; // If aria-pressed is set to true, set newState to false if (currentState === 'true') { newState = 'false'; - newIconState = '#icon-sound'; + newIconState = ICON_SOUND_URL; } // Set the new aria-pressed state on the button From 76ff0edc76cbc81ffb383ba11a4a2daff1ccdf9d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 27 Mar 2017 14:49:34 -0500 Subject: [PATCH 002/105] added auto rebase --- .gitconfig | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .gitconfig diff --git a/.gitconfig b/.gitconfig new file mode 100644 index 0000000000..9a1cd9d415 --- /dev/null +++ b/.gitconfig @@ -0,0 +1,3 @@ +[branch] + autosetuprebase = always + From 14923a1d1d28a780165bf5712aaabeddadb39483 Mon Sep 17 00:00:00 2001 From: Jin Zhou Date: Mon, 25 Jun 2018 16:43:03 -0500 Subject: [PATCH 003/105] icon change --- examples/toolbar/css/menuButton.css | 4 +- examples/toolbar/css/toolbar.css | 78 ++++++++++++++++++----------- examples/toolbar/js/toolbar.js | 7 +++ examples/toolbar/toolbar.html | 52 +++++++++++++------ 4 files changed, 95 insertions(+), 46 deletions(-) diff --git a/examples/toolbar/css/menuButton.css b/examples/toolbar/css/menuButton.css index fd33fb7120..e1f6921f2d 100644 --- a/examples/toolbar/css/menuButton.css +++ b/examples/toolbar/css/menuButton.css @@ -15,7 +15,7 @@ ul[role="menu"] { z-index: 1; } -ul[role="menu"] li { +ul[role="menu"] li, ul[role='toolbar'] li{ list-style: none; } @@ -32,4 +32,4 @@ ul[role="menu"] li { [role="menuitem"]:focus, [role="menuitem"]:hover { background-color: #FFFFFF; -} +} \ No newline at end of file diff --git a/examples/toolbar/css/toolbar.css b/examples/toolbar/css/toolbar.css index 77dffcc8f8..8f88f375ea 100644 --- a/examples/toolbar/css/toolbar.css +++ b/examples/toolbar/css/toolbar.css @@ -1,49 +1,67 @@ .annotate { - color: #366ED4; - font-style: italic; + color: #366ED4; + font-style: italic; } .toolbar { - border-left: 1px solid #aaa; - margin-top: 10px; - font-size: 0; + margin-top: 10px; + font-size: 0; + border-left: 1px solid black; +} +li{ +margin: 0; } - .toolbar-item { - display: inline-block; - padding: 0.5em 1em; - - background: #eee; - border: 1px solid #aaa; - border-left: none; - color: blue; - font-size: 16px; - line-height: 1.5em; - vertical-align: top; + border: 1px solid black; + display: inline-block; + padding: 0.5em 1em; + /* width:5em; */ + text-align: center; + background: rgb(255, 255, 255); + border-left: none; + color: rgb(0, 0, 0); + font-size: 16px; + line-height: 1.5em; + vertical-align: top; } .toolbar-item.selected { - background-color: #ccc; - color: black; - font-weight: bold; + background-color: rgb(158, 158, 158); + color: rgb(255, 255, 255); + font-weight: bold; } .menu-wrapper { - display: inline-block; - font-size: 16px; +display: inline-block; +font-size: 16px; } .menu-button { - padding-right: 2.5em; - position: relative; +padding-right: 2.5em; +position: relative; } .menu-button::after { - content: " "; - border-left: 0.4em solid transparent; - border-right: 0.4em solid transparent; - border-top: 0.4em solid black; - position: absolute; - right: 1em; - top: 1.1em; +content: " "; +border-left: 0.4em solid transparent; +border-right: 0.4em solid transparent; +border-top: 0.4em solid black; +position: absolute; +right: 1em; +top: 1.1em; } +.menu-button:focus:after { + color: white; +} + +#textarea1 { +padding: .5em; +border: 1px solid black; +height: 400px; +width: 70%; +font-size: medium; +font-family: sans-serif; +} + + + diff --git a/examples/toolbar/js/toolbar.js b/examples/toolbar/js/toolbar.js index 783be064b8..eebc1590df 100644 --- a/examples/toolbar/js/toolbar.js +++ b/examples/toolbar/js/toolbar.js @@ -62,6 +62,12 @@ aria.Toolbar.prototype.checkFocusChange = function (evt) { this.selectedItem.click(); } break; + case aria.KeyCode.HOME: + this.setFocusToFirstItem(); + break; + case aria.KeyCode.END: + this.setFocusToLast(); + break; } }; @@ -102,6 +108,7 @@ aria.Toolbar.prototype.selectItem = function (element) { aria.Utils.addClass(element, 'selected'); element.setAttribute('tabindex', '0'); this.selectedItem = element; + document.getElementById('textarea1').style.fontWeight = element.value; }; /** diff --git a/examples/toolbar/toolbar.html b/examples/toolbar/toolbar.html index 44838fa057..ce7fffee49 100644 --- a/examples/toolbar/toolbar.html +++ b/examples/toolbar/toolbar.html @@ -7,6 +7,7 @@ + @@ -45,31 +46,54 @@

Example

@@ -256,4 +280,4 @@

HTML Source Code

Toolbar Design Pattern in WAI-ARIA Authoring Practices 1.1 - + \ No newline at end of file From 0df77d214b8b27f7d9fd99ca481e5cfa848680d6 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Wed, 27 Jun 2018 12:58:35 -0500 Subject: [PATCH 004/105] removed gitcongif file --- .gitconfig | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .gitconfig diff --git a/.gitconfig b/.gitconfig deleted file mode 100644 index 9a1cd9d415..0000000000 --- a/.gitconfig +++ /dev/null @@ -1,3 +0,0 @@ -[branch] - autosetuprebase = always - From 4eb38fbe2bc1f9673ed220aee3dee79bacbc5528 Mon Sep 17 00:00:00 2001 From: Jin Zhou Date: Wed, 27 Jun 2018 14:01:10 -0500 Subject: [PATCH 005/105] some update --- .../menubar/menubar-2/js/MenubarAction.js | 2 +- .../menubar/menubar-2/js/MenubarItemAction.js | 2 +- examples/toolbar/js/main.js | 1 + examples/toolbar/js/toolbar.js | 155 ++++++++++-------- examples/toolbar/js/toolbarItem.js | 28 ++++ examples/toolbar/toolbar.html | 16 +- 6 files changed, 128 insertions(+), 76 deletions(-) create mode 100644 examples/toolbar/js/toolbarItem.js diff --git a/examples/menubar/menubar-2/js/MenubarAction.js b/examples/menubar/menubar-2/js/MenubarAction.js index 49a1db0532..81ac1feaf9 100644 --- a/examples/menubar/menubar-2/js/MenubarAction.js +++ b/examples/menubar/menubar-2/js/MenubarAction.js @@ -65,7 +65,7 @@ MenubarAction.prototype.init = function (actionManager) { var menubarItem, childElement, menuElement, textContent, numItems; this.actionManager = actionManager; - + console.log(this.domNode); this.domNode.setAttribute('role', 'menubar'); // Traverse the element children of menubarNode: configure each with diff --git a/examples/menubar/menubar-2/js/MenubarItemAction.js b/examples/menubar/menubar-2/js/MenubarItemAction.js index 12006ee1c5..948d80e183 100644 --- a/examples/menubar/menubar-2/js/MenubarItemAction.js +++ b/examples/menubar/menubar-2/js/MenubarItemAction.js @@ -58,7 +58,7 @@ var MenubarItemAction = function (domNode, menuObj) { MenubarItemAction.prototype.init = function () { this.domNode.tabIndex = -1; - + console.log(this.domNode); this.domNode.addEventListener('keydown', this.handleKeydown.bind(this)); this.domNode.addEventListener('click', this.handleClick.bind(this)); this.domNode.addEventListener('focus', this.handleFocus.bind(this)); diff --git a/examples/toolbar/js/main.js b/examples/toolbar/js/main.js index 8a09ec9f45..e6f18f9e1c 100644 --- a/examples/toolbar/js/main.js +++ b/examples/toolbar/js/main.js @@ -10,4 +10,5 @@ window.addEventListener('load', function () { var ex1 = document.getElementById('ex1'); var ex1Toolbar = new aria.Toolbar(ex1.querySelector('[role="toolbar"]')); + ex1Toolbar.init(); }); diff --git a/examples/toolbar/js/toolbar.js b/examples/toolbar/js/toolbar.js index eebc1590df..0bf85db071 100644 --- a/examples/toolbar/js/toolbar.js +++ b/examples/toolbar/js/toolbar.js @@ -13,76 +13,83 @@ var aria = aria || {}; * @desc * Toolbar object representing the state and interactions for a toolbar widget * - * @param toolbarNode + * @param domNode * The DOM node pointing to the toolbar */ -aria.Toolbar = function (toolbarNode) { - this.toolbarNode = toolbarNode; - this.items = this.toolbarNode.querySelectorAll('.toolbar-item'); - this.selectedItem = this.toolbarNode.querySelector('.selected'); - this.registerEvents(); +aria.Toolbar = function (domNode) { + this.domNode = domNode; + this.items = this.domNode.querySelectorAll('.toolbar-item'); + this.selectedItem = this.domNode.querySelector('.selected'); + if(this.items.length>0){ + this.firstItem = this.items[0]; + this.lastItem = this.items[this.items.length-1]; + } + console.log(this.domNode); + console.log(this.items); + // this.registerEvents(); }; -/** - * @desc - * Register events for the toolbar interactions - */ -aria.Toolbar.prototype.registerEvents = function () { - this.toolbarNode.addEventListener('keydown', this.checkFocusChange.bind(this)); - this.toolbarNode.addEventListener('click', this.checkClickItem.bind(this)); -}; -/** - * @desc - * Handle various keyboard controls; LEFT/RIGHT will shift focus; DOWN - * activates a menu button if it is the focused item. - * - * @param evt - * The keydown event object - */ -aria.Toolbar.prototype.checkFocusChange = function (evt) { - var key = evt.which || evt.keyCode; - var nextIndex, nextItem; +// /** +// * @desc +// * Register events for the toolbar interactions +// */ +// aria.Toolbar.prototype.registerEvents = function () { +// this.toolbarNode.addEventListener('keydown', this.checkFocusChange.bind(this)); +// this.toolbarNode.addEventListener('click', this.checkClickItem.bind(this)); +// }; - switch (key) { - case aria.KeyCode.LEFT: - case aria.KeyCode.RIGHT: - nextIndex = Array.prototype.indexOf.call(this.items, this.selectedItem); - nextIndex = key === aria.KeyCode.LEFT ? nextIndex - 1 : nextIndex + 1; - nextIndex = Math.max(Math.min(nextIndex, this.items.length - 1), 0); +// /** +// * @desc +// * Handle various keyboard controls; LEFT/RIGHT will shift focus; DOWN +// * activates a menu button if it is the focused item. +// * +// * @param evt +// * The keydown event object +// */ +// aria.Toolbar.prototype.checkFocusChange = function (evt) { +// var key = evt.which || evt.keyCode; +// var nextIndex, nextItem; - nextItem = this.items[nextIndex]; - this.selectItem(nextItem); - this.focusItem(nextItem); - break; - case aria.KeyCode.DOWN: - // if selected item is menu button, pressing DOWN should act like a click - if (aria.Utils.hasClass(this.selectedItem, 'menu-button')) { - evt.preventDefault(); - this.selectedItem.click(); - } - break; - case aria.KeyCode.HOME: - this.setFocusToFirstItem(); - break; - case aria.KeyCode.END: - this.setFocusToLast(); - break; - } -}; +// switch (key) { +// case aria.KeyCode.LEFT: + +// case aria.KeyCode.RIGHT: +// // nextIndex = Array.prototype.indexOf.call(this.items, this.selectedItem); +// // nextIndex = key === aria.KeyCode.LEFT ? nextIndex - 1 : nextIndex + 1; +// // nextIndex = Math.max(Math.min(nextIndex, this.items.length - 1), 0); -/** - * @desc - * Selects a toolbar item if it is clicked - * - * @param evt - * The click event object - */ -aria.Toolbar.prototype.checkClickItem = function (evt) { - if (aria.Utils.hasClass(evt.target, 'toolbar-item')) { - this.selectItem(evt.target); - } -}; +// // this.selectItem(nextItem); +// this.focusItem(nextItem); +// break; +// case aria.KeyCode.DOWN: +// // if selected item is menu button, pressing DOWN should act like a click +// if (aria.Utils.hasClass(this.selectedItem, 'menu-button')) { +// evt.preventDefault(); +// this.selectedItem.click(); +// } +// break; +// case aria.KeyCode.HOME: +// this.setFocusToFirstItem(); +// break; +// case aria.KeyCode.END: +// this.setFocusToLast(); +// break; +// } +// }; + +// /** +// * @desc +// * Selects a toolbar item if it is clicked +// * +// * @param evt +// * The click event object +// */ +// aria.Toolbar.prototype.checkClickItem = function (evt) { +// if (aria.Utils.hasClass(evt.target, 'toolbar-item')) { +// this.selectItem(evt.target); +// } +// }; /** * @desc @@ -92,7 +99,8 @@ aria.Toolbar.prototype.checkClickItem = function (evt) { * The item to deselect */ aria.Toolbar.prototype.deselectItem = function (element) { - aria.Utils.removeClass(element, 'selected'); + // aria.Utils.removeClass(element, 'selected'); + element.classList.remove('selected'); element.setAttribute('tabindex', '-1'); }; @@ -105,10 +113,10 @@ aria.Toolbar.prototype.deselectItem = function (element) { */ aria.Toolbar.prototype.selectItem = function (element) { this.deselectItem(this.selectedItem); - aria.Utils.addClass(element, 'selected'); + // aria.Utils.addClass(element, 'selected'); + element.classList.add('selected'); element.setAttribute('tabindex', '0'); this.selectedItem = element; - document.getElementById('textarea1').style.fontWeight = element.value; }; /** @@ -119,5 +127,20 @@ aria.Toolbar.prototype.selectItem = function (element) { * The item to focus on */ aria.Toolbar.prototype.focusItem = function (element) { - element.focus(); + console.log(this.items); + for(var i=0;iExample