From 2e25d9543afbe3e77d6ccf79d2dda3d30a49549f Mon Sep 17 00:00:00 2001 From: Christian Seel Date: Thu, 11 Sep 2014 15:09:26 +0200 Subject: [PATCH 1/9] fix bug with radio and checkbox validation This was introduced with #5738. The statement was in the wrong line. This fixes a bug where the validation of radios and checkboxes was not recognized in the final validation result. Now it works great :) --- js/foundation/foundation.abide.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/foundation/foundation.abide.js b/js/foundation/foundation.abide.js index 545d828e61..3d78513b35 100644 --- a/js/foundation/foundation.abide.js +++ b/js/foundation/foundation.abide.js @@ -228,8 +228,8 @@ } $(el).triggerHandler('invalid'); } - validations.push(el_validations[0]); } + validations.push(el_validations[0]); } validations = [validations.every(function(valid){return valid;})]; return validations; From cc912fe99ad7b50262b8850c1c3039f092bef002 Mon Sep 17 00:00:00 2001 From: Karlis Venters Date: Tue, 16 Sep 2014 17:50:32 +0300 Subject: [PATCH 2/9] Fix: disabled dropdown buttons should not open Fixes #5370 --- .../dropdown/examples_dropdown_advanced.html | 25 +++++++++++++++ .../dropdown/examples_dropdown_disabled.html | 25 +++++++++++++++ .../examples_dropdown_button_intro.html | 7 +++++ doc/pages/components/dropdown_buttons.html | 31 ++++--------------- js/foundation/foundation.dropdown.js | 4 +++ spec/dropdown/basic.html | 6 +++- spec/dropdown/dropdown.js | 17 ++++++++++ 7 files changed, 89 insertions(+), 26 deletions(-) create mode 100644 doc/includes/dropdown/examples_dropdown_advanced.html create mode 100644 doc/includes/dropdown/examples_dropdown_disabled.html diff --git a/doc/includes/dropdown/examples_dropdown_advanced.html b/doc/includes/dropdown/examples_dropdown_advanced.html new file mode 100644 index 0000000000..f224084f5c --- /dev/null +++ b/doc/includes/dropdown/examples_dropdown_advanced.html @@ -0,0 +1,25 @@ +
+
+

HTML

+{{#markdown}} +```html +
+ + +``` +{{/markdown}} +
+
+

Rendered HTML

+
+ +
+
diff --git a/doc/includes/dropdown/examples_dropdown_disabled.html b/doc/includes/dropdown/examples_dropdown_disabled.html new file mode 100644 index 0000000000..75237d7f37 --- /dev/null +++ b/doc/includes/dropdown/examples_dropdown_disabled.html @@ -0,0 +1,25 @@ +
+
+

HTML

+{{#markdown}} +```html +
+ + +``` +{{/markdown}} +
+
+

Rendered HTML

+
+ +
+
diff --git a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html index f6c2c3b249..8235af7472 100644 --- a/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html +++ b/doc/includes/dropdown_buttons/examples_dropdown_button_intro.html @@ -32,3 +32,10 @@
  • This is another
  • Yet another
    • + +
    + diff --git a/doc/pages/components/dropdown_buttons.html b/doc/pages/components/dropdown_buttons.html index 37f338821f..504ada3841 100644 --- a/doc/pages/components/dropdown_buttons.html +++ b/doc/pages/components/dropdown_buttons.html @@ -33,32 +33,13 @@

    Rendered HTML

    Advanced

    -Additional classes can be added to your dropdown buttons to change their appearance. +Additional classes can be added to your dropdown buttons to change their appearance and behavior. -
    -
    -

    HTML

    -{{#markdown}} -```html -
    - -``` -{{/markdown}} -
    -
    -

    Rendered HTML

    -
    - -
    -
    +{{> examples_dropdown_advanced}} + +Disabled dropdown buttons will not open when tapped: + +{{> examples_dropdown_disabled}} *** diff --git a/js/foundation/foundation.dropdown.js b/js/foundation/foundation.dropdown.js index 09cbe3bf13..a74c39dbcc 100644 --- a/js/foundation/foundation.dropdown.js +++ b/js/foundation/foundation.dropdown.js @@ -8,6 +8,7 @@ settings : { active_class: 'open', + disabled_class: 'disabled', mega_class: 'mega', align: 'bottom', is_hover: false, @@ -147,6 +148,9 @@ }, toggle : function (target) { + if (target.hasClass(this.settings.disabled_class)) { + return; + } var dropdown = this.S('#' + target.data(this.data_attr())); if (dropdown.length === 0) { // No dropdown found, not continuing diff --git a/spec/dropdown/basic.html b/spec/dropdown/basic.html index f112ace1a4..015181114b 100644 --- a/spec/dropdown/basic.html +++ b/spec/dropdown/basic.html @@ -13,4 +13,8 @@

    Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

    -
    \ No newline at end of file + +Disabled Dropdown +
    +

    Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

    +
    diff --git a/spec/dropdown/dropdown.js b/spec/dropdown/dropdown.js index 03b7fc3002..ab4d39ea3a 100644 --- a/spec/dropdown/dropdown.js +++ b/spec/dropdown/dropdown.js @@ -23,6 +23,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays the dropdown on click', function() { @@ -33,6 +34,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(true); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays the content dropdown on click', function() { @@ -43,6 +45,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(true); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('closes an open dropdown when another is clicked', function() { @@ -54,6 +57,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(true); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('closes an open dropdown when the document is clicked elsewhere', function() { @@ -65,6 +69,7 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); it('displays a dropdown even if the dropdown button has deeply nested content', function() { @@ -75,6 +80,18 @@ describe('dropdown:', function() { expect($('#drop1').hasClass('open')).toBe(false); expect($('#drop2').hasClass('open')).toBe(false); expect($('#drop3').hasClass('open')).toBe(true); + expect($('#drop4').hasClass('open')).toBe(false); + }); + + it('does not display a disabled dropdown', function() { + $(document).foundation(); + + $('#drop4link').click(); + + expect($('#drop1').hasClass('open')).toBe(false); + expect($('#drop2').hasClass('open')).toBe(false); + expect($('#drop3').hasClass('open')).toBe(false); + expect($('#drop4').hasClass('open')).toBe(false); }); }); }); From 7ad937937a2a7725759bec7832b1b4247f153947 Mon Sep 17 00:00:00 2001 From: Dimitri Jorge Date: Tue, 16 Sep 2014 19:36:04 +0200 Subject: [PATCH 3/9] Fix joyride error When the joyride is included on the page but hasn't been started yet, the keystrokes events are still catched and we end up with a JS error on `go_next` or `go_prev` functions. This fix checks that the joyride is on screen before calling theses callbacks. --- js/foundation/foundation.joyride.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/foundation/foundation.joyride.js b/js/foundation/foundation.joyride.js index c0731b051c..9bbe3583c1 100644 --- a/js/foundation/foundation.joyride.js +++ b/js/foundation/foundation.joyride.js @@ -111,8 +111,10 @@ this.end(this.settings.abort_on_close); }.bind(this)) - .on("keyup.joyride", function(e) { - if (!this.settings.keyboard) return; + .on("keyup.fndtn.joyride", function(e) { + // Don't do anything if keystrokes are disabled + // or if the joyride is not being shown + if (!this.settings.keyboard || !this.settings.riding) return; switch (e.which) { case 39: // right arrow From d44fd1882d3af7ca92da3432ec7c0c99048f2c61 Mon Sep 17 00:00:00 2001 From: J Potts Date: Fri, 26 Sep 2014 13:49:58 +0100 Subject: [PATCH 4/9] Tabs heavy-handed tabindex setting fix This change is to remove the tabindex attrs instead of setting them to zero on change of tab. The problem with having a zero tabindex (on a div for example) is that Chrome highlights the area on click and includes it in the tabbable items, so removing the tabindex is a better option as it reverts the tab section to its default tab behaviour. --- js/foundation/foundation.tab.js | 10 +++++----- scss/foundation/components/_tabs.scss | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js index 38943c6e5f..d452096062 100644 --- a/js/foundation/foundation.tab.js +++ b/js/foundation/foundation.tab.js @@ -142,9 +142,9 @@ 'aria-selected' : null }); $target.attr({ - 'tabindex' : '0', 'aria-selected' : true - }).focus(); + }).removeAttr('tabindex') + .focus(); } // Hide panels @@ -190,12 +190,12 @@ // window (notably in Chrome). // Clean up multiple attr instances to done once tab.addClass(settings.active_class).triggerHandler('opened'); - tab_link.attr({"aria-selected": "true", tabindex: 0}); + tab_link.attr({"aria-selected": "true"}).removeAttr('tabindex'); siblings.removeClass(settings.active_class) siblings.find('a').attr({"aria-selected": "false", tabindex: -1}); - target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true", tabindex: -1}).end().addClass(settings.active_class).attr('aria-hidden', 'false').find(':first-child').attr('tabindex', 0); + target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true", tabindex: -1}).end().addClass(settings.active_class).attr('aria-hidden', 'false').find(':first-child').removeAttr('tabindex'); settings.callback(tab); - target.children().attr('tab-index', 0); + target.children().removeAttr('tabindex'); target.triggerHandler('toggled', [tab]); tabs.triggerHandler('toggled', [target]); diff --git a/scss/foundation/components/_tabs.scss b/scss/foundation/components/_tabs.scss index 8676e0c47a..99124d2819 100644 --- a/scss/foundation/components/_tabs.scss +++ b/scss/foundation/components/_tabs.scss @@ -121,3 +121,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default; } } } + +[tabindex="-1"] { + outline: none; +} From f09d5801f546ab0bd1ff88a0e31c84c4b5327b87 Mon Sep 17 00:00:00 2001 From: Rafi Benkual Date: Tue, 30 Sep 2014 17:33:47 -0700 Subject: [PATCH 5/9] adds more to accessibility page --- doc/pages/accessibility.html | 118 ++++++++++++++++++++++++++++++----- 1 file changed, 103 insertions(+), 15 deletions(-) diff --git a/doc/pages/accessibility.html b/doc/pages/accessibility.html index c78092f13e..4396bf6dfb 100644 --- a/doc/pages/accessibility.html +++ b/doc/pages/accessibility.html @@ -6,20 +6,49 @@

    Guidelines on this page will help you make your sites more Aside from accessibility features that has been built into Foundation's components, this guide will give you additional best practices towards making your site more accessible. This is a living document and will continue to be updated. -

    Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on GitHub. +

    Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on GitHub.

    *** -## Nested Headings +## Basic Concepts - Overview -When nesting headings `

    -

    `, your primary document header should be an `

    `. Subsequent headings should make logical use of `

    -

    ` such that screen readers can construct a table of contents for your pages. +
      +
    • Images should have text alternative for images. Captions or transcripts should be provided for video and audio. Sufficient color contrast between text and background is important for people with vision impairment or color blindness.
      • +
    • Sites should be navigatable using only a keyboard, providing meaningful hyperlinks, and allowing enough time for users to complete a task.
      • +
    • Make content readable and provide predictable functionality.
      • +
    • Maximizing compatibility with current and future tools (web browsers, assistive technologies, etc.).
      • +
    + +*** +## Keyboard Access + +

    The most common impairments for web users are those with problems seeing, hearing or a physical inability to use a mouse. For that reason, the site must be navigatable by keyboard. Most commonly the tab key is used to tab through the content. For a vision impaired person will have a screenreader installed that reads the content out loud. We used Chromevox to test with. You can find a list of popular screen readers below in the resource list.

    + +### Tab-index + +

    Tab index lets users move forward and backward through the links and form elements on a page. But you can make anything "tabbable" with the tabindex attribute. + +{{#markdown}} +```html +

    …

    + +
    …
    + +
      …
    +``` +{{/markdown}} + +

    As the numbers suggest, tapping on the tab key takes users through anything with the tabindex attribute in order. In HTML5, you can use it on any element. That means you can set priorities quickly. Want to help people get past the same tedious navigation they get on every page? Use tabindex to put navigation last.

    + +

    Tip: When starting out use sets of 10: tabindex="10", tabindex="20", tabindex="30". If you decide to rearrange the order — say, put the third item between the first and second — you don't have to rearrange everything. Just make it tabindex="15".

    -## How to Test a Website’s Keyboard Accessibility -On a desktop or laptop in Firefox, IE, Chrome, or Safari, -click into the browser address bar. +### How to Test a Website’s Keyboard Accessibility -Take your hand off your mouse and use only your keyboard. -Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.) +

    On a desktop or laptop in Firefox, IE, Chrome, or Safari, +click into the browser address bar.

    + +

    Take your hand off your mouse and use only your keyboard. +Using the Tab button, navigate until you’ve reached the link below. (You can use Shift+Tab to navigate back one step.)

    • Right arrow: Next navigation bar item
      • @@ -27,11 +56,70 @@

      Guidelines on this page will help you make your sites more
    • Enter: Activate currently focused item (i.e. navigate to corresponding URL)

    -### Additional resources +*** +### Skip Navigation + +

    Give the person the ability to skip the navigation at the top of the page. If you have menu with 40 links, you can imagine how long it would take someone to tab through all that. Here's one way to do it:

    + +
    +
    +{{#markdown}} +```html + +``` +{{/markdown}} +
    +
    +{{#markdown}} +```css + #skip a { + {position:absolute; + left:-10000px; + top:auto; + width:1px; + height:1px; + overflow:hidden; + } + + #skip a:focus { + position:static; + width:auto; + height:auto; + } +``` +{{/markdown}} +
    +
    + +

    Note: A person who can see may be slightly confused that their focus is off screen. This is a minor compromise for this method.

    + +*** +### Nested Headings + +

    When nesting headings `

    -

    `, your primary document header should be an `

    `. Subsequent headings should make logical use of `

    -

    ` such that screen readers can construct a table of contents for your pages.

    + +*** +## Learn More - +
    +
    +

    Additional resources

    + +
    +
    +

    Tools

    + +
    +
    \ No newline at end of file From d505719fba5a666eb395999324146b77bc3d35ab Mon Sep 17 00:00:00 2001 From: J Potts Date: Wed, 1 Oct 2014 14:46:32 +0100 Subject: [PATCH 6/9] Refining tabindex setting on tab change All first-children of tab-content was having a tabindex assigned on the change of tab. This caused the unnecessary inclusion of non-form items in the tab ordering and wasn't required to make the tab content accessible. This change is to leave all tabindex attrs of the tab-content items alone, but leave the setting of the tabs themselves unaffected. --- js/foundation/foundation.tab.js | 10 +++++----- scss/foundation/components/_tabs.scss | 4 ---- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js index d452096062..b473343f76 100644 --- a/js/foundation/foundation.tab.js +++ b/js/foundation/foundation.tab.js @@ -142,9 +142,9 @@ 'aria-selected' : null }); $target.attr({ + 'tabindex' : '0', 'aria-selected' : true - }).removeAttr('tabindex') - .focus(); + }).focus(); } // Hide panels @@ -190,12 +190,12 @@ // window (notably in Chrome). // Clean up multiple attr instances to done once tab.addClass(settings.active_class).triggerHandler('opened'); - tab_link.attr({"aria-selected": "true"}).removeAttr('tabindex'); + tab_link.attr({"aria-selected": "true", tabindex: 0}); siblings.removeClass(settings.active_class) siblings.find('a').attr({"aria-selected": "false", tabindex: -1}); - target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true", tabindex: -1}).end().addClass(settings.active_class).attr('aria-hidden', 'false').find(':first-child').removeAttr('tabindex'); + target.siblings().removeClass(settings.active_class).attr({"aria-hidden": "true", tabindex: -1}); + target.addClass(settings.active_class).attr('aria-hidden', 'false').removeAttr("tabindex"); settings.callback(tab); - target.children().removeAttr('tabindex'); target.triggerHandler('toggled', [tab]); tabs.triggerHandler('toggled', [target]); diff --git a/scss/foundation/components/_tabs.scss b/scss/foundation/components/_tabs.scss index 99124d2819..8676e0c47a 100644 --- a/scss/foundation/components/_tabs.scss +++ b/scss/foundation/components/_tabs.scss @@ -121,7 +121,3 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default; } } } - -[tabindex="-1"] { - outline: none; -} From 8aa918ec29fdfd4ef55c6812862a301b1a547ff7 Mon Sep 17 00:00:00 2001 From: Rafi Benkual Date: Thu, 2 Oct 2014 10:53:11 -0700 Subject: [PATCH 7/9] adds grid import to reveal for issue 5885 --- scss/foundation/components/_reveal.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/foundation/components/_reveal.scss b/scss/foundation/components/_reveal.scss index 8107b19903..4f6bd486dc 100644 --- a/scss/foundation/components/_reveal.scss +++ b/scss/foundation/components/_reveal.scss @@ -3,6 +3,7 @@ // Licensed under MIT Open Source @import "global"; +@import "grid"; // // @name _reveal.scss From 5314a80d4eb02d78312974c1a6681ac3eff2c267 Mon Sep 17 00:00:00 2001 From: Joe Workman Date: Mon, 6 Oct 2014 10:08:01 -0700 Subject: [PATCH 8/9] display_selector now gets updated --- js/foundation/foundation.slider.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/js/foundation/foundation.slider.js b/js/foundation/foundation.slider.js index 40228dbe10..b2f587f818 100644 --- a/js/foundation/foundation.slider.js +++ b/js/foundation/foundation.slider.js @@ -136,15 +136,15 @@ } $handle.attr('aria-valuenow', value); - // if (settings.input_id != '') { - // $(settings.display_selector).each(function(){ - // if (this.hasOwnProperty('value')) { - // $(this).val(value); - // } else { - // $(this).text(value); - // } - // }); - // } + if (settings.display_selector != '') { + $(settings.display_selector).each(function(){ + if (this.hasOwnProperty('value')) { + $(this).val(value); + } else { + $(this).text(value); + } + }); + } }, From 08376e4d2371f2f325454a92f0ce645fb10c27c6 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Thu, 9 Oct 2014 12:07:21 -0700 Subject: [PATCH 9/9] Keyboard navigation on tabs no longer freezes the page, fixes #5882 --- js/foundation/foundation.tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js index b054f14fa6..7a93e0acd4 100644 --- a/js/foundation/foundation.tab.js +++ b/js/foundation/foundation.tab.js @@ -199,7 +199,7 @@ target.triggerHandler('toggled', [tab]); tabs.triggerHandler('toggled', [target]); - tab_link.on('keydown', interpret_keyup_action ); + tab_link.off('keydown').on('keydown', interpret_keyup_action ); }, data_attr: function (str) {