fix: changed accessibility label based on onPress callback (#3719)

callstack · Mar 6, 2023 · 2f8a86f · 2f8a86f
1 parent 49bdf46
commit 2f8a86f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
@@ -130,7 +130,7 @@ const AppbarContent = ({
 
   return (
     <TouchableWithoutFeedback
-      accessibilityRole="button"
+      accessibilityRole={onPress ? 'button' : 'text'}
       onPress={onPress}
       disabled={!onPress}
     >

diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -210,6 +210,29 @@ describe('renderAppbarContent', () => {
       expect.arrayContaining([expect.objectContaining(v2Spacing)])
     );
   });
+
+  it('Is recognized as a header when no onPress callback has been pressed', () => {
+    const { getByRole } = render(
+      <mockSafeAreaContext.SafeAreaProvider>
+        <Appbar.Header>
+          <Appbar.Content title="Accessible test" />
+        </Appbar.Header>
+      </mockSafeAreaContext.SafeAreaProvider>
+    );
+
+    expect(getByRole('text')).toBeTruthy();
+  });
+  it('Is recognized as a button when onPress callback has been pressed', () => {
+    const { getByRole } = render(
+      <mockSafeAreaContext.SafeAreaProvider>
+        <Appbar.Header>
+          <Appbar.Content title="Accessible test" onPress={() => {}} />
+        </Appbar.Header>
+      </mockSafeAreaContext.SafeAreaProvider>
+    );
+
+    expect(getByRole('button')).toBeTruthy();
+  });
 });
 
 describe('AppbarAction', () => {

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -700,7 +700,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
         </View>
       </View>
       <View
-        accessibilityRole="button"
+        accessibilityRole="text"
         accessibilityState={
           Object {
             "disabled": true,