Update visual tests for accordion to take account of new data-attribute requirement

diff --git a/test/visual/accordion/focus.html b/test/visual/accordion/focus.html
index dce57aeb5eb8f298d51dba16a0f1215224a3e28d..1535fb87d48a1eee5592acb610b4c55c18a9e72d 100644 (file)
--- a/test/visual/accordion/focus.html
+++ b/test/visual/accordion/focus.html
@@ -14,21 +14,21 @@
       <p>This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.</p>
 
       <ul class="accordion" data-accordion role="tablist">
-        <li class="accordion-item is-active">
+        <li class="accordion-item is-active" data-accordion-item>
           <a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
           <div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
             <p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
           </div>
         </li>
 
-        <li class="accordion-item">
+        <li class="accordion-item" data-accordion-item>
           <a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
           <div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
             <p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
           </div>
         </li>
 
-        <li class="accordion-item">
+        <li class="accordion-item" data-accordion-item>
           <a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
           <div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
             <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
@@ -41,21 +41,21 @@
       <p>This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles <em>without opening/closing them</em>, and pressing space will open or close a pane.</p>
 
       <ul class="accordion" data-accordion role="tablist" data-multi-expand="true">
-        <li class="accordion-item is-active">
+        <li class="accordion-item is-active" data-accordion-item>
           <a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
           <div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
             <p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
           </div>
         </li>
 
-        <li class="accordion-item">
+        <li class="accordion-item" data-accordion-item>
           <a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
           <div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
             <p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
           </div>
         </li>
 
-        <li class="accordion-item">
+        <li class="accordion-item" data-accordion-item>
           <a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
           <div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
             <p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>

diff --git a/test/visual/accordion/item-attributes.html b/test/visual/accordion/item-attributes.html
deleted file mode 100644 (file)
index 7225997..0000000
--- a/test/visual/accordion/item-attributes.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!doctype html>
-<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
-<html class="no-js" lang="en" dir="ltr">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Foundation for Sites Testing</title>
-    <link href="../assets/css/foundation.css" rel="stylesheet" />
-  </head>
-  <body>
-    <div class="row column">
-      <h1>Accordion: Item Attributes</h1>
-
-      <p>Accordion items can be defined as <code>&lt;li&gt;</code>s, or by having the attribute <code>data-accordion-item</code>.</p>
-
-      <hr>
-
-      <p>This accordion uses list items and has no attribute.</p>
-
-      <ul class="accordion" data-accordion>
-        <li class="accordion-item is-active">
-          <a href="#" class="accordion-title">Accordion 1</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </li>
-        <li class="accordion-item">
-          <a href="#" class="accordion-title">Accordion 2</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </li>
-      </ul>
-
-      <hr>
-
-      <p>This accordion uses generic tags with an attribute.</p>
-
-      <div class="accordion" data-accordion>
-        <div class="accordion-item is-active" data-accordion-item>
-          <a href="#" class="accordion-title">Accordion 1</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </div>
-        <div class="accordion-item" data-accordion-item>
-          <a href="#" class="accordion-title">Accordion 2</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </div>
-      </div>
-
-      <hr>
-
-      <p>This accordion mixes both methods.</p>
-
-      <div class="accordion" data-accordion>
-        <li class="accordion-item is-active">
-          <a href="#" class="accordion-title">Accordion 1</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </li>
-        <div class="accordion-item" data-accordion-item>
-          <a href="#" class="accordion-title">Accordion 2</a>
-          <div class="accordion-content" data-tab-content>
-            Item
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <script src="../assets/js/vendor.js"></script>
-    <script src="../assets/js/foundation.js"></script>
-    <script>
-      $(document).foundation();
-    </script>
-  </body>
-</html>