bryanpizzillo
commented
5 months ago Technical Solution
This will go into ncids-js/usa-accordion. You will need to add ncids-js/usa-accordion to both ncids-js/typedoc.json and package.json in the exports section.
Supported HTML
Basic HTML
(Before JS initializes)
<div class="usa-accordion usa-prose">
<hX>Heading</hX>
<p></p>
<ul>...</ul>
<div class=" usa-accordion usa-prose">
<hY>Sub heading</hY>
<p></p>
<hZ id="_section8">Sub Sub Heading</hZ>
</div>
<hY>Some sub heading</hY>
<hX>Heading 2</hX>
...
</div>Cancer.gov Article HTML
(Before JS initializes)
<article class="usa-accordion">
<section class="usa-prose" aria-labeled-by="s1">
<hX id="s1"></hX>
<p></p>
<ul>...</ul>
</section>
</article>USWDS HTML
(Before JS initializes. Yes they require you to add in all the stuff we would normally do.)
<div class="usa-accordion">
<h4 class="usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="true"
aria-controls="a1"
>
First Amendment
</button>
</h4>
<div id="a1" class="usa-accordion__content usa-prose">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</div>
<h4 class="usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="false"
aria-controls="a2"
>
Second Amendment
</button>
</h4>
<div id="a2" class="usa-accordion__content usa-prose">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
<ul>
<li>This is a list item</li>
<li>Another list item</li>
</ul>
</div>
<h4 class="usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="false"
aria-controls="a3"
>
Third Amendment
</button>
</h4>
<div id="a3" class="usa-accordion__content usa-prose">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed
by law.
</p>
</div>
</div>Initialization Notes:
- Any classes attached to headings need to be removed. (e.g. nci-header-h2...)
- After HTML is USWDS
Initialization Flow:
- For each child element of
<div class="usa-accordion">- I think everything prior to the first header is left alone??
- Is this a heading yes?
- Is the heading the first one?
- take note of the heading level. We will call this Heading Level
- is this heading the same level as Heading Level?
- then start a new block of contents; generate an id for the element -- THIS NEEDS TO BE UNIQUE ACCROSS THE PAGE!!!
- turn the HX text into a a button like USWDS. set aria-controls to generated id above
- strip classes from header (but remember them)
- This is not at the Heading Levle
- then yoink the element to the current block of contents
- Is the heading the first one?
- Is this a header no? then yoink the element to the current block of contents
NOTE: Uninitialization needs to turn it back into the EXACT html as before.
The USWDS classes for the button should be used, and proper aria attributes. This should cover the open/close svg.
NOTE: If a user is viewing a url with an anchor fragment (i.e. #) we need to find that heading, or section those contents are in, and expand that section on init.
Component Options
- allowMultiple - boolean - Allow multiple items to be open at the same time. Default: false
- openSections - array - Maybe. Defaults to [1].
Data Attributes
- On Div
- [For autoinit] data-allow-multiple - sets allowMultiple as true
- [Fot autoinit] data-open-sections - this maps to openSections.
Public Component Methods
getSections() - returns AccordionSection this is order based on the dom ordering on the pagegetSections was found not to be as important for end user as toggleSectionId- AccordionSection:
- Heading: HTMLElement
- Contents: HTMLElement
- Status: Open | Closed
- ToggleStatus() - Expands or Collapses the section based on its current state.
- Fires off usa-accordion:section:expand(AccordionSection) when Closed -> Open
- Fires off usa-accordion:section:collapsed(AccordionSection) when Open -> Close
- Do not fire when initializing or when Expand or Collapse All
- AccordionSection:
- CloseAll() - Closes all sections.
- Fires off usa-accordion:collapseAll(Accordion)
- OpenAll() - Opens all sections.
- Fires off usa-accordion:expandAll(Accordion)
- toggleSectionWithId(sectionId: string) - toggles section with given id open/closed
- unregister() - reverse any html transformations made to instantiate an accordion
Events (See above)
- Maybe usa-accordion:initialized ??
As a user of the NCIDS, I want to be able to condense sections of content into an accordion on a site page, so that my visitors can easily locate a section and then explore it further without needing to scroll through large amounts of content to get to it.
Requirements
Notes
DoR DS Tasks
DoD DS Tasks
Resources
Scenarios
Acceptance Criteria
Default Single Accordion
Single Accordion with First Section Collapsed
Single Accordion with Multiple Expansions Allowed
Nested Default Accordions