-
-
Save druliner/4d443aa9d32d27a2031ae5815ff57ee9 to your computer and use it in GitHub Desktop.
Accessibility patch for CKEditor Accordion plugin with hovers, caret & UW purple
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment