Skip to content

Commit

Permalink
Merge branch 'master' of github.com:zurb/foundation
Browse files Browse the repository at this point in the history
  • Loading branch information
Arthur committed Oct 9, 2014
2 parents 13aa6b8 + 9d9666b commit 2afc8c8
Show file tree
Hide file tree
Showing 13 changed files with 210 additions and 56 deletions.
25 changes: 25 additions & 0 deletions doc/includes/dropdown/examples_dropdown_advanced.html
View file
@@ -0,0 +1,25 @@
<div class="row">
<div class="large-6 columns">
<h4>HTML</h4>
{{#markdown}}
```html
<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

```
{{/markdown}}
</div>
<div class="large-6 columns">
<h4>Rendered HTML</h4>
<button data-dropdown="drop-advanced" aria-controls="drop-advanced", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
<ul id="drop-advanced" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>
</div>
</div>
25 changes: 25 additions & 0 deletions doc/includes/dropdown/examples_dropdown_disabled.html
View file
@@ -0,0 +1,25 @@
<div class="row">
<div class="large-6 columns">
<h4>HTML</h4>
{{#markdown}}
```html
<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">But they don't show up!</a></li>
</ul>

```
{{/markdown}}
</div>
<div class="large-6 columns">
<h4>Rendered HTML</h4>
<button data-dropdown="drop-disabled" aria-controls="drop-disabled", aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</button><br>
<ul id="drop-disabled" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">But they don't show up!</a></li>
</ul>
</div>
</div>
7 changes: 7 additions & 0 deletions doc/includes/dropdown_buttons/examples_dropdown_button_intro.html
View file
Expand Up @@ -32,3 +32,10 @@
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

<a data-dropdown="drop6" aria-controls="drop6" aria-expanded="false" class="disabled button dropdown">Disabled Dropdown Button</a><br>
<ul id="drop6" data-dropdown-content class="f-dropdown" aria-hidden="true" tabindex="-1" >
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>
118 changes: 103 additions & 15 deletions doc/pages/accessibility.html
View file
Expand Up @@ -6,32 +6,120 @@ <h3 class="subheader">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.

<p class="panel">Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on <a href="https://github.com/zurb/foundation">GitHub</a>.
<p class="panel">Care about accessibility or want to contribute? Submit a Pull Request or get into the conversation on <a href="https://github.com/zurb/foundation">GitHub</a>.</p>

***
## Nested Headings
## Basic Concepts - Overview

When nesting headings `<h1> - <h6>`, your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2> - <h6>` such that screen readers can construct a table of contents for your pages.
<ul>
<li>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.</li>
<li>Sites should be navigatable using only a keyboard, providing meaningful hyperlinks, and allowing enough time for users to complete a task.</li>
<li>Make content readable and provide predictable functionality.</li>
<li>Maximizing compatibility with current and future tools (web browsers, assistive technologies, etc.).</li>
</ul>

***
## Keyboard Access

<p>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 <a href="http://en.wikipedia.org/wiki/Screen_reader">screenreader</a> installed that reads the content out loud. We used <a href="http://www.chromevox.com/">Chromevox</a> to test with. You can find a list of popular screen readers below in the resource list.</p>

### Tab-index

<p>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
<h2 tabindex="1">…</h2>

<article tabindex="2">…</article>

<ul tabindex="3">…</ul>
```
{{/markdown}}

<p>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.</p>

<p><strong>Tip:</strong> 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".</p>

## 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.)
<p>On a desktop or laptop in Firefox, IE, Chrome, or Safari,
click into the browser address bar.</p>

<p>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.)</p>

<ul>
<li>Right arrow: Next navigation bar item</li>
<li>Left arrow: Previous navigation bar item</li>
<li>Enter: Activate currently focused item (i.e. navigate to corresponding URL)</li>
</ul>

### Additional resources
***
### Skip Navigation

<p>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:</p>

<div class="row">
<div class="medium-7 columns">
{{#markdown}}
```html
<div id="skip"><a href="#content">Skip to Main Content</a></div>
```
{{/markdown}}
</div>
<div class="medium-5 columns">
{{#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}}
</div>
</div>

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

***
### Nested Headings

<p>When nesting headings `<h1> - <h6>`, your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2> - <h6>` such that screen readers can construct a table of contents for your pages.</p>

***
## Learn More

<ul class="side-nav" role="navigation" title="Link List">
<li role="menuitem"><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<li role="menuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
<li role="menuitem"><a href="http://achecker.ca/checker/index.php">AChecker Web Accessibility Checker</a></li>
<li role="menuitem"><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
</ul>
<div class="row">
<div class="medium-6 columns">
<h4>Additional resources</h4>
<ul class="side-nav" role="navigation" title="Link List">
<li role="menuitem"><a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/">WCAG 2.0 Guide</a></li>
<li role="menuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">MDN accessibility documentation</a></li>
<li role="menuitem"><a href="http://achecker.ca/checker/index.php">AChecker Web Accessibility Checker</a></li>
<li role="menuitem"><a href="http://www.w3.org/WAI/intro/accessibility.php">w3.org Introduction to Accessibility</a></li>
<li role="menuitem"><a href="http://www.section508.gov/">Section 508 Government Requirements</a></li>
<li role="menuitem"><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
</ul>
</div>
<div class="medium-6 columns">
<h4>Tools</h4>
<ul class="side-nav" role="navigation" title="Link List">
<li role="menuitem"><a href="http://www.chromevox.com/">Chromevox screnreader plugin for Chrome</a></li>
<li role="menuitem"><a href="http://www.freedomscientific.com/Products/Blindness/Jaws">Jaws screnreader plugin for Windows</a></li>
<li role="menuitem"><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
<li role="menuitem"><a href="http://webaim.org/">Accessibilty Certification and Training</a></li>
</ul>
</div>
</div>
31 changes: 6 additions & 25 deletions doc/pages/components/dropdown_buttons.html
View file
Expand Up @@ -33,32 +33,13 @@ <h4>Rendered HTML</h4>

<h2>Advanced</h2>

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.

<div class="row">
<div class="large-6 columns">
<h4>HTML</h4>
{{#markdown}}
```html
<button data-dropdown="drop" aria-controls="drop", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
<ul id="drop" data-dropdown-content class="f-dropdown" role="menu", aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>
```
{{/markdown}}
</div>
<div class="large-6 columns">
<h4>Rendered HTML</h4>
<button data-dropdown="dropE" aria-controls="dropE", aria-expanded="false" class="large alert round button dropdown">Dropdown Button</button><br>
<ul id="dropE" data-dropdown-content class="f-dropdown" role="menu" aria-hidden="false" tabindex="-1">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>
</div>
</div>
{{> examples_dropdown_advanced}}

Disabled dropdown buttons will not open when tapped:

{{> examples_dropdown_disabled}}

***

Expand Down
2 changes: 1 addition & 1 deletion js/foundation/foundation.abide.js
View file
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions js/foundation/foundation.dropdown.js
View file
Expand Up @@ -8,6 +8,7 @@

settings : {
active_class: 'open',
disabled_class: 'disabled',
mega_class: 'mega',
align: 'bottom',
is_hover: false,
Expand Down Expand Up @@ -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
Expand Down
6 changes: 4 additions & 2 deletions js/foundation/foundation.joyride.js
View file
Expand Up @@ -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
Expand Down
18 changes: 9 additions & 9 deletions js/foundation/foundation.slider.js
View file
Expand Up @@ -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);
}
});
}

},

Expand Down
6 changes: 3 additions & 3 deletions js/foundation/foundation.tab.js
View file
Expand Up @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions scss/foundation/components/_reveal.scss
View file
Expand Up @@ -3,6 +3,7 @@
// Licensed under MIT Open Source

@import "global";
@import "grid";

//
// @name _reveal.scss
Expand Down
6 changes: 5 additions & 1 deletion spec/dropdown/basic.html
View file
Expand Up @@ -13,4 +13,8 @@
</a>
<div id="drop3" data-dropdown-content class="f-dropdown content">
<p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>
</div>
<a id="drop4link" href="#" class="disabled" data-dropdown="drop4">Disabled Dropdown</a>
<div id="drop4" data-dropdown-content class="f-dropdown content">
<p>Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!</p>
</div>
17 changes: 17 additions & 0 deletions spec/dropdown/dropdown.js
View file
Expand Up @@ -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() {
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -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() {
Expand All @@ -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);
});
});
});

0 comments on commit 2afc8c8

Please sign in to comment.