From 6c88a142e423959aa1ebedc453b40e121161fc08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 28 Nov 2023 15:22:12 +0300
Subject: [PATCH] #5429 for DeferredContent

---
 .../doc/deferredcontent/accessibilitydoc.js   | 35 +++++++++----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/components/doc/deferredcontent/accessibilitydoc.js b/components/doc/deferredcontent/accessibilitydoc.js
index 70d9d87c03..f02f33bbb6 100644
--- a/components/doc/deferredcontent/accessibilitydoc.js
+++ b/components/doc/deferredcontent/accessibilitydoc.js
@@ -1,31 +1,28 @@
 import { CodeHighlight } from '@/components/doc/common/codehighlight';
-import { DevelopmentSection } from '@/components/doc/common/developmentsection';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 
 export function AccessibilityDoc() {
     return (
-        <DevelopmentSection>
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <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>
-                <CodeHighlight>
-                    {`
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <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>
+            <CodeHighlight>
+                {`
 <DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
 Content
 </DeferredContent>
 `}
-                </CodeHighlight>
+            </CodeHighlight>
 
-                <h3>Keyboard Support</h3>
-                <p>Component does not include any interactive elements.</p>
-            </DocSectionText>
-        </DevelopmentSection>
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
     );
 }