From: karland <anders-betrachtet@online.de>
Date: Fri, 4 Nov 2016 11:15:55 +0000 (+0100)
Subject: Made Accordion consistent
X-Git-Tag: v6.4.0-rc1~90^2
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9329%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Made Accordion consistent
---

diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md
index 27a2078f5..db4f7830e 100644
--- a/docs/pages/accordion.md
+++ b/docs/pages/accordion.md
@@ -20,9 +20,13 @@ Each pane has a **title**, an `<a>` with the class `.accordion-title`, and a **c
 ```html
 <ul class="accordion" data-accordion>
   <li class="accordion-item is-active" data-accordion-item>
+    <!-- Accordion tab title -->
     <a href="#" class="accordion-title">Accordion 1</a>
+
+    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
     <div class="accordion-content" data-tab-content>
-      I would start in the open state, due to using the `is-active` state class.
+      <p>Panel 1. Lorem ipsum dolor</p>
+      <a href="#">Nowhere to Go</a>
     </div>
   </li>
   <!-- ... -->
@@ -49,8 +53,8 @@ Once you put it all together, here's what you get!
   <li class="accordion-item" data-accordion-item>
     <a href="#" class="accordion-title">Accordion 3</a>
     <div class="accordion-content" data-tab-content>
-      Pick a date!
-      <input type="date"></input>
+      Type your name!
+      <input type="text"></input>
     </div>
   </li>
 </ul>
diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index fb5aac142..c0c088cec 100644
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -98,35 +98,34 @@ description: Everything but.
 
 ## Accordion
 
+
 ```html_example
-<ul class="accordion" data-accordion role="tablist">
-  <li class="accordion-item is-active">
-    <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
-    <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
-    <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
-    <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
-      Panel 1. Lorem ipsum dolor
+<ul class="accordion" data-accordion>
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 1</a>
+    <div class="accordion-content" data-tab-content >
+      <p>Panel 1. Lorem ipsum dolor</p>
+      <a href="#">Nowhere to Go</a>
     </div>
   </li>
-  <li class="accordion-item">
-    <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
-    <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
-    <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
-    <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
-      Panel 2. Lorem ipsum dolor
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 2</a>
+    <div class="accordion-content" data-tab-content>
+      <textarea></textarea>
+      <button class="button">I do nothing!</button>
     </div>
   </li>
-  <li class="accordion-item">
-    <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. -->
-    <a href="#panel1d" role="tab" class="accordion-title" id="panel1d-heading" aria-controls="panel1d">Accordion 1</a>
-    <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. -->
-    <div id="panel1d" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel1d-heading">
-      Panel 3. Lorem ipsum dolor
+  <li class="accordion-item" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 3</a>
+    <div class="accordion-content" data-tab-content>
+      Type your name!
+      <input type="text"></input>
     </div>
   </li>
 </ul>
 ```
 
+
 ---
 
 ## Accordion Menu