why is the accessibilityHint enforced as mandatory?

[veronika]

From your documentation

"An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not apparent from the accessibility label."

Therefore, if the result is apparent from a label, and the hint is not added, the linter shouldn't flag it as an error. But hint is flagged as an error each time the label is added to an element.

An example:

<Image accessibilityLabel='Facebook logo' accessibilityRole="image" />

will give me an error - error has accessibilityLabel prop but no accessibilityHint react-native-a11y/has-accessibility-hint
But there is no other information I would want to convey for a logo... so no hint is needed.

I guess this can be improved by not including images?

[Greg]

I'm not a fan of this rule either, for the same reasons. I just disabled it in my .eslintrc config:

rules: {
    'react-native-a11y/has-accessibility-hint': 'off'
}

[Ken-ichi]

I'm by no means an a11y expert so take this for what it's worth, but Apple explicitly says,

You should provide a hint only when the results of an action are not obvious from the element’s label.

That would suggest that hints are not always required. And as mentioned above, not all items that require labels actually support actions, so there's no result of an action you need to hint at, even if there is a need for a more explicit label (e.g. "99 comments" for an element that has a a speech bubble icon next to a number).

I think it's ok for this package to be opinionated and leave this in, but it would help my team out if there was an option for it to only apply for Pressable, or maybe for any component that has an onPress prop.

[Andrew Gerber]

Agree- there seems to be a fair amount of nuance as to when accessibilityHint should be used. We've also found that there's times when you want to customize an accessibilityLabel and adding accessibilityHint doesn't add value.

For our use case, I'm thinking we can enforce the use of hint w/ label on our pressable elements via TypeScript:

type AccessibilityLabel = {
    accessibilityLabel?: undefined
}

type AccessibilityLabelWithHint = {
    accessibilityLabel: string
    accessibilityHint: string
}

type AccessibilityLabelProps = AccessibilityLabel | AccessibilityLabelWithHint

const props: AccessibilityLabelProps = { // GOOD - no custom label

}

const propsWithLabel: AccessibilityLabelProps = { // FAILS - no hint
    accessibilityLabel: 'Profile icon'
}

const propsWithLabelAndHint: AccessibilityLabelProps = { // GOOD - has hint and label
    accessibilityLabel: 'Profile icon',
    accessibilityHint: 'Navigates to profile screen.'
}

Since we have the lower level Pressable/Touchable* components wrapped, this should work if someone using our wrapped pressables needs to set a label.