Revert "Better accessibility for reveal"

diff --git a/doc/includes/reveal/examples_reveal_ajax.html b/doc/includes/reveal/examples_reveal_ajax.html
index 5535f93113fbde87aa2b9d1109c11857b5eea63f..788ebc5b0ce472703994b5f7919ed046f248f450 100644 (file)
--- 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
 </button>
 
-<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true" role="button">
+<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
     Click Me For A Modal
 </a>
 ```

diff --git a/doc/includes/reveal/examples_reveal_basic.html b/doc/includes/reveal/examples_reveal_basic.html
index 75d5da172aa16b85d0d665bf9dc9d303e0350100..111762454960633c6638a5d65523a8b7afb42763 100644 (file)
--- a/doc/includes/reveal/examples_reveal_basic.html
+++ b/doc/includes/reveal/examples_reveal_basic.html
@@ -6,7 +6,7 @@
   <h2 id="modalTitle">Awesome. I have it.</h2>
   <p class="lead">Your couch.  It is mine.</p>
   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 ```
 {{/markdown}}

diff --git a/doc/includes/reveal/examples_reveal_basic_rendered.html b/doc/includes/reveal/examples_reveal_basic_rendered.html
index 8acb79e2b0e06322d8072d00f47191a730d74eff..f309ad2927089dbc43492b241bd8fe16ff67697b 100644 (file)
--- a/doc/includes/reveal/examples_reveal_basic_rendered.html
+++ b/doc/includes/reveal/examples_reveal_basic_rendered.html
@@ -4,5 +4,5 @@
   <h2 id="modalTitle">Awesome. I have it.</h2>
   <p class="lead">Your couch.  It is mine.</p>
   <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
\ 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 feae5f3fb444a3092112a594ce97d5763461938b..b24fe16d79a5e11ea86ea73c55446693768c5e3c 100644 (file)
--- a/doc/includes/reveal/examples_reveal_data.html
+++ b/doc/includes/reveal/examples_reveal_data.html
@@ -1,5 +1,5 @@
 {{#markdown}}
 ```html
-<a href="#" data-reveal-id="myModal" role="button">Click Me For A Modal</a>
+<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
 ```
 {{/markdown}}

diff --git a/doc/includes/reveal/examples_reveal_modal_examples.html b/doc/includes/reveal/examples_reveal_modal_examples.html
index 1428723fe64c746c15ea3a5f6a1cb83855219be4..47e6a7b8266592d9aa338910ad85d9113158e5e5 100644 (file)
--- a/doc/includes/reveal/examples_reveal_modal_examples.html
+++ b/doc/includes/reveal/examples_reveal_modal_examples.html
@@ -10,13 +10,13 @@
   <p>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 <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
   <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
   <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
 <div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
   <h2 id="secondModalTitle">This is a second modal.</h2>
   <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
 <div id="videoModal" class="reveal-modal large" data-reveal aria-labelledby="videoModalTitle" aria-hidden="true" role="dialog">
@@ -25,7 +25,7 @@
     <iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
   </div>
 
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 <!-- Reveal Modals end -->
 ```

diff --git a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
index a0f84d516cb90a8876a5d746a4068d197062f886..9a23827ebc99193ce6ba5a3218b6a33222359033 100644 (file)
--- a/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
+++ b/doc/includes/reveal/examples_reveal_modal_examples_rendered.html
@@ -7,13 +7,13 @@
   <p>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 <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
   <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
   <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
 <div id="secondModal" class="reveal-modal" data-reveal aria-labelledby="secondModalTitle" aria-hidden="true" role="dialog">
   <h2 id="secondModalTitle">This is a second modal.</h2>
   <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 
 <div id="videoModal" class="reveal-modal large" data-reveal aria-labelledby="videoModalTitle" aria-hidden="true" role="dialog">
@@ -22,6 +22,6 @@
     <iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
   </div>
 
-  <button class="close-reveal-modal" aria-label="Close">&#215;</button>
+  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
 <!-- Reveal Modals end -->
\ 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 6ca6c3e9bcfe5b646ec07b0544f9209411a8f4a5..1de47508a69f4ac8a5d1c875db0f1b4cdb40a949 100644 (file)
--- 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');
 <p>Or you can call one right after the other:</p>
 {{#markdown}}
 ```html
-<div class="reveal-modal" id="first-modal" data-reveal>
+<div class='reveal-modal' id='first-modal' data-reveal>
     I'm the firstborn!
-    <a class="open-second" role="button" href="#">Click me!</a>
+    <a class='open-second'>Click me!</a>
   </div>
-  <div class="reveal-modal" id="second-modal" data-reveal>
+  <div class='reveal-modal' id='second-modal' data-reveal>
     I'm the secondborn!
-    <a class="close" role="button" href="#">Close modal</a>
+    <a class='close'>Close modal</a>
   </div>
-  <a class="open-first" href="#">Click me!</a>
+  <a class='open-first'>Click me!</a>
 ```
 {{/markdown}}
 

diff --git a/doc/pages/components/orbit.html b/doc/pages/components/orbit.html
index 3cab9c765bebe02e438a8cbfcbd1bc0fe8a3be1d..35c0cc8f00c84dcbd0a10bd684d2bf8f2ec8dd32 100644 (file)
--- 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 cb8d8eae22539496c6e2f3b278ab106169f3518d..6e1582ae0fb1947fb297cc0101752f559b3ff6d2 100644 (file)
--- 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
 
-<p class="panel">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. 
-<br />Please note that you should either add the tabindex- or the href-attribute to anchors to make them fully utilizable by keyboards.</p>
+<p class="panel">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.</p>
 
 ***
 

diff --git a/js/foundation/foundation.orbit.js b/js/foundation/foundation.orbit.js
index 57b75cf4759ef9ef51d519065ea04807d7e23e3c..141f87ea607d3f24b3fbccf14c923d5dc8d64b1b 100644 (file)
--- a/js/foundation/foundation.orbit.js
+++ b/js/foundation/foundation.orbit.js
@@ -54,8 +54,8 @@
       }
 
       if (settings.navigation_arrows) {
-        container.append($('<a href="#" title="'+settings.prev_text+'"><span></span></a>').addClass(settings.prev_class).append('<span class="visuallyhidden">'+settings.prev_text+'</span>'));
-        container.append($('<a href="#" title="'+settings.next_text+'"><span></span></a>').addClass(settings.next_class).append('<span class="visuallyhidden">'+settings.next_text+'</span>'));
+        container.append($('<a href="#"><span></span></a>').addClass(settings.prev_class));
+        container.append($('<a href="#"><span></span></a>').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 69e585a79922818a92cf54a1ac633e5d64b66cb2..5bbe79a2fe1b424cdbfe131d9460f1b8dc6aa8c4 100644 (file)
--- 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 b940294b1bef5eb101a32c9c547f655558bb25b5..508bde91d736fd24590ced9f723e88346a4ebf7a 100644 (file)
--- 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; }
     }
   }
 }