Repository: callstack/react-native-paper (ts)

Issue:
Full width Chips are not focusable anywhere on the chip
### Current behaviour

I have a Chip displayed in full width :
```
<Chip onPress={...}>Hello</Chip>
```

Sample : https://snack.expo.io/qeXIhkV_-

![image](https://user-images.githubusercontent.com/24563898/124610530-e3885c00-de70-11eb-95c7-83fdc9907a1a.png)

The chip is only pressable on the text and gets the focused state only around the text :

![image](https://user-images.githubusercontent.com/24563898/124610660-fdc23a00-de70-11eb-9434-a7814ad6f356.png)

### Expected behaviour

It should work like in previous versions :

https://snack.expo.io/ne1ESaMId

Here, when I press anywhere on the chip, the chip is focused and all the chip gets the focused state :

Default :

![image](https://user-images.githubusercontent.com/24563898/124611021-58f42c80-de71-11eb-968a-da239248beb5.png)

Pressed :

![image](https://user-images.githubusercontent.com/24563898/124610953-44b02f80-de71-11eb-859b-5f4a0e0dae90.png)

### What have you tried

I tried to give a full width View as children with the text in it but it didn't work too.

### Your Environment

| software              | version
| --------------------- | -------
| ios or android        | Android 10 (API level 29)
| react-native          | 0.63.4
| react-native-paper    | 4.7.2
| node                  | 14.11.0
| npm or yarn           | yarn 1.22.5


Pull request:
fix: full width Chip touchable not focusing
### Summary
Resolve #2804. 

Testing the web version I also realized that in larger resolutions the touchable was not filling all available space. I fixed that as well.

Before Web | Before Mobile
--- | ---
![web](https://user-images.githubusercontent.com/6487206/125131009-6ced9780-e0d8-11eb-84c1-7ec91e277fe3.png) | ![mobile](https://user-images.githubusercontent.com/6487206/125131058-8393ee80-e0d8-11eb-9375-b778a96048e6.jpeg)


### Test plan
Web | Mobile
--- | ---
![web](https://user-images.githubusercontent.com/6487206/125130690-c99c8280-e0d7-11eb-9632-d291908f5398.png) | ![mobile](https://user-images.githubusercontent.com/6487206/125130776-f81a5d80-e0d7-11eb-8549-1a0f6502c062.jpeg)



Patch:
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 538472e49..9d9eb6f85 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -242,7 +242,7 @@ const Chip = ({
       <TouchableRipple
         borderless
         delayPressIn={0}
-        style={{ borderRadius }}
+        style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={handlePressIn}
@@ -338,7 +338,7 @@ const styles = StyleSheet.create({
   container: {
     borderWidth: StyleSheet.hairlineWidth,
     borderStyle: 'solid',
-    flexDirection: 'row',
+    flexDirection: Platform.select({ default: 'column', web: 'row' }),
   },
   content: {
     flexDirection: 'row',
@@ -380,6 +380,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  touchable: {
+    flex: 1,
+  },
 });
 
 export default withTheme(Chip);
diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
index 47010da2f..08507daae 100644
--- a/src/components/List/ListAccordion.tsx
+++ b/src/components/List/ListAccordion.tsx
@@ -85,6 +85,10 @@ type Props = {
    * TestID used for testing purposes
    */
   testID?: string;
+  /**
+   * Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable.
+   */
+  accessibilityLabel?: string;
 };
 
 /**
@@ -147,6 +151,7 @@ const ListAccordion = ({
   onPress,
   onLongPress,
   expanded: expandedProp,
+  accessibilityLabel,
 }: Props) => {
   const [expanded, setExpanded] = React.useState<boolean>(
     expandedProp || false
@@ -191,6 +196,8 @@ const ListAccordion = ({
           accessibilityTraits="button"
           accessibilityComponentType="button"
           accessibilityRole="button"
+          accessibilityState={{ expanded: isExpanded }}
+          accessibilityLabel={accessibilityLabel}
           testID={testID}
           delayPressIn={0}
           borderless
@@ -215,7 +222,7 @@ const ListAccordion = ({
               >
                 {title}
               </Text>
-              {description && (
+              {description ? (
                 <Text
                   selectable={false}
                   numberOfLines={descriptionNumberOfLines}
@@ -229,7 +236,7 @@ const ListAccordion = ({
                 >
                   {description}
                 </Text>
-              )}
+              ) : null}
             </View>
             <View
               style={[styles.item, description ? styles.multiline : undefined]}


Test patch:
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index 063467963..3b01b7ca4 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -10,7 +10,7 @@ exports[`renders chip with close button 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "flexDirection": "row",
+      "flexDirection": "column",
     }
   }
 >
@@ -36,9 +36,14 @@ exports[`renders chip with close button 1`] = `
         Object {
           "overflow": "hidden",
         },
-        Object {
-          "borderRadius": 16,
-        },
+        Array [
+          Object {
+            "borderRadius": 16,
+          },
+          Object {
+            "flex": 1,
+          },
+        ],
       ]
     }
   >
@@ -227,7 +232,7 @@ exports[`renders chip with icon 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "flexDirection": "row",
+      "flexDirection": "column",
     }
   }
 >
@@ -253,9 +258,14 @@ exports[`renders chip with icon 1`] = `
         Object {
           "overflow": "hidden",
         },
-        Object {
-          "borderRadius": 16,
-        },
+        Array [
+          Object {
+            "borderRadius": 16,
+          },
+          Object {
+            "flex": 1,
+          },
+        ],
       ]
     }
   >
@@ -371,7 +381,7 @@ exports[`renders chip with onPress 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "flexDirection": "row",
+      "flexDirection": "column",
     }
   }
 >
@@ -397,9 +407,14 @@ exports[`renders chip with onPress 1`] = `
         Object {
           "overflow": "hidden",
         },
-        Object {
-          "borderRadius": 16,
-        },
+        Array [
+          Object {
+            "borderRadius": 16,
+          },
+          Object {
+            "flex": 1,
+          },
+        ],
       ]
     }
   >
@@ -467,7 +482,7 @@ exports[`renders outlined disabled chip 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "flexDirection": "row",
+      "flexDirection": "column",
     }
   }
 >
@@ -493,9 +508,14 @@ exports[`renders outlined disabled chip 1`] = `
         Object {
           "overflow": "hidden",
         },
-        Object {
-          "borderRadius": 16,
-        },
+        Array [
+          Object {
+            "borderRadius": 16,
+          },
+          Object {
+            "flex": 1,
+          },
+        ],
       ]
     }
   >
@@ -563,7 +583,7 @@ exports[`renders selected chip 1`] = `
       "borderStyle": "solid",
       "borderWidth": 0.5,
       "elevation": 0,
-      "flexDirection": "row",
+      "flexDirection": "column",
     }
   }
 >
@@ -589,9 +609,14 @@ exports[`renders selected chip 1`] = `
         Object {
           "overflow": "hidden",
         },
-        Object {
-          "borderRadius": 16,
-        },
+        Array [
+          Object {
+            "borderRadius": 16,
+          },
+          Object {
+            "flex": 1,
+          },
+        ],
       ]
     }
   >
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index d6bbab376..aeb51fe23 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -11,6 +11,11 @@ exports[`renders expanded accordion 1`] = `
   >
     <View
       accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "expanded": true,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -221,6 +226,11 @@ exports[`renders list accordion with children 1`] = `
   >
     <View
       accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "expanded": false,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -410,6 +420,11 @@ exports[`renders list accordion with custom title and description styles 1`] = `
   >
     <View
       accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "expanded": false,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -582,6 +597,11 @@ exports[`renders list accordion with left items 1`] = `
   >
     <View
       accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "expanded": false,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -771,6 +791,11 @@ exports[`renders multiline list accordion 1`] = `
   >
     <View
       accessibilityRole="button"
+      accessibilityState={
+        Object {
+          "expanded": false,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index ce36e02b6..0eb37667e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -93,7 +93,7 @@ exports[`renders list item with custom description 1`] = `
                 "borderStyle": "solid",
                 "borderWidth": 0.5,
                 "elevation": 0,
-                "flexDirection": "row",
+                "flexDirection": "column",
               }
             }
           >
@@ -119,9 +119,14 @@ exports[`renders list item with custom description 1`] = `
                   Object {
                     "overflow": "hidden",
                   },
-                  Object {
-                    "borderRadius": 16,
-                  },
+                  Array [
+                    Object {
+                      "borderRadius": 16,
+                    },
+                    Object {
+                      "flex": 1,
+                    },
+                  ],
                 ]
               }
             >