From 10d2988085576eb0898e6ff68aa3e3415e01fc30 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 27 Nov 2023 13:59:53 +0300
Subject: [PATCH] Accessibility doc updated

---
 doc/inlinemessage/AccessibilityDoc.vue | 71 +-------------------------
 doc/message/AccessibilityDoc.vue       | 40 +--------------
 2 files changed, 2 insertions(+), 109 deletions(-)

diff --git a/doc/inlinemessage/AccessibilityDoc.vue b/doc/inlinemessage/AccessibilityDoc.vue
index 21882ba72..e795b71a0 100644
--- a/doc/inlinemessage/AccessibilityDoc.vue
+++ b/doc/inlinemessage/AccessibilityDoc.vue
@@ -2,77 +2,8 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
+            InlineMessage component uses <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
             <i>aria-label</i> can optionally be used as well.
         </p>
-
-        <p>
-            Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <NuxtLink to="/configuration/#locale">locale</NuxtLink> API by default, you may use <i>closeButtonProps</i> to customize the
-            element and override the default <i>aria-label</i>.
-        </p>
-
-        <h3>Close Button Keyboard Support</h3>
-        <div class="doc-tablewrapper">
-            <table class="doc-table">
-                <thead>
-                    <tr>
-                        <th>Key</th>
-                        <th>Function</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>
-                            <i>enter</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <i>space</i>
-                        </td>
-                        <td>Closes the message.</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
     </DocSectionText>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
-
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
-
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-const confirm = useConfirm();
-const isVisible = ref(false);
-
-const openDialog = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        onShow: () => {
-            isVisible.value = true;
-        },
-        onHide: () => {
-            isVisible.value = false;
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/message/AccessibilityDoc.vue b/doc/message/AccessibilityDoc.vue
index 21882ba72..6dfb74fc7 100644
--- a/doc/message/AccessibilityDoc.vue
+++ b/doc/message/AccessibilityDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
+            Message component uses <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and
             <i>aria-label</i> can optionally be used as well.
         </p>
 
@@ -38,41 +38,3 @@
         </div>
     </DocSectionText>
 </template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-<ConfirmDialog id="confirm" />
-
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
-
-`
-            },
-            code2: {
-                basic: `
-<script setup>
-const confirm = useConfirm();
-const isVisible = ref(false);
-
-const openDialog = () => {
-    confirm.require({
-        message: 'Are you sure you want to proceed?',
-        header: 'Confirmation',
-        onShow: () => {
-            isVisible.value = true;
-        },
-        onHide: () => {
-            isVisible.value = false;
-        }
-    });
-};
-<\/script>
-`
-            }
-        };
-    }
-};
-</script>