---
{
	"title": "Data Inview testing page",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "A testing page for Data Inview plugin",
	"js": ["../../../demos/data-inview/demo/data-inview"],
	"altLangPrefix": "data-inview",
	"dateModified": "2019-10-15"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>This page is for testing the accessbility for the transitions that using the Data Inview plugin</p>
</section>

<section>
	<h2>Expected Behaviour</h2>
	<p>All the content in the Test section is readable by screen readers.</p>
</section>

<section>
	<h2>How to test</h2>
	<p>Load the page, open the screen reader (JAWS, NVDA, etc.), and see if the screen reader reads the content in the test section.</p>
</section>

<section>
	<h2>Section for testing</h2>
	<div class="text-muted">
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
	</div>
	<section id="slide-effect1" class="slide in-only bar-demo">
		<h3 class="no-gutter">Section that slides in only <code>id="slide-effect1"</code></h3>
		<div class="jumbotron mrgn-tp-lg">
			<p>This section slides in based upon the view state of the next section.</p>
		</div>
	</section>

	<section class="wb-inview show-none bar-demo" data-inview="slide-effect1">
		<h3 class="no-gutter">Section that triggers a slide for the previous section</h3>
		<p>The previous section will slide in when this section is <strong>partially out</strong> of the viewport (with <code>class=&quot;show-none&quot;</code>), then stay in place.</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;section id=&quot;slide-effect1&quot; class=&quot;slide in-only bar-demo&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that slides in&lt;/h3&gt;
	...
&lt;/section&gt;

&lt;section class=&quot;wb-inview show-none bar-demo&quot; data-inview=&quot;slide-effect1&quot;&gt;
	&lt;h3 class=&quot;no-gutter&quot;&gt;Section that triggers a slide effect for the previous section&lt;/h3&gt;
	...
&lt;/section&gt;
</code></pre>
		</details>
	</section>

	<div class="text-muted">
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		<p role="img" aria-label="">Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		<p role="img" aria-label="">Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		<p role="img" aria-label="">Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
	</div>
</section>
