This rule warns us if an element has an onMouseOver/onMouseLeave attributes without corresponding onFocus/onBlur ones. It's helpful for showing where we may be missing some accessible interactions, and I've filed MM-62343 and MM-62345 to follow up on two of these. In other cases, the component either has alternate accessibility support (the emoji picker), it's something that may not make sense to be accessible (the expanded view of the channel header), or something we're already planning to review accessiblity for (the search component), so I'm going to disable it to avoid introducing noise for the time being.
@mattermost/eslint-plugin
An ESLint plugin containing the configuration used by Mattermost as well as support for custom rules specific to the Mattermost code base.
Custom Rules
no-dispatch-getstate
Prevents passing a redux store's getState into its dispatch as an unnecessary second argument.
We started doing this accidentally at some point because of a misunderstanding about how redux-thunk worked, so this stops anyone from making that same mistake again.
Examples of incorrect code for this rule:
export function someAction() {
return (dispatch, getState) => {
dispatch(doSomething(), getState);
};
}
Examples of correct code for this rule:
export function someAction() {
return (dispatch) => {
dispatch(doSomething());
};
}
use-external-link
Ensures that any link which opens a URL outside of Mattermost using target="_blank" uses the ExternalLink component.
Examples of incorrect code for this rule:
export function SomeLink() {
return (
<a
href="https://example.com"
target="_blank"
rel="noopener noreferrer"
/>
);
}
Examples of correct code for this rule:
import ExternalLink from 'components/external_link';
export function SomeLink() {
return <ExternalLink href="https://example.com"/>;
}