From f38cbed6eab916f0334ae72987232b495b74ba51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 31 Aug 2022 10:04:36 +0300
Subject: [PATCH] Fixed #2905 - Improve Deferred Content implementation for
 Accessibility

---
 .../deferredcontent/DeferredContentDemo.vue    |  6 +++---
 .../deferredcontent/DeferredContentDoc.vue     | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/views/deferredcontent/DeferredContentDemo.vue b/src/views/deferredcontent/DeferredContentDemo.vue
index edd5cf4f0..f7931c5c6 100755
--- a/src/views/deferredcontent/DeferredContentDemo.vue
+++ b/src/views/deferredcontent/DeferredContentDemo.vue
@@ -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.
                 </div>
 
-                <DeferredContent @load="onImageLoad">
+                <!-- <DeferredContent @load="onImageLoad">
                     <img src="demo/images/nature/nature4.jpg" alt="Nature"/>
-                </DeferredContent>
+                </DeferredContent> -->
 
                 <div style="height: 500px">
                 </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">
                         <Column field="code" header="Code"></Column>
                         <Column field="name" header="Name"></Column>
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index 25b0acf2d..07dd999c3 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -67,6 +67,24 @@ import DeferredContent from 'primevue/deferredcontent';
 		<h5>Styling</h5>
 		<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>
 		<p>None.</p>
     </AppDoc>