[Web] Allow text with accessibilityRole="link" to have styling of a button for SEO

[kopax]

I want to make a link within my react application that looks like button.

So far, the button doesn't have an accessibilityRole, because in a SEO point of view, buttons shouldn't change the view of an application, see https://medium.com/better-programming/accessibility-web-links-should-be-links-and-web-buttons-should-be-buttons-182ff042d087

I am using react-native-paper, how can I make a <Text />that look like a <Button />?

I have the same question for https://callstack.github.io/react-native-paper/drawer-item.html

Current behaviour

Text cannot look like a button

Expected behaviour

I expect to be able to create a link that looks like button using react-native-paper

Possible solution

Just as an idea to solve this issue: In https://github.com/bootstrap-styled/v4 by using a props.tag on every UI components:

import React from 'react';
import { StyleSheet, Text as TextDefault } from 'react-native';

function Text({
  tag: Tag,
  style,
  ...rest
}) {
  return (
    <Tag style={[styles.text, style]} {...rest} />
  );
}

Text.propTypes = {
  /** the component used for rendering **/
  tag: PropTypes.elementType,
};

Text.defaultProps = {
  tag: TextDefault,
};

const styles = StyleSheet.create({
  text: {},
});

export default Text;

And in Button:

import React from 'react';
import { StyleSheet, Button as ButtonDefault } from 'react-native';

const styles = StyleSheet.create({
  button: {},
});

function Button({
  tag: Tag,
  style,
  ...rest
}) {
  return (
    <Tag style={[styles.button, style]} {...rest} />
  );
}

Button.propTypes = {
  /** the component used for rendering **/
  tag: PropTypes.elementType,
};

Button.defaultProps = {
  tag: ButtonDefault,
};

export default Button;

We also moved the styles in their own file (aka mixins), so we could call the styling of any tag on any tag.

Perhaps this could be used in react-native-paper to provide a more flexible layout.

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.