Accessibility patch for CKEditor Accordion plugin with hovers, caret & UW purple

ckeditor_accordion_uw.patch

diff -Naur ckeditor_accordion/css/ckeditor-accordion.css ckeditor_accordion_new/css/ckeditor-accordion.css
--- ckeditor_accordion/css/ckeditor-accordion.css	2019-08-08 15:36:18.300517730 -0700
+++ ckeditor_accordion_new/css/ckeditor-accordion.css	2019-08-07 16:33:13.949054551 -0700
@@ -20,7 +20,7 @@
 }
 .ckeditor-accordion-container > dl {
   position: relative;
-  border: 1px solid #0091ea;
+  border: 1px solid #ddd;
 }
 
 /* label / tab */
@@ -41,7 +41,7 @@
 }
 .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:before,
 .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:after {
-  background: #fff;
+  background: #4b2e83;
   -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
   transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
   content: "";
@@ -56,6 +56,7 @@
   transform: rotate(-180deg);
   will-change: transform;
 }
+
 .ckeditor-accordion-container > dl dt > .ckeditor-accordion-toggle:before {
   left: 13px;
   -webkit-transform: rotate(135deg);
@@ -67,6 +68,13 @@
   -webkit-transform: rotate(-135deg);
   transform: rotate(-135deg);
 }
+
+.ckeditor-accordion-container > dl dt:hover > .ckeditor-accordion-toggle:before,
+.ckeditor-accordion-container > dl dt:hover > .ckeditor-accordion-toggle:after {
+  background: #85754d; /* swap carat color on hover */
+}
+
+
 .ckeditor-accordion-container > dl dt.active > .ckeditor-accordion-toggle:before {
   transform: rotate(45deg);
 }
@@ -78,19 +86,20 @@
 .ckeditor-accordion-container > dl dt > a {
   display: block;
   padding: 10px 15px 10px 50px;
-  background-color: #00b0ff;
-  color: #fff;
+  background-color: #eee;
+  color: #4b2e83;
   cursor: pointer;
   -webkit-transition: background-color 300ms;
   transition: background-color 300ms;
-  border-bottom: 1px solid #00a4ec;
+  border-bottom: 1px solid #ddd;
 }
 
-.ckeditor-accordion-container > dl dt > a:hover {
-  background-color: #00a5ef;
+.ckeditor-accordion-container > dl dt > a:hover,
+.ckeditor-accordion-container > dl dt.active > a:hover {
+  background-color: #ddd;
 }
 .ckeditor-accordion-container > dl dt.active > a {
-  background-color: #0091ea;
+  background-color: #eee;
 }
 
 .ckeditor-accordion-container > dl dt:last-of-type > a {
@@ -100,7 +109,23 @@
 /* contents */
 .ckeditor-accordion-container > dl dd {
   display: none;
-  padding: 0 15px;
+  padding: 20px;
   margin: 0;
   will-change: height;
 }
+
+/*
+.ckeditor-accordion-container>dl>dt>a, 
+.ckeditor-accordion-container>dl>dt.active>a 
+{background-color:#eee;color:#4b2e83;border-color:#ddd;} 
+
+.ckeditor-accordion-container>dl>dt>a:hover{background-color:#ddd;} 
+
+.ckeditor-accordion-container>dl, 
+.ckeditor-accordion-container>dl>dt{border:thin solid #ddd;}  
+
+.ckeditor-accordion-container>dl>dt>.ckeditor-accordion-toggle:before, 
+.ckeditor-accordion-container>dl>dt>.ckeditor-accordion-toggle:after {background:#4b2e83;} 
+
+.ckeditor-accordion-container>dl>dd{padding:20px;} 
+*/
diff -Naur ckeditor_accordion/js/ckeditor-accordion.js ckeditor_accordion_new/js/ckeditor-accordion.js
--- ckeditor_accordion/js/ckeditor-accordion.js	2019-08-08 15:36:18.300517730 -0700
+++ ckeditor_accordion_new/js/ckeditor-accordion.js	2019-08-08 11:15:32.373773896 -0700
@@ -49,6 +49,8 @@
           // Clicking on open element, close it.
           if ($t.hasClass('active')) {
             $t.removeClass('active');
+            $t.attr('aria-expanded', "false");
+            $t.next().attr('aria-hidden', "true");
             $t.next().slideUp();
           }
           else {
@@ -56,10 +58,14 @@
             $parent.children('dt.active').removeClass('active').children('a').removeClass('active');
             $parent.children('dd.active').slideUp(function () {
               $(this).removeClass('active');
+              $(this).attr('aria-expanded', "false");
+              $(this).next().attr('aria-hidden', "true");
             });
 
             // Show the selected tab.
             $t.addClass('active');
+            $t.attr('aria-expanded', "true");
+            $t.next().attr('aria-hidden', "false");
             $t.next().slideDown(300).addClass('active');
           }
 
@@ -69,4 +75,14 @@
       }
     }
   };
+
+  $(document).ready(function($) {
+    //pass click on caret(toggle) to toggler 
+    $( '.ckeditor-accordion-toggle' ).css('height','0px').on('click' , function(){
+      $(this).next().trigger('click');
+    });
+
+  });
+
+
 })(jQuery);
diff -Naur ckeditor_accordion/plugins/accordion/plugin.js ckeditor_accordion_new/plugins/accordion/plugin.js
--- ckeditor_accordion/plugins/accordion/plugin.js	2019-08-08 15:36:18.299517703 -0700
+++ ckeditor_accordion_new/plugins/accordion/plugin.js	2019-08-07 16:44:36.380927812 -0700
@@ -48,12 +48,15 @@
         allowedContent: allowedContent,
 
         exec: function (editor) {
+          // Generate a unique id for the dt and dd.
+          var uniqIdOne = CKEDITOR.tools.getUniqueId();
+          var uniqIdTwo = CKEDITOR.tools.getUniqueId();
           var dl = new CKEDITOR.dom.element.createFromHtml(
-            '<dl class="ckeditor-accordion">' +
-            '<dt>Accordion title 1</dt>' +
-            '<dd><p>Accordion content 1.</p></dd>' +
-            '<dt>Accordion title 2</dt>' +
-            '<dd><p>Accordion content 2.</p></dd>' +
+            '<dl class="ckeditor-accordion" role="presentation">' +
+            '<dt id="ckadt' + uniqIdOne + '" aria-expanded="false" role="heading" aria-controls="ckadd' + uniqIdOne + '">Accordion title 1</dt>' +
+            '<dd id="ckadd' + uniqIdOne + '" aria-hidden="true" role="region" aria-labelledby="ckadt' + uniqIdOne + '"><p>Accordion content 1.</p></dd>' +
+            '<dt id="ckadt' + uniqIdTwo + '" aria-expanded="false" role="heading" aria-controls="ckadd' + uniqIdTwo + '">Accordion title 2</dt>' +
+            '<dd id="ckadd' + uniqIdTwo + '" aria-hidden="true" role="region" aria-labelledby="ckadt' + uniqIdTwo + '"><p>Accordion content 2.</p></dd>' +
             '</dl>');
           editor.insertElement(dl);
         }
@@ -64,9 +67,11 @@
         allowedContent: allowedContent,
 
         exec: function (editor) {
+          // Generate a unique id for the dt and dd.
+          var uniqIdOne = CKEDITOR.tools.getUniqueId();
           var element = editor.getSelection().getStartElement();
-          var newHeader = new CKEDITOR.dom.element.createFromHtml('<dt>New accordion title</dt>');
-          var newContent = new CKEDITOR.dom.element.createFromHtml('<dd><p>New accordion content</p></dd>');
+          var newHeader = new CKEDITOR.dom.element.createFromHtml('<dt id="ckadt' + uniqIdOne + '" aria-expanded="false" role="heading" aria-controls="ckadd' + uniqIdOne + '">New accordion title</dt>');
+          var newContent = new CKEDITOR.dom.element.createFromHtml('<dd id="ckadd' + uniqIdOne + '" aria-hidden="true" role="region" aria-labelledby="ckadd' + uniqIdOne + '"><p>New accordion content</p></dd>');
           if (element.getAscendant('dd', true)) {
             element = element.getAscendant('dd', true).getPrevious();
           }
@@ -81,9 +86,11 @@
         allowedContent: allowedContent,
 
         exec: function (editor) {
+          // Generate a unique id for the dt and dd.
+          var uniqIdOne = CKEDITOR.tools.getUniqueId();
           var element = editor.getSelection().getStartElement();
-          var newHeader = new CKEDITOR.dom.element.createFromHtml('<dt>New accordion title</dt>');
-          var newContent = new CKEDITOR.dom.element.createFromHtml('<dd><p>New accordion content</p></dd>');
+          var newHeader = new CKEDITOR.dom.element.createFromHtml('<dt id="ckadt' + uniqIdOne + '" aria-expanded="false" role="heading" aria-controls="ckadd' + uniqIdOne + '">New accordion title</dt>');
+          var newContent = new CKEDITOR.dom.element.createFromHtml('<dd id="ckadd' + uniqIdOne + '" aria-hidden="true" role="region" aria-labelledby="ckadd' + uniqIdOne + '"><p>New accordion content</p></dd>');
           if (element.getAscendant('dt', true)) {
             element = element.getAscendant('dt', true).getNext();
           }