diff --git a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
index b947cf446..ea181513b 100644
--- a/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Button/__tests__/__snapshots__/index-test.js.snap
@@ -1,69 +1,67 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/Button prop "accessibilityLabel" 1`] = `
-
+
`;
exports[`components/Button prop "color" 1`] = `
-
+
`;
exports[`components/Button prop "disabled" 1`] = `
-
+
`;
exports[`components/Button prop "testID" 1`] = `
-
+
`;
exports[`components/Button prop "title" 1`] = `
-
+
`;
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
index 52417b3b0..950fe8a0a 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/__snapshots__/index-test.js.snap
@@ -113,10 +113,9 @@ exports[`components/Pressable prop "accessibilityRole" value alters HTML element
`;
exports[`components/Pressable prop "accessibilityRole" value is "button" 1`] = `
-
`;
diff --git a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
index 183f37755..9aae28dad 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/Text/__tests__/__snapshots__/index-test.js.snap
@@ -59,11 +59,10 @@ exports[`components/Text prop "accessibilityRole" value alters HTML element 1`]
`;
exports[`components/Text prop "accessibilityRole" value is "button" 1`] = `
-
`;
diff --git a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
index 7e35f2787..a053e411b 100644
--- a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
+++ b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
@@ -53,10 +53,9 @@ exports[`components/View prop "accessibilityRole" value alters HTML element 1`]
`;
exports[`components/View prop "accessibilityRole" value is "button" 1`] = `
-
`;
diff --git a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
index 8358d63f1..cbec3bced 100644
--- a/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/createElement/__tests__/index-test.js
@@ -341,8 +341,9 @@ describe('exports/createElement', () => {
const { container: isEmpty } = render(createElement('div', { accessibilityRole: null }));
expect(getAttribute(isEmpty, 'role')).toBeNull();
const { container: hasValue } = render(createElement('div', { accessibilityRole: 'button' }));
+ expect(hasValue.firstChild.nodeName).toBe('BUTTON');
expect(getAttribute(hasValue, 'role')).toBe('button');
- expect(getAttribute(hasValue, 'tabIndex')).toBe('0');
+ expect(getAttribute(hasValue, 'tabIndex')).toBeNull();
const { container: roleIsNone } = render(createElement('div', { accessibilityRole: 'none' }));
expect(getAttribute(roleIsNone, 'role')).toBe('presentation');
});
@@ -481,12 +482,12 @@ describe('exports/createElement', () => {
const { container: isFocusableRole } = render(
createElement('div', { accessibilityRole: 'button', focusable: true })
);
- expect(getAttribute(isFocusableRole, 'tabindex')).toBe('0');
+ expect(getAttribute(isFocusableRole, 'tabindex')).toBeNull();
const { container: isFalseFocusableRole } = render(
createElement('div', { accessibilityRole: 'button', focusable: false })
);
- expect(getAttribute(isFalseFocusableRole, 'tabindex')).toBeNull();
+ expect(getAttribute(isFalseFocusableRole, 'tabindex')).toBe('-1');
});
});
});
diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js
index d2b58c39b..3e2997925 100644
--- a/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js
+++ b/packages/react-native-web/src/modules/AccessibilityUtil/__tests__/propsToAccessibilityComponent-test.js
@@ -8,7 +8,7 @@ describe('modules/AccessibilityUtil/propsToAccessibilityComponent', () => {
});
test('when "accessibilityRole" is "button"', () => {
- expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toBeUndefined();
+ expect(propsToAccessibilityComponent({ accessibilityRole: 'button' })).toEqual('button');
});
test('when "accessibilityRole" is "heading"', () => {
diff --git a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js b/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
index 3faf87a5d..880f2ce73 100644
--- a/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
+++ b/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
@@ -27,7 +27,8 @@ const roleComponents = {
main: 'main',
navigation: 'nav',
region: 'section',
- strong: 'strong'
+ strong: 'strong',
+ button: 'button'
};
const emptyObject = {};