vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #2905 - Improve Deferred Content implementation for Accessibility

pull/2910/head
Tuğçe Küçükoğlu 2022-08-31 10:04:36 +03:00
parent cee721b151
commit f38cbed6ea
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/deferredcontent/DeferredContentDemo.vue
View File

@ -14,14 +14,14 @@
Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance. Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
</div> </div>
<DeferredContent @load="onImageLoad"> <!-- <DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/> <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent> </DeferredContent> -->
<div style="height: 500px"> <div style="height: 500px">
</div> </div>
<DeferredContent @load="onDataLoad"> <DeferredContent @load="onDataLoad" role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
<DataTable :value="products" responsiveLayout="scroll"> <DataTable :value="products" responsiveLayout="scroll">
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>

18
src/views/deferredcontent/DeferredContentDoc.vue
View File

@ -67,6 +67,24 @@ import DeferredContent from 'primevue/deferredcontent';
<h5>Styling</h5> <h5>Styling</h5>
<p>Component does not apply any styling.</p> <p>Component does not apply any styling.</p>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only.
Any valid attribute is passed to the container element so you have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
</p>
<pre v-code><code>
&lt;DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down"&gt;
Content
&lt;/DeferredContent&gt;
</code></pre>
<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
</DevelopmentSection>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>None.</p> <p>None.</p>
</AppDoc> </AppDoc>