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" />