From: Rafi Date: Fri, 9 Oct 2015 18:53:31 +0000 (-0700) Subject: Revert "Better accessibility for reveal" X-Git-Tag: v6.0.0~30^2^2 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F6929%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Revert "Better accessibility for reveal" --- diff --git a/doc/includes/reveal/examples_reveal_ajax.html b/doc/includes/reveal/examples_reveal_ajax.html index 5535f9311..788ebc5b0 100644 --- a/doc/includes/reveal/examples_reveal_ajax.html +++ b/doc/includes/reveal/examples_reveal_ajax.html @@ -4,7 +4,7 @@ Click Me For A Modal - + Click Me For A Modal ``` diff --git a/doc/includes/reveal/examples_reveal_basic.html b/doc/includes/reveal/examples_reveal_basic.html index 75d5da172..111762454 100644 --- a/doc/includes/reveal/examples_reveal_basic.html +++ b/doc/includes/reveal/examples_reveal_basic.html @@ -6,7 +6,7 @@

Awesome. I have it.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

- + × ``` {{/markdown}} diff --git a/doc/includes/reveal/examples_reveal_basic_rendered.html b/doc/includes/reveal/examples_reveal_basic_rendered.html index 8acb79e2b..f309ad292 100644 --- a/doc/includes/reveal/examples_reveal_basic_rendered.html +++ b/doc/includes/reveal/examples_reveal_basic_rendered.html @@ -4,5 +4,5 @@

Awesome. I have it.

Your couch. It is mine.

I'm a cool paragraph that lives inside of an even cooler modal. Wins!

- + × \ No newline at end of file diff --git a/doc/includes/reveal/examples_reveal_data.html b/doc/includes/reveal/examples_reveal_data.html index feae5f3fb..b24fe16d7 100644 --- a/doc/includes/reveal/examples_reveal_data.html +++ b/doc/includes/reveal/examples_reveal_data.html @@ -1,5 +1,5 @@ {{#markdown}} ```html -Click Me For A Modal +Click Me For A Modal ``` {{/markdown}} diff --git a/doc/includes/reveal/examples_reveal_modal_examples.html b/doc/includes/reveal/examples_reveal_modal_examples.html index 1428723fe..47e6a7b82 100644 --- a/doc/includes/reveal/examples_reveal_modal_examples.html +++ b/doc/includes/reveal/examples_reveal_modal_examples.html @@ -10,13 +10,13 @@

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

- + × - + × ``` diff --git a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html index a0f84d516..9a23827eb 100644 --- a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html +++ b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html @@ -7,13 +7,13 @@

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal...

- + × - + × \ No newline at end of file diff --git a/doc/includes/reveal/examples_reveal_open_close.html b/doc/includes/reveal/examples_reveal_open_close.html index 6ca6c3e9b..1de47508a 100644 --- a/doc/includes/reveal/examples_reveal_open_close.html +++ b/doc/includes/reveal/examples_reveal_open_close.html @@ -14,15 +14,15 @@ $('#myModal').foundation('reveal', 'close');

Or you can call one right after the other:

{{#markdown}} ```html -
+
I'm the firstborn! - Click me! + Click me!
-
+
I'm the secondborn! - Close modal + Close modal
- Click me! + Click me! ``` {{/markdown}} diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html index 3cab9c765..35c0cc8f0 100644 --- a/doc/pages/components/orbit.html +++ b/doc/pages/components/orbit.html @@ -221,9 +221,7 @@ $(document).foundation({ variable_height: false, // Does the slider have variable height content? swipe: true, before_slide_change: noop, // Execute a function before the slide changes - after_slide_change: noop, // Execute a function after the slide changes - prev_text: 'Previous slide', // (Title) text for arrow to previous slide - next_text: 'Next slide' // (Title) text for arrow to next slide + after_slide_change: noop // Execute a function after the slide changes } }); ``` diff --git a/doc/pages/components/reveal.html b/doc/pages/components/reveal.html index cb8d8eae2..6e1582ae0 100644 --- a/doc/pages/components/reveal.html +++ b/doc/pages/components/reveal.html @@ -125,8 +125,7 @@ $(document).on('closed.fndtn.reveal', '[data-reveal]', function () { ## Accessibility -

This component is not yet fully accessible. While it is usable via the keyboard, it has to be checked if additional (ARIA) attributes can enhance the components accessibility. The examples above show how to implement accessible modals using some of those attributes. -
Please note that you should either add the tabindex- or the href-attribute to anchors to make them fully utilizable by keyboards.

+

This component is not yet fully accessible. While it is usable via the keyboard, it has to be checked if additional ARIA attributes can enhance the components accessibility.

*** diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js index 57b75cf47..141f87ea6 100644 --- a/js/foundation/foundation.orbit.js +++ b/js/foundation/foundation.orbit.js @@ -54,8 +54,8 @@ } if (settings.navigation_arrows) { - container.append($('').addClass(settings.prev_class).append(''+settings.prev_text+'')); - container.append($('').addClass(settings.next_class).append(''+settings.next_text+'')); + container.append($('').addClass(settings.prev_class)); + container.append($('').addClass(settings.next_class)); } if (settings.timer) { @@ -442,9 +442,7 @@ variable_height : false, swipe : true, before_slide_change : noop, - after_slide_change : noop, - prev_text: 'Previous slide', - next_text: 'Next slide' + after_slide_change : noop }, init : function (scope, method, options) { diff --git a/js/foundation/foundation.reveal.js b/js/foundation/foundation.reveal.js index 69e585a79..5bbe79a2f 100644 --- a/js/foundation/foundation.reveal.js +++ b/js/foundation/foundation.reveal.js @@ -72,7 +72,6 @@ S(document) .on('click.fndtn.reveal', this.close_targets(), function (e) { e.preventDefault(); - if (!self.locked) { var settings = S('[' + self.attr_name() + '].open').data(self.attr_name(true) + '-init') || self.settings, bg_clicked = S(e.target)[0] === S('.' + settings.bg_class)[0]; @@ -244,23 +243,6 @@ $.ajax(ajax_settings); } } - - // trap the focus within the modal while tabbing - self.S(modal).on('keydown', function(e) { - var visibleFocusableElements = modal.find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]').filter(function() { - if (!$(this).is(':visible') || $(this).attr('tabindex') < 0) return false; //only have visible elements and those that have a tabindex greater or equal 0 - return true; - }); - if (e.keyCode === 9) { // tab is pressed - if (e.shiftKey && self.S(modal).find(':focus').is(visibleFocusableElements.eq(0))) { // left modal downwards, setting focus to first element - visibleFocusableElements.eq(-1).focus(); - e.preventDefault(); - } else if (!e.shiftKey && self.S(modal).find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element - visibleFocusableElements.eq(0).focus(); - e.preventDefault(); - } - } - }); self.S(window).trigger('resize'); }, @@ -374,8 +356,7 @@ context.locked = false; el.trigger('opened.fndtn.reveal'); }) - .addClass('open') - .focus(); + .addClass('open'); }, settings.animation_speed / 2); } @@ -391,8 +372,7 @@ context.locked = false; el.trigger('opened.fndtn.reveal'); }) - .addClass('open') - .focus(); + .addClass('open'); }, settings.animation_speed / 2); } @@ -408,7 +388,7 @@ this.locked = false; - return el.show().focus(); + return el.show(); }, to_back : function(el) { diff --git a/scss/foundation/components/_reveal.scss b/scss/foundation/components/_reveal.scss index b940294b1..508bde91d 100644 --- a/scss/foundation/components/_reveal.scss +++ b/scss/foundation/components/_reveal.scss @@ -30,9 +30,6 @@ $reveal-close-top: rem-calc(10) !default; $reveal-close-side: rem-calc(22) !default; $reveal-close-color: $base !default; $reveal-close-weight: $font-weight-bold !default; -$reveal-close-padding: 0 !default; -$reveal-close-background-color: transparent !default; -$reveal-close-border: none !default; // We use this to set the default radius used throughout the core. $reveal-radius: $global-radius !default; @@ -165,9 +162,6 @@ $z-index-base: 1005; line-height: 1; position: absolute; top: $reveal-close-top; - padding: $reveal-close-padding; - background-color: $reveal-close-background-color; - border: $reveal-close-border; #{$opposite-direction}: $reveal-close-side; } @@ -212,9 +206,7 @@ $z-index-base: 1005; z-index: $z-index-base - 2; } - .#{$close-reveal-modal-class} { - @include reveal-close; - } + .#{$close-reveal-modal-class} { @include reveal-close; } } } }