Fix: Accordion focus on closed panel child element (#14)

* Fix: Accordion focus on closed tab child element * Updated accordion documentation * Added generated file Co-authored-by: Omar Muscatello <7016897+OmarMuscatello@users.noreply.github.com>
zetareticoli · Oct 19, 2021 · cd7003a · cd7003a
1 parent 3642e03
commit cd7003a
Show file tree

Hide file tree

Showing 4 changed files with 250 additions and 231 deletions.
diff --git a/content/docs/components/accordion.md b/content/docs/components/accordion.md
@@ -77,7 +77,6 @@ The Accordion component consists of a parent container with the `data-accordion`
 ```
 
 Each item is composed by a title and content part:
-:
 
 ```html
 <div data-accordion-item>
@@ -86,13 +85,20 @@ Each item is composed by a title and content part:
     Item Title
   </label>
   <div data-accordion-panel>
-
-    <!-- Panel Content here -->
-
+    <div data-accordion-panel-content>
+        <!-- Panel Content here -->
+    </div>
   </div>
 </div>
 ```
 
+### Panel content and accessibility
+
+You may have noticed the panel content is nested in two `<div>` elements: `[data-accordion-panel]` and
+`[data-accordion-panel-content]`. This allows performing expand/collapse animations while removing the element from the
+accessibility tree.
+
+
 ## Variables
 
 List of variables used. Customize the component's design by changing or overriding these values:

diff --git a/lib/accordion/accordion.css b/lib/accordion/accordion.css
@@ -55,6 +55,10 @@
   transition: padding var(--cssui-animation-timing) ease;
 }
 
+[data-accordion-panel-content] {
+  display: none;
+}
+
 [data-accordion-item] > input:checked + label > svg {
   transform: rotate(-180deg);
 }
@@ -64,3 +68,6 @@
   padding: var(--accordion-panel-padding);
 }
 
+[data-accordion-item] > input:checked ~ [data-accordion-panel] > [data-accordion-panel-content] {
+  display: block;
+}
diff --git a/lib/accordion/accordion.html b/lib/accordion/accordion.html
@@ -9,7 +9,9 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      <div data-accordion-panel-content>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
     </div>
   </div>
   <div data-accordion-item>
@@ -19,7 +21,9 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      <div data-accordion-panel-content>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
     </div>
   </div>
   <div data-accordion-item>
@@ -29,7 +33,9 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      <div data-accordion-panel-content>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
     </div>
   </div>
   <div data-accordion-item>
@@ -39,7 +45,9 @@
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
     </label>
     <div data-accordion-panel>
-      Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      <div data-accordion-panel-content>
+        Chamber sat word floor turning door feather rapping in the. Angels my hopes this scarce startled just at while and. Till to before liftednevermore betook tis but. Me till door from tapping discourse dreary the. Soul youhere a the nevernevermore i lore. Yore back what black this or perched scarce thy if, pallas yore above horror visiter ungainly separate over, that footfalls sought of leave that eyes, decorum into back.
+      </div>
     </div>
   </div>
 </section>