FormidableLabs / eslint-plugin-react-native-a11y

React Native specific accessibility linting rules.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add links to rule definitions in rule error messages

jevakallio opened this issue · comments

Consider error message like:

const errorMessage = 'accessibilityComponentType must be one of defined values'

If I get this error, I won't have any idea what the defined values are.

However, if the error message were something like:

const errorMessage = `accessibilityComponentType value is not valid. 

See valid values: https://github.com/FormidableLabs/eslint-plugin-react-native-a11y/blob/master/docs/rules/has-valid-accessibility-component-type.md`

Then it would be easier to check what the valid values are.

I've done some digging and it looks like this might not be possible at the moment. There is an issue filed in the main eslint repo to expose the meta.docs.url value as part of error messages by default. However, it's currently down to the code editor/IDE whether this value is presented. Atom Linter displays the url value as a hyperlink within the error message but i'm not 100% sure that vscode does (I've raised an issue with vscode-eslint asking whether there is support for it). Currently, any URLs included in the context.report() message field are displayed as plaintext.

As suggested by @jevakallio , we'll just work on making error messages more user friendly in the meantime.

@alex-saunders I reckon even a plaintext link would be of value here. The client displaying it as clickable is just a bonus.

@imranolas I've mocked up an alternative to the plaintext link:
With link:
screen shot 2018-07-12 at 11 40 10

Without:
screen shot 2018-07-12 at 11 43 06

cc: @jevakallio , what are your thoughts on the given options?