Remove custom Accordion close button element

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - USWDS is upgraded to the latest version, from v2.9.0 to v2.11.2.
   - The bordered and large styles of checkboxes and radio buttons have updated guidance to improve compatibility with the [USWDS tile style](https://designsystem.digital.gov/components/radio-buttons/). The classes `usa-radio-bordered`, `usa-radio-large`, `usa-checkbox-bordered`, and `usa-checkbox-large` have been removed. Instead, add `usa-radio__input--bordered`, `usa-radio__input--tile`, `usa-checkbox__input-bordered`, `usa-checkbox__input--tile` respectively as modifiers to the element with the class `usa-radio__input` or `usa-checkbox__input`.
+- The Accordion component no longer includes a "Close" button. Remove any instances of `<button class="usa-accordion__close-button">` in your project.
 
 ## 5.1.0
 

docs/_components/accordions.md

@@ -20,7 +20,6 @@ Before using an accordion, consider if their use would hinder usability. If ther
     <div class="usa-accordion__content usa-prose">
       <p>Follow this example! Mark the <code>.usa-accordion__button</code> with <code>aria-expanded="true"</code> to indicate that the content referenced with the ID listed in <code>aria-controls</code> is expanded by default, and omit the <code>hidden</code> attribute on the related <code>.usa-accordion__content</code>.</p>
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 
   <h2 class="usa-accordion__heading">
@@ -32,7 +31,6 @@ Before using an accordion, consider if their use would hinder usability. If ther
     <div class="usa-accordion__content usa-prose">
       <p>Do not mark any attributes, other than linking a header and content body by <code>aria-controls="unique-id"</code> and <code>id="unique-id"</code>. This ensures the content is accessible should JavaScript fail to load.</p>
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 
   <h2 class="usa-accordion__heading">
@@ -44,7 +42,6 @@ Before using an accordion, consider if their use would hinder usability. If ther
     <div class="usa-accordion__content usa-prose">
       <p>On the wrapping <code>.usa-accordion</code>, add the <code>aria-multiselectable="true"</code> attribute.</p>
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 </div>
 {% endcapture %}

docs/_components/form-fields.md

@@ -314,7 +314,6 @@ Follow the same pattern of applying `.usa-input--error` to the effected input an
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 
   <h3 class="usa-accordion__heading">
@@ -347,7 +346,6 @@ Follow the same pattern of applying `.usa-input--error` to the effected input an
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 
   <h3 class="usa-accordion__heading">
@@ -369,7 +367,6 @@ Follow the same pattern of applying `.usa-input--error` to the effected input an
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 </div>
 
@@ -407,7 +404,6 @@ For radio buttons and checkboxes, simply add an error message directly after the
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 
   <h3 class="usa-accordion__heading">
@@ -439,6 +435,5 @@ For radio buttons and checkboxes, simply add an error message directly after the
 {% endcapture %}
 {% include helpers/code-example.html code=example %}
     </div>
-    <button class="usa-accordion__close-button">Close</button>
   </div>
 </div>

src/js/components/index.js

@@ -16,7 +16,6 @@ import timePicker from 'uswds/src/js/components/time-picker';
 import table from 'uswds/src/js/components/table';
 import tooltip from 'uswds/src/js/components/tooltip';
 import validator from 'uswds/src/js/components/validator';
-import accordionCloseButton from './accordionCloseButton';
 
 export {
   accordion,
@@ -37,5 +36,4 @@ export {
   table,
   tooltip,
   validator,
-  accordionCloseButton,
 };

src/scss/components/_accordions.scss

@@ -26,39 +26,6 @@ $icon-size: 1.5;
   }
 }
 
-.usa-accordion__close-button {
-  @extend .usa-accordion__button;
-  @include typeset($theme-accordion-font-family, $theme-body-font-size, 1);
-  background-image: none;
-  background-color: color('primary-lightest');
-  color: color('primary');
-  text-align: center;
-  padding: units(2) units(2.5);
-
-  &:hover {
-    background-color: color('primary-lighter');
-    color: color('primary');
-  }
-
-  &:active {
-    background-color: color('primary-light');
-    color: color('primary-dark');
-  }
-
-  &:before {
-    @include add-background-svg('angle-arrow-up');
-    background-position: center;
-    background-size: units($icon-size);
-    overflow: visible;
-    width: units($icon-size);
-    height: font-size($theme-accordion-font-family, $theme-body-font-size);
-    display: inline-block;
-    position: absolute;
-    margin-left: - units($icon-size) - units(1);
-    content: '';
-  }
-}
-
 .usa-accordion--bordered {
   .usa-accordion__heading {
     margin-block-end: 0;
@@ -85,13 +52,4 @@ $icon-size: 1.5;
   .usa-accordion__content {
     border-width: 0;
   }
-
-  .usa-accordion__close-button {
-    @include u-radius('lg');
-    background-color: color('primary-lightest');
-    font-weight: 400;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-width: $border-width 0 0 0;
-  }
 }

test/components/accordions.test.js

@@ -47,11 +47,3 @@ test('clicking an open accordion title closes the accordion item', async () => {
 
   await expectAccordionItem('unique-id-1', { hidden: true });
 });
-
-test('clicking an accordion close button closes the accordion item', async () => {
-  await expectAccordionItem('unique-id-1', { hidden: false });
-
-  await page.click('#unique-id-1 .usa-accordion__close-button');
-
-  await expectAccordionItem('unique-id-1', { hidden: true });
-});