From 89f6f2fe847e8c7a0a10bdfcbd7aafea68822819 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 11 Sep 2024 10:54:05 +0300
Subject: [PATCH] Fixed #6329

---
 .../doc/selectbutton/AccessibilityDoc.vue     | 25 +++----------------
 .../doc/togglebutton/AccessibilityDoc.vue     |  6 ++---
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/apps/showcase/doc/selectbutton/AccessibilityDoc.vue b/apps/showcase/doc/selectbutton/AccessibilityDoc.vue
index 35ad2cc66..17f59dad3 100644
--- a/apps/showcase/doc/selectbutton/AccessibilityDoc.vue
+++ b/apps/showcase/doc/selectbutton/AccessibilityDoc.vue
@@ -1,10 +1,7 @@
 <template>
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
-        <p>
-            SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
-            <i>aria-labelledby</i> property.
-        </p>
+        <p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
 
         <h3>Keyboard Support</h3>
         <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
@@ -19,25 +16,11 @@
                 <tbody>
                     <tr>
                         <td><i>tab</i></td>
-                        <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
                     </tr>
                     <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">right arrow</i>
-                                <i>up arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the previous option.</td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span class="inline-flex flex-col">
-                                <i class="mb-1">left arrow</i>
-                                <i>down arrow</i>
-                            </span>
-                        </td>
-                        <td>Moves focus to the next option.</td>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
                     </tr>
                     <tr>
                         <td><i>space</i></td>
diff --git a/apps/showcase/doc/togglebutton/AccessibilityDoc.vue b/apps/showcase/doc/togglebutton/AccessibilityDoc.vue
index 275d36350..e98beb7a7 100644
--- a/apps/showcase/doc/togglebutton/AccessibilityDoc.vue
+++ b/apps/showcase/doc/togglebutton/AccessibilityDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
         <h3>Screen Reader</h3>
         <p>
-            ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props,
-            it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
-            that does not change related to state.
+            ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
+            highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
+            does not change related to state.
         </p>
 
         <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />