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/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. + + +*** +## 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.)

    -### 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 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.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; 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/js/foundation/foundation.joyride.js b/js/foundation/foundation.joyride.js index f3c06d0547..a67505d38f 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 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); + } + }); + } }, diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js index 7f6c74df6e..7a93e0acd4 100644 --- a/js/foundation/foundation.tab.js +++ b/js/foundation/foundation.tab.js @@ -193,13 +193,13 @@ 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').attr('tabindex', 0); + 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().attr('tab-index', 0); 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) { 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 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); }); }); });