Changeset 1677780

Timestamp:

06/13/2017 04:22:27 PM (7 years ago)

Author:

JoeFusco

Message:

Improve ARIA for Tab module

Location:

accessible-divi/trunk

Files:

• divi-accessibility.php (modified) (1 diff)
• includes/class-divi-accessibility.php (modified) (1 diff)
• public/partials/divi-accessibility-embedded-css.php (modified) (3 diffs)
• public/partials/divi-accessibility-embedded-js.php (modified) (6 diffs)
• readme.txt (modified) (1 diff)

accessible-divi/trunk/divi-accessibility.php

@@ -15 +15 @@
  * @wordpress-plugin
  * Plugin Name:       Divi Accessibility
- * Plugin URI:        https://github.com/campuspress/divi-accessibility
+ * Plugin URI:        https://
  * Description:       Improve Divi accessibility in accordance with WCAG 2.0 guidelines.
  * Version:           1.0.0
- * Author:            Joseph Fusco
+ * Author:            
  * Author URI:        https://campuspress.com
  * License:           GPL-2.0+

accessible-divi/trunk/includes/class-divi-accessibility.php

@@ -94 +94 @@
         $this->da11y         = 'divi_accessibility';
         $this->da11y_options = 'divi_accessibility_options';
-        $this->version       = '1.0.0';
+        $this->version       = '1.0.';
 
         $this->load_dependencies();

accessible-divi/trunk/public/partials/divi-accessibility-embedded-css.php

@@ -41 +41 @@
 
 ?>
-*:active.keyboard-outline,
-*:focus.keyboard-outline {
+.keyboard-outline {
     <?php
 
@@ -59 +58 @@
 button:focus.keyboard-outline,
 input:active.keyboard-outline,
-input:focus.keyboard-outline {
+input:focus.keyboard-outline,
+a[role="tab"].keyboard-outline {
     outline-offset: -5px;
 }
@@ -65 +65 @@
     padding-left: 15px;
     padding-right: 15px;
+
+
+
+
 }
 <?php

accessible-divi/trunk/public/partials/divi-accessibility-embedded-js.php

@@ -228 +228 @@
 
             $(document).keyup(function (e) {
-                // Enter
+                // Enter
                 if (e.which === 13) {
                     // Expand Accordion & Toggle modules when enter is hit while focused.
@@ -323 +323 @@
 
             /**
-             * Add aria-selected="false".
+             * Add inital state:
+             *
+             * aria-selected="false"
+             * aria-expanded="false"
+             * tabindex=-1
              *
              * @divi-module  Tab
@@ -329 +333 @@
             $('.et_pb_tabs_controls li:not(.et_pb_tab_active) a').each(function () {
                 $(this).attr('aria-selected', 'false');
-            });
-
-            /**
-             * Add aria-selected="true".
-             *
-             * @divi-module  Tab
+                $(this).attr('aria-expanded', 'false');
+                $(this).attr('tabindex', -1);
+            });
+
+            /**
+            * Add inital state:
+            *
+            * aria-selected="true"
+            * aria-expanded="true"
+            * tabindex=-1
+            *
+            * @divi-module  Tab
              */
             $('.et_pb_tabs_controls li.et_pb_tab_active a').each(function () {
                 $(this).attr('aria-selected', 'true');
+
+
             });
 
@@ -387 +399 @@
              */
             $('.et_pb_tabs').each(function (e) {
-                $(this).attr('data-a11y-id', 'et_pb_tab_module_' + e);
+                $(this).attr('data-a11y-id', 'et_pb_tab_module_' + e);
             });
 
@@ -397 +409 @@
             $('.et_pb_tabs_controls a').on('click', function () {
                 var id = $(this).attr('id');
-                var namespace = $(this).closest('.et_pb_tabs').attr('data-a11y-id'); // Used as a selector to scope changes to current module.
-
-                // Reset all tab controls to be aria-selected="false".
-                $('#' + namespace + ' .et_pb_tabs_controls a').attr('aria-selected', 'false');
-
-                // Make active tab control aria-selected="true".
-                $(this).attr('aria-selected', 'true');
+                var namespace = $(this).closest('.et_pb_tabs').attr('data-da11y-id'); // Used as a selector to scope changes to current module.
+
+                // Reset all tab controls to be aria-selected="false" & aria-expanded="false".
+                $('[data-da11y-id="' + namespace + '"] .et_pb_tabs_controls a')
+                    .attr('aria-selected', 'false')
+                    .attr('aria-expanded', 'false')
+                    .attr('tabindex', -1);
+
+                // Make active tab control aria-selected="true" & aria-expanded="true".
+                $(this)
+                    .attr('aria-selected', 'true')
+                    .attr('aria-expanded', 'true')
+                    .attr('tabindex', 0);
 
                 // Reset all tabs to be aria-hidden="true".
-                $('#' + namespace + ' .et_pb_tab').attr('aria-hidden', 'true');
+                $('#' + namespace + ' .et_pb_tab')
+                    .attr('aria-hidden', 'true');
 
                 // Label active tab panel as aria-hidden="false".
-                $('[aria-labelledby="' + id + '"]').attr('aria-hidden', 'false');
+                $('[aria-labelledby="' + id + '"]')
+                    .attr('aria-hidden', 'false');
+            });
+
+            // Arrow navigation for tab modules
+            $('.et_pb_tabs_controls a').keyup(function (e) {
+                var namespace = $(this).closest('.et_pb_tabs').attr('data-da11y-id');
+                var module = $('[data-da11y-id="' + namespace + '"]');
+
+                if (e.which === 39 || e.which === 40) { // Down & Right.
+                    var next = module.find('li.et_pb_tab_active').next();
+
+                    if (next.length > 0) {
+                        next.find('a').trigger('click');
+                    } else {
+                        module.find('li:first a').trigger('click');
+                    }
+                } else if (e.which === 37 || e.which === 38) { // Up & Left.
+                    var next = module.find('li.et_pb_tab_active').prev();
+
+                    if (next.length > 0) {
+                        next.find('a').trigger('click');
+                    } else {
+                        module.find('li:last a').trigger('click');
+                    }
+                }
+
+                $('.et_pb_tabs_controls a').removeClass('keyboard-outline');
+                module.find('li.et_pb_tab_active a').addClass('keyboard-outline');
             });
 
@@ -419 +466 @@
              */
             $('.et_pb_search').each(function (e) {
-                $(this).attr('data-a11y-id', 'et_pb_search_module_' + e);
+                $(this).attr('data-a11y-id', 'et_pb_search_module_' + e);
             });
 

accessible-divi/trunk/readme.txt

@@ -47 +47 @@
 == Changelog ==
 
+
+
+
 = 1.0.0 =
 * Initial Release