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