Wednesday, December 4, 2019

disabling a line of eslint in jsx

In my company's ongoing a11y efforts, there's an interesting paradox where we have a scrollable information div (scrollable via "overflow-y:auto;" css)- the Axe inspector says a scrollable div should be focusable - so I put tabIndex="0" on it so it could have the keyboard focus and allow arrow key scrolling. But we have an eslint rule: "jsx-a11y/no-noninteractive-tabindex" - the overflow scrolling isn't enough for eslint to consider it "interactive" I guess.

I don't know if there's a semantically better way of saying "this panel is interactive but for scrolling only", but to ignore the eslint I had to use the slightly odd in-tag comment JSX of
<div
    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
    tabIndex="0"
    className={blah blah blah}
>
(Thanks to my coworker "Terrible Dev" Tommy for getting the syntax right)

No comments:

Post a Comment