From c610a7dd77e1c0f5813c39e9bf5237ba7d47004d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:02:08 -0600 Subject: [PATCH 1/9] updated example per #189 issue --- examples/button/button.html | 179 ++++++++++++++++++------------------ 1 file changed, 89 insertions(+), 90 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index fb99010d47..e56952935f 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -12,20 +12,13 @@

Button Examples

-

- This example page requires updates per - issue 189. - Please provide any additional feedback in this issue. -

-

- Creating Buttons using role=button -

- Authoring Practice Design Patten for Button + Creating Buttons using role=button following the Button Design Patten.

+

- Note: When using HTML, use the <button> element. It is + Note: When using HTML, use the button element. It is recommended that authors not re-purpose other elements to create buttons.

@@ -50,7 +43,7 @@

Button Examples

- Push button + Push button div element with text @@ -77,7 +70,7 @@

Button Examples

- Toggle button + Toggle button div element with text @@ -103,7 +96,7 @@

Button Examples

- Push button + Push button tabindex="0" element @@ -125,82 +118,73 @@

Button Examples

+ + + + +
+

Keyboard Support

+ + + - - + + + + + + + + + + +
Non compliant - a element with href="#" - KeyFunction
Space or enterActivate or toggle button
+
+ +
+

ARIA Roles, Properties and States

+ + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
buttonspan, div - Show alert +
    +
  • Identify element with the button behavior
    • +
aria-pressedspan
    -
  • It is a bad practice because it does not support space bar for button - activiation.
    • +
  • Identify element with the toggle button behavior
- -

Keyboard Support

- - - - - - - - - - - - - - -
KeyFunction
Space or enterActivate or toggle button
- -

ARIA Roles, Properties and States

- - - - - - - - - - - - - - - - - - - - - - - - -
RoleProperty/StateComponentUsage
buttonspan or div -
    -
  • Identify element with the button behavior
    • -
-
aria-pressedspan -
    -
  • Identify element with the toggle button behavior
    • -
-
+
-

Source Code

- - + + +
+

HTML Source Code

+ +

First Example: Push button

+ + + + + +

Second Example: Toggle button

+ +
+ + -

First Example: Push button

- -

Second Example: Toggle button

-
-

Third Example: Push button

-
-

Non-compliant Example

-
+

Third Example: Push button

+ +
+ - +
+
+ - From aaad080936e5d3672af23f9b4883a7b362467938 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:35:08 -0600 Subject: [PATCH 2/9] updated menu example --- examples/button/button.html | 236 +++++++++++++++++++++--------------- 1 file changed, 135 insertions(+), 101 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index e56952935f..a9881885e1 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -15,6 +15,9 @@

Button Examples

Creating Buttons using role=button following the Button Design Patten. + The following examples are composed using a div and span elements + functioning as a native button element, and an a element that functions as a + toggle button.

@@ -22,105 +25,103 @@

Button Examples

recommended that authors not re-purpose other elements to create buttons.

-

Button Examples

+
+

Examples

-

- The following examples are composed by a native <button> element, a <div> - functioning as a native button, and a <span> element that functions as a - toggle button. -

-
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeTechniqueButtonAccessibility Feature
Push button - div element with text - -
Print Page
- 		-
    -
  • - div element with role="button". -
    • -
  • - div element has onclick event to handle mouse clicks. -
    • -
  • - div element has onkeydown event to handle keyboard - support. -
    • -
  • - div element has tabindex="0" to become part of tab order - of the page. -
    • -
-
Toggle button - div element with text - - Mute - -
    -
  • - div element with role="button". -
    • -
  • - div element has onclick event to handle mouse clicks. -
    • -
  • - div element has onkeydown event to handle keyboard - support. -
    • -
  • - Aria property/status from aria-pressed attribute. -
    • -
-
Push button - tabindex="0" element - - Show alert - -
    -
  • - a element has onclick event to handle mouse clicks. -
    • -
  • - a element has onkeydown event to handle keyboard support. -
    • -
  • - a element has tabindex="0" to become part of tab order of - the page. -
    • -
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeElementButtonAccessibility Feature
Push button + div + +
Print Page
+ 		+
    +
  • + div element with role="button". +
    • +
  • + div element has onclick event to handle mouse clicks. +
    • +
  • + div element has onkeydown event to handle keyboard + support. +
    • +
  • + div element has tabindex="0" to become part of tab order + of the page. +
    • +
+
Toggle button + span + + Mute + +
    +
  • + span element with role="button". +
    • +
  • + span element has onclick event to handle mouse clicks. +
    • +
  • + span element has onkeydown event to handle keyboard + support. +
    • +
  • + Toggle status using the aria-pressed attribute. +
    • +
+
Push button + a + + Show alert + +
    +
  • + a element has onclick event to handle mouse clicks. +
    • +
  • + a element has onkeydown event to handle keyboard support. +
    • +
  • + a element has tabindex="0" to become part of tab order of + the page. +
    • +
+
+
+ +

Keyboard Support

@@ -157,20 +158,53 @@

ARIA Roles, Properties and States

button - span, div + + div, span, or a + + +
    +
  • role="button" identifies the element as a button widget.
    • +
  • + Accessible name for the button is defined by the text content of the + element. +
    • +
+ + + + + + tabindex="0" + + + div, span, or a + + +
    +
  • + Makes the element keyboard focusable and part of tab order of the + page. +
    • +
+ + + + + aria-pressed="false" + a
    -
  • Identify element with the button behavior
    • +
  • Identify element with the toggle button behavior and toggled off
- aria-pressed - span + aria-pressed="true" + a
    -
  • Identify element with the toggle button behavior
    • +
  • Identify element with the toggle button behavior and toggled on
From 7a46055fe7dfec2360eae6d0d4f8d16749fed613 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:43:14 -0600 Subject: [PATCH 3/9] updated bug --- examples/button/button.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index a9881885e1..db7fc3ad78 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -173,9 +173,9 @@

ARIA Roles, Properties and States

- + tabindex="0" - + div, span, or a From 4bee7820c7aa3db0fa1cd4ca691eec0584e4b0c5 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:45:37 -0600 Subject: [PATCH 4/9] updated --- examples/button/button.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index db7fc3ad78..696a4671ee 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -15,8 +15,8 @@

Button Examples

Creating Buttons using role=button following the Button Design Patten. - The following examples are composed using a div and span elements - functioning as a native button element, and an a element that functions as a + The following examples are composed using a div and a elements + functioning as a native button element, and an span element that functions as a toggle button.

@@ -191,7 +191,7 @@

ARIA Roles, Properties and States

aria-pressed="false" - a + span
  • Identify element with the toggle button behavior and toggled off
    • @@ -201,7 +201,7 @@

    ARIA Roles, Properties and States

    aria-pressed="true" - a + span
    • Identify element with the toggle button behavior and toggled on
      • From 3a171c29ee2c8aa5ca33ac3146797a033cd4e5c3 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:46:36 -0600 Subject: [PATCH 5/9] update --- examples/button/button.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index 696a4671ee..7f125f0e5a 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -159,7 +159,7 @@

      ARIA Roles, Properties and States

      button - div, span, or a + div, span, a
        @@ -177,7 +177,7 @@

        ARIA Roles, Properties and States

        tabindex="0" - div, span, or a + div, span, a
          From 9ce653b0f010992d395c365fd01c4a502da4991a Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:48:04 -0600 Subject: [PATCH 6/9] update --- examples/button/button.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/button/button.html b/examples/button/button.html index 7f125f0e5a..b804605001 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -36,7 +36,7 @@

          Examples

          Type Element - Button + Button Accessibility Feature From c5481e3c1732c6d0349cfbd55c6593a43f242168 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 14:49:32 -0600 Subject: [PATCH 7/9] update --- examples/button/button.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/button/button.html b/examples/button/button.html index b804605001..3c19679f39 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -194,7 +194,7 @@

          ARIA Roles, Properties and States

          span
            -
          • Identify element with the toggle button behavior and toggled off
            • +
          • Identify span element with the toggle button behavior as toggled off
          @@ -204,7 +204,7 @@

          ARIA Roles, Properties and States

          span
            -
          • Identify element with the toggle button behavior and toggled on
            • +
          • Identify span element with the toggle button behavior as toggled on
          From bcbc0627b53a3e478f7bdc17a452eec7fd1dd2e8 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 19:50:28 -0600 Subject: [PATCH 8/9] fixed description --- examples/button/button.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/button/button.html b/examples/button/button.html index 3c19679f39..0119793843 100644 --- a/examples/button/button.html +++ b/examples/button/button.html @@ -16,7 +16,7 @@

          Button Examples

          Creating Buttons using role=button following the Button Design Patten. The following examples are composed using a div and a elements - functioning as a native button element, and an span element that functions as a + functioning as a native button element, and a span element that functions as a toggle button.

          From fc37be01095d6477926b35ea2dc72e023f06613c Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 11 Dec 2016 21:00:14 -0600 Subject: [PATCH 9/9] added copyright to JS code --- examples/button/js/button.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/examples/button/js/button.js b/examples/button/js/button.js index b3b7ddfa9c..56356ea747 100644 --- a/examples/button/js/button.js +++ b/examples/button/js/button.js @@ -1,3 +1,14 @@ +/* +* This content is licensed according to the W3C Software License at +* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document +* +* File: button.js +* +* Desc: JS code for Button Design Pattersn +* +* Author: Jon Gunderson +*/ + function init () { // Create variables for the various buttons var printButton = document.getElementById('print');