fix: fix drawer tab order on web for better accessibility (react-navigation#12616)

**Motivation**
Currently, the Drawer component on web has an incorrect tab order when
positioned on the left side of the screen and when the `drawerType` is
`'permanent'` . This creates accessibility issues for keyboard users and
those using assistive technologies, as the tab sequence doesn't follow a
logical left-to-right order when the drawer is on the left side.

**Problem**
The current implementation uses `flex-direction: row-reverse` to
position the drawer on the left side. While this achieves the desired
visual layout, it creates an incorrect tab order because the DOM
elements are rendered in a sequence that doesn't match the visual
layout. This violates accessibility best practices and makes navigation
difficult for keyboard users.

**Solution**
This PR fixes the tab order by:
1. Removing the use of `flex-direction: row-reverse`
2. Ensuring the DOM elements are written in the proper left-to-right
sequence based on the drawer position
3. Maintaining the same visual layout while improving accessibility

See [MDS Documentation on
tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex)

> Warning: You are recommended to only use 0 and -1 as tabindex values.
**Avoid using tabindex values greater than 0 and CSS properties that can
change the order of focusable HTML elements (Ordering flex items)**.
Doing so makes it difficult for people who rely on using keyboard for
navigation or assistive technology to navigate and operate page content.
**Instead, write the document with the elements in a logical sequence.**

**Test plan**

1. The change is reflected on `Drawer Layout` in the example app.
2. Change the drawer type to "permanent" and ensure that the drawer
position is set to "left"
3. Using the `tab` key on the keyboard, tab through the elements.
4. See that the tab order is in sequence. `Shift + tab` to tab in
reverse.
5. Change the drawer position to "right"
6. Again, tab through the elements, and see that the tab order is in
sequence, matching the visual layout.

**Screenshots**

**Before (Incorrect tab order)**


https://github.com/user-attachments/assets/fa92e69b-ebfc-49f9-88bb-0ff7788da9fe

**After (Corrected tab order)**


https://github.com/user-attachments/assets/735f63d2-818e-455b-94c3-de3c847f3a95

**Everything working as before**


https://github.com/user-attachments/assets/f163f9c7-6ce4-4650-b8c5-2cb610aa084e

---------

Co-authored-by: Satyajit Sahoo <[email protected]>

Author: angelalagao

example/src/Screens/DrawerView.tsx

@@ -7,7 +7,7 @@ import { Drawer } from 'react-native-drawer-layout';
 
 import { DrawerProgress } from '../Shared/DrawerProgress';
 
-const DRAWER_TYPES = ['front', 'back', 'slide'] as const;
+const DRAWER_TYPES = ['front', 'back', 'slide', 'permanent'] as const;
 
 export function DrawerView() {
   const { showActionSheetWithOptions } = useActionSheet();

packages/react-native-drawer-layout/src/views/Drawer.tsx

@@ -102,64 +102,62 @@ export function Drawer({
         }
       : null;
 
-  return (
-    <View style={[styles.container, style]}>
-      <DrawerProgressContext.Provider value={progress}>
+  const drawerElement = (
+    <View
+      key="drawer"
+      ref={drawerRef}
+      style={[
+        styles.drawer,
+        {
+          width: drawerWidth,
+          position: drawerType === 'permanent' ? 'relative' : 'absolute',
+          zIndex: drawerType === 'back' ? -1 : 1,
+        },
+        drawerAnimatedStyle,
+        drawerStyle,
+      ]}
+    >
+      {renderDrawerContent()}
+    </View>
+  );
+
+  const mainContent = (
+    <View key="main" style={styles.main}>
+      <View style={[styles.content, contentAnimatedStyle]}>
         <View
-          style={[
-            styles.main,
-            {
-              flexDirection:
-                drawerType === 'permanent'
-                  ? (isRight && direction === 'ltr') ||
-                    (!isRight && direction === 'rtl')
-                    ? 'row'
-                    : 'row-reverse'
-                  : 'row',
-            },
-          ]}
+          aria-hidden={isOpen && drawerType !== 'permanent'}
+          style={styles.content}
         >
-          <View style={[styles.content, contentAnimatedStyle]}>
-            <View
-              aria-hidden={isOpen && drawerType !== 'permanent'}
-              style={styles.content}
-            >
-              {children}
-            </View>
-            {drawerType !== 'permanent' ? (
-              <Overlay
-                open={open}
-                progress={progress}
-                onPress={() => onClose()}
-                style={overlayStyle}
-                accessibilityLabel={overlayAccessibilityLabel}
-              />
-            ) : null}
-          </View>
-          <View
-            ref={drawerRef}
-            style={[
-              styles.drawer,
-              {
-                width: drawerWidth,
-                position: drawerType === 'permanent' ? 'relative' : 'absolute',
-                zIndex: drawerType === 'back' ? -1 : 0,
-              },
-              drawerAnimatedStyle,
-              drawerStyle,
-            ]}
-          >
-            {renderDrawerContent()}
-          </View>
+          {children}
         </View>
-      </DrawerProgressContext.Provider>
+        {drawerType !== 'permanent' ? (
+          <Overlay
+            open={open}
+            progress={progress}
+            onPress={() => onClose()}
+            style={overlayStyle}
+            accessibilityLabel={overlayAccessibilityLabel}
+          />
+        ) : null}
+      </View>
     </View>
   );
+
+  return (
+    <DrawerProgressContext.Provider value={progress}>
+      <View style={[styles.container, style]}>
+        {!isRight && drawerElement}
+        {mainContent}
+        {isRight && drawerElement}
+      </View>
+    </DrawerProgressContext.Provider>
+  );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    flexDirection: 'row',
   },
   drawer: {
     top: 0,
@@ -172,5 +170,6 @@ const styles = StyleSheet.create({
   },
   main: {
     flex: 1,
+    flexDirection: 'row',
   },
 });