Skip to content

Commit 8727f8a

Browse files
PerplexedThetaPerplexedTheta
committed
fix: accordeons now have aria-expanded
1 parent c33d800 commit 8727f8a

File tree

2 files changed

+34
-12
lines changed

2 files changed

+34
-12
lines changed

‎Koha/Plugin/Com/PerplexedTheta/SENUX/static_files/src/js/customisations.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ function facetAccordeons() {
480480
// vars
481481
var currentText = $(this).text();
482482

483-
$(this).html('<a href="\#expandFacet"\>' + currentText + ' <i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a>');
483+
$(this).html('<a href="\#expandFacet"\ aria-expanded=\"false\">' + currentText + ' <i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a>');
484484
});
485485

486486
// remove the display:none and collapsible facet
@@ -503,8 +503,14 @@ function facetAccordeons() {
503503
$('a[href="#expandFacet"]').on('click', function (event) {
504504
event.preventDefault();
505505

506-
if ($(this).parents('h3').siblings('ul').css('display') == 'none') $(this).parents('h3').siblings('ul').show(); // unhide
507-
else $(this).parents('h3').siblings('ul').hide(); // else hide
506+
if ($(this).parents('h3').siblings('ul').css('display') == 'none') {
507+
$(this).attr('aria-expanded', 'true');
508+
$(this).parents('h3').siblings('ul').show(); // unhide
509+
}
510+
else {
511+
$(this).attr('aria-expanded', 'false');
512+
$(this).parents('h3').siblings('ul').hide(); // else hide
513+
}
508514

509515
$(this).find('i.fa').toggleClass('fa-chevron-down'); // swap the chevrons
510516
$(this).find('i.fa').toggleClass('fa-chevron-left');
@@ -563,7 +569,7 @@ function facetPublicationDateRange() {
563569
var currentYear = new Date().getFullYear();
564570

565571
// first, inject the markup
566-
$('#search-facets ul:first').append('<li id=\"yr_id\"><h3 id=\"facet-yr\"><a href=\"#expandFacet\">Publication date range<i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a><\/h3> <div style=\"display:none\"><label class=\"mt-4\" for=\"limit-yr\">Enter publication date range:<\/label><input name=\"limit-yr\" type=\"text\"><p class=\"hint pt-2\">For example: 1999-2001<\/p><p id=\"limit-yr-err\" class=\"hint pt-2\" style=\"display:none;color:red\">Please check you entered two valid years<\/p><a href=\"#facetYrRefine\" class=\"btn btn-primary mt-2\">Refine by date<\/a><\/div><\/li>');
572+
$('#search-facets ul:first').append('<li id=\"yr_id\"><h3 id=\"facet-yr\"><a href=\"#expandFacet\" aria-expanded=\"false\">Publication date range<i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a><\/h3> <div style=\"display:none\"><label class=\"mt-4\" for=\"limit-yr\">Enter publication date range:<\/label><input name=\"limit-yr\" type=\"text\"><p class=\"hint pt-2\">For example: 1999-2001<\/p><p id=\"limit-yr-err\" class=\"hint pt-2\" style=\"display:none;color:red\">Please check you entered two valid years<\/p><a href=\"#facetYrRefine\" class=\"btn btn-primary mt-2\">Refine by date<\/a><\/div><\/li>');
567573

568574
// then, inject the facet clear button, if applicable
569575
if (urlFacetSet) {
@@ -576,8 +582,13 @@ function facetPublicationDateRange() {
576582
event.preventDefault(); // disable usual behaviour
577583
event.stopImmediatePropagation();
578584

579-
if ($(this).parents('h3').siblings('div').css('display') == 'none') $(this).parents('h3').siblings('div').show(); // see facetAccordeon for how this code works
580-
else $(this).parents('h3').siblings('div').hide();
585+
if ($(this).parents('h3').siblings('div').css('display') == 'none') {
586+
$(this).attr('aria-expanded', 'true');
587+
$(this).parents('h3').siblings('div').show(); // see facetAccordeon for how this code works
588+
} else {
589+
$(this).attr('aria-expanded', 'false');
590+
$(this).parents('h3').siblings('div').hide();
591+
}
581592

582593
$(this).find('i.fa').toggleClass('fa-chevron-down');
583594
$(this).find('i.fa').toggleClass('fa-chevron-left');

‎Koha/Plugin/Com/PerplexedTheta/SENUX/static_files/src/js/customisations.sample.js‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ function facetAccordeons() {
456456
// vars
457457
var currentText = $(this).text();
458458

459-
$(this).html('<a href="\#expandFacet"\>' + currentText + ' <i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a>');
459+
$(this).html('<a href="\#expandFacet"\ aria-expanded=\"false\">' + currentText + ' <i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a>');
460460
});
461461

462462
// remove the display:none and collapsible facet
@@ -479,8 +479,14 @@ function facetAccordeons() {
479479
$('a[href="#expandFacet"]').on('click', function (event) {
480480
event.preventDefault();
481481

482-
if ($(this).parents('h3').siblings('ul').css('display') == 'none') $(this).parents('h3').siblings('ul').show(); // unhide
483-
else $(this).parents('h3').siblings('ul').hide(); // else hide
482+
if ($(this).parents('h3').siblings('ul').css('display') == 'none') {
483+
$(this).attr('aria-expanded', 'true');
484+
$(this).parents('h3').siblings('ul').show(); // unhide
485+
}
486+
else {
487+
$(this).attr('aria-expanded', 'false');
488+
$(this).parents('h3').siblings('ul').hide(); // else hide
489+
}
484490

485491
$(this).find('i.fa').toggleClass('fa-chevron-down'); // swap the chevrons
486492
$(this).find('i.fa').toggleClass('fa-chevron-left');
@@ -539,7 +545,7 @@ function facetPublicationDateRange() {
539545
var currentYear = new Date().getFullYear();
540546

541547
// first, inject the markup
542-
$('#search-facets ul:first').append('<li id=\"yr_id\"><h3 id=\"facet-yr\"><a href=\"#expandFacet\">Publication date range<i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a><\/h3> <div style=\"display:none\"><label class=\"mt-4\" for=\"limit-yr\">Enter publication date range:<\/label><input name=\"limit-yr\" type=\"text\"><p class=\"hint pt-2\">For example: 1999-2001<\/p><p id=\"limit-yr-err\" class=\"hint pt-2\" style=\"display:none;color:red\">Please check you entered two valid years<\/p><a href=\"#facetYrRefine\" class=\"btn btn-primary mt-2\">Refine by date<\/a><\/div><\/li>');
548+
$('#search-facets ul:first').append('<li id=\"yr_id\"><h3 id=\"facet-yr\"><a href=\"#expandFacet\" aria-expanded=\"false\">Publication date range<i class=\"fa fa-chevron-down\" aria-hidden=\"true\"><\/i><\/a><\/h3> <div style=\"display:none\"><label class=\"mt-4\" for=\"limit-yr\">Enter publication date range:<\/label><input name=\"limit-yr\" type=\"text\"><p class=\"hint pt-2\">For example: 1999-2001<\/p><p id=\"limit-yr-err\" class=\"hint pt-2\" style=\"display:none;color:red\">Please check you entered two valid years<\/p><a href=\"#facetYrRefine\" class=\"btn btn-primary mt-2\">Refine by date<\/a><\/div><\/li>');
543549

544550
// then, inject the facet clear button, if applicable
545551
if (urlFacetSet) {
@@ -552,8 +558,13 @@ function facetPublicationDateRange() {
552558
event.preventDefault(); // disable usual behaviour
553559
event.stopImmediatePropagation();
554560

555-
if ($(this).parents('h3').siblings('div').css('display') == 'none') $(this).parents('h3').siblings('div').show(); // see facetAccordeon for how this code works
556-
else $(this).parents('h3').siblings('div').hide();
561+
if ($(this).parents('h3').siblings('div').css('display') == 'none') {
562+
$(this).attr('aria-expanded', 'true');
563+
$(this).parents('h3').siblings('div').show(); // see facetAccordeon for how this code works
564+
} else {
565+
$(this).attr('aria-expanded', 'false');
566+
$(this).parents('h3').siblings('div').hide();
567+
}
557568

558569
$(this).find('i.fa').toggleClass('fa-chevron-down');
559570
$(this).find('i.fa').toggleClass('fa-chevron-left');

0 commit comments

Comments
 (0)