Update on this page and disclosure components to use SVG icons

demo/backstop-common.js

@@ -154,7 +154,7 @@ module.exports = function backstopCommon(baseUrl) {
         label: 'Components/On this page (with nested links open)',
         url: componentUrlFor('on_this_page/with_nested_links'),
         readySelector: '.cads-on-this-page--expandable',
-        clickSelector: '.js-cads-on-this-page__toggle',
+        clickSelector: '.js-cads-on-this-page-toggle',
       },
       {
         label: 'Components/Disclosure',
@@ -163,7 +163,7 @@ module.exports = function backstopCommon(baseUrl) {
       {
         label: 'Components/Disclosure (open)',
         url: componentUrlFor('disclosure/example'),
-        clickSelector: '.js-disclosure-summary',
+        clickSelector: '.js-cads-disclosure-summary',
       },
       {
         label: 'Components/Disclosure (without open summary)',
@@ -172,7 +172,7 @@ module.exports = function backstopCommon(baseUrl) {
       {
         label: 'Components/Disclosure (without open summary - open)',
         url: componentUrlFor('disclosure/without_open_summary'),
-        clickSelector: '.js-disclosure-summary',
+        clickSelector: '.js-cads-disclosure-summary',
       },
       {
         label: 'Components/Disclosure (fallback)',

demo/cypress/e2e/on-this-page.cy.js

@@ -0,0 +1,27 @@
+describe('On this page', () => {
+  it('should allow toggling nested links', () => {
+    cy.visitComponentUrl('on_this_page/with_nested_links');
+
+    assertClosed();
+
+    cy.findByRole('button', { name: /Show sub-headings for Link 2/i })
+      .click()
+      .should('have.attr', 'aria-expanded', 'true');
+
+    assertOpen();
+
+    cy.findByRole('button', { name: /Hide sub-headings for Link 2/i })
+      .click()
+      .should('have.attr', 'aria-expanded', 'false');
+
+    assertClosed();
+  });
+
+  function assertOpen() {
+    cy.findByText('Link 2.1').should('be.visible');
+  }
+
+  function assertClosed() {
+    cy.findByText('Link 2.1').should('not.be.visible');
+  }
+});

engine/app/components/citizens_advice_components/disclosure.html.erb

@@ -1,10 +1,11 @@
-<div class="cads-disclosure js-disclosure">
+<div class="cads-disclosure js-cads-disclosure">
   <%= tag.button(**button_attrs) do %>
-    <span class="cads-disclosure__summary js-disclosure-summary">
+    <%= render CitizensAdviceComponents::Icons::PlusMinus.new %>
+    <span class="cads-disclosure__summary js-cads-disclosure-summary">
       <%= closed_summary %>
     </span>
   <% end %>
-  <div class="cads-disclosure__details js-disclosure-details" id="<%= id %>">
+  <div class="cads-disclosure__details js-cads-disclosure-details" id="<%= id %>">
     <%= content %>
   </div>
 </div>

engine/app/components/citizens_advice_components/disclosure.rb

@@ -31,10 +31,9 @@ def button_attrs
     def base_button_attrs
       {
         type: "button",
-        class: %w[cads-disclosure__toggle cads-icon_plus cads-linkbutton js-disclosure-toggle],
+        class: %w[cads-disclosure__toggle cads-linkbutton js-cads-disclosure-toggle],
         "aria-expanded": "false",
         "aria-controls": id,
-        "data-toggle-target-id": id,
         "data-label-when-hiding": generate_label("Show this section", closed_summary),
         "data-label-when-showing": generate_label("Hide this section", open_summary),
         "data-open-summary": open_summary,

engine/app/components/citizens_advice_components/on_this_page.html.erb

@@ -5,12 +5,13 @@
       <li class="cads-on-this-page__list-item">
         <% if show_children_for?(link) %>
           <button type="button"
-            class="cads-on-this-page__show cads-icon_plus cads-linkbutton js-cads-on-this-page__toggle"
+            class="cads-on-this-page__toggle cads-linkbutton js-cads-on-this-page-toggle"
             aria-expanded="false"
             data-testid="on-this-page-toggle"
-            data-toggle-target-id="<%= "#{link.id}-list" %>"
             data-label-when-hiding="<%= "Show sub-headings for #{link.label}" %>"
-            data-label-when-showing="<%= "Hide sub-headings for #{link.label}" %>"></button>
+            data-label-when-showing="<%= "Hide sub-headings for #{link.label}" %>">
+            <%= render CitizensAdviceComponents::Icons::PlusMinus.new %>
+          </button>
         <% end %>
         <a href="<%= "##{link.id}" %>"
           class="cads-on-this-page__link cads-hyperlink"

engine/spec/components/citizens_advice_components/disclosure_spec.rb

@@ -72,7 +72,7 @@
       ).with_content("Example content")
     end
 
-    it { is_expected.to have_css "[data-toggle-target-id='my-id']" }
+    it { is_expected.to have_css "[aria-controls='my-id']" }
   end
 
   context "when additional attributes are provided" do

scss/6-components/_disclosure.scss

@@ -1,33 +1,42 @@
-/** @define disclosure **/
-.cads-disclosure {
-  &__details {
-    display: none;
-    margin-top: $cads-spacing-4;
+// ============================================================================
+// Disclosure
+// ============================================================================
+
+/** @define disclosure; weak **/
+.cads-disclosure__details {
+  display: none;
+  margin-top: $cads-spacing-4;
+}
+
+.cads-disclosure__summary {
+  text-decoration: underline;
+}
+
+.cads-disclosure__toggle {
+  text-decoration: none;
 
-    &--open {
-      display: block;
-    }
+  @include cads-media-breakpoint-up(md) {
+    font-size: cads-rem(18px);
   }
 
-  &__summary {
-    text-decoration: underline;
+  .cads-icon {
+    // Optically align icon
+    // Using vertical-align here results in
+    // an icon that is visually aligned too low
+    position: relative;
+    top: 2px;
   }
 
-  &__toggle {
+  &:focus .cads-disclosure__summary {
     text-decoration: none;
-
-    @include cads-media-breakpoint-up(md) {
-      font-size: cads-rem(18px);
-    }
-
-    &::before {
-      font-size: 0.75em;
-    }
   }
 }
 
-.cads-disclosure__toggle:focus .cads-disclosure__summary {
-  text-decoration: none;
+// Open state
+.cads-disclosure[data-disclosure-state='open'] {
+  .cads-disclosure__details {
+    display: block;
+  }
 }
 
 .cads-disclosure + .cads-disclosure {

scss/6-components/_on-this-page.scss

@@ -2,7 +2,7 @@
 // On this page
 // ============================================================================
 
-/** @define on-this-page */
+/** @define on-this-page; weak */
 .cads-on-this-page {
   background-color: cads-colour-to-bg($cads-palette__blue-adviser);
   padding: $cads-spacing-4;
@@ -92,17 +92,22 @@
     }
   }
 
-  .cads-on-this-page__list--open {
-    display: block;
-  }
-
-  .cads-on-this-page__hide,
-  .cads-on-this-page__show {
+  .cads-on-this-page__toggle {
+    text-decoration: none;
+    display: inline-flex;
+    padding: $cads-spacing-1;
     position: absolute;
+    top: 2px;
     left: -25px;
-    font-size: cads-rem(12px);
-    text-decoration: none;
-    padding: $cads-spacing-1 cads-rem(6px);
+
+    @include cads-media-breakpoint-up(md) {
+      top: 4px;
+      left: -30px;
+    }
+
+    .cads-icon {
+      height: 13px;
+    }
 
     &:focus {
       background-color: $cads-language__focus-colour;
@@ -114,17 +119,12 @@
     &:hover {
       cursor: pointer;
     }
+  }
 
-    &::before {
-      @include cads-media-breakpoint-up(md) {
-        top: 2px;
-        position: relative;
-      }
-    }
-
-    @include cads-media-breakpoint-up(md) {
-      left: -30px;
-      padding: $cads-spacing-1 cads-rem(6px);
+  // Open state
+  .cads-on-this-page__list-item[data-on-this-page-state='open'] {
+    .cads-on-this-page__list--nested {
+      display: block;
     }
   }
 }
@@ -137,8 +137,7 @@
 /* stylelint-disable plugin/selector-bem-pattern, no-descending-specificity */
 .no-js {
   .cads-on-this-page--expandable {
-    .cads-on-this-page__show,
-    .cads-on-this-page__hide {
+    .cads-on-this-page__toggle {
       display: none;
     }
 

src/ts/disclosure/disclosure.ts

@@ -1,61 +1,70 @@
-import initShowHideWithToggle from '../utils/show-hide';
-
-const selectors = {
-  component: '.js-disclosure',
-  toggle: '.js-disclosure-toggle',
-};
-
-const classes = {
-  toggleWhenHidden: 'cads-icon_plus',
-  toggleWhenShowing: 'cads-icon_minus',
-  elementIsOpen: 'cads-disclosure__details--open',
-};
-
-const attributes = {
-  labelWhenHidden: 'data-label-when-hiding',
-  labelWhenShowing: 'data-label-when-showing',
-  target: 'data-toggle-target-id',
-};
-
-const disclosureSelectors = {
-  summary: '.js-disclosure-summary',
-  details: '.js-disclosure-details',
-};
-
-const disclosureAttributes = {
-  closedSummary: 'data-closed-summary',
-  openSummary: 'data-open-summary',
-};
-function initDisclosureToggle(disclosure: Element) {
-  const toggle = disclosure.querySelector(selectors.toggle);
-  const summary = disclosure.querySelector(disclosureSelectors.summary);
-  const details = disclosure.querySelector(disclosureSelectors.details);
-
-  toggle?.addEventListener('click', () => {
-    if (toggle && summary && details) {
-      if (details.classList.contains(classes.elementIsOpen)) {
-        summary.textContent = toggle.getAttribute(
-          disclosureAttributes.openSummary,
-        );
-      } else {
-        summary.textContent = toggle.getAttribute(
-          disclosureAttributes.closedSummary,
-        );
-      }
-    }
-  });
-}
-
-const initDisclosure = (): void => {
-  if (selectors.component) {
-    initShowHideWithToggle(selectors, classes, attributes);
+function isExpanded(toggle: Element) {
+  const ariaExpanded = toggle.getAttribute('aria-expanded');
+  return ariaExpanded === 'true';
+}
+
+function setAriaExpanded(toggle: Element, expanded: boolean) {
+  toggle.setAttribute('aria-expanded', expanded.toString());
+}
+
+function setAriaDescription(toggle: Element) {
+  const ariaDescription = isExpanded(toggle)
+    ? toggle.getAttribute('data-label-when-showing')
+    : toggle.getAttribute('data-label-when-hiding');
+
+  if (ariaDescription) {
+    toggle.setAttribute('aria-label', ariaDescription);
   }
+}
+
+function setTargetState(toggle: Element) {
+  const parentEl = toggle.parentElement;
+  const state = isExpanded(toggle) ? 'open' : 'closed';
+  parentEl?.setAttribute('data-disclosure-state', state);
+}
+
+function setIconClass(toggle: Element) {
+  const icon = toggle.querySelector('.cads-icon--plus-minus');
+  icon?.classList.toggle('show-minus');
+}
+
+function setSummaryText(toggle: Element) {
+  const summary = toggle.querySelector('.js-cads-disclosure-summary');
 
-  const disclosures = document.querySelectorAll(selectors.component);
-  for (let i = 0; i < disclosures.length; i++) {
-    const disclosure = disclosures[i];
-    initDisclosureToggle(disclosure);
+  const newTextContent = isExpanded(toggle)
+    ? toggle.getAttribute('data-open-summary')
+    : toggle.getAttribute('data-closed-summary');
+
+  if (summary && newTextContent) {
+    summary.textContent = newTextContent;
+  }
+}
+
+function initDisclosureFor(component: Element) {
+  const toggles = component.querySelectorAll('.js-cads-disclosure-toggle');
+
+  for (let i = 0; i < toggles.length; i++) {
+    const toggle = toggles[i];
+
+    // Set status to false on load (in case not already set)
+    // Makes calculating the other states easier as we can rely on the default
+    setAriaExpanded(toggle, false);
+    setAriaDescription(toggle);
+    setTargetState(toggle);
+
+    toggle.addEventListener('click', () => {
+      setAriaExpanded(toggle, !isExpanded(toggle));
+      setAriaDescription(toggle);
+      setIconClass(toggle);
+      setSummaryText(toggle);
+      setTargetState(toggle);
+    });
   }
-};
+}
 
-export default initDisclosure;
+export default function initDisclosure() {
+  const components = document.querySelectorAll('.js-cads-disclosure');
+  for (let i = 0; i < components.length; i++) {
+    initDisclosureFor(components[i]);
+  }
+}