this eslint says Autofocusing elements can cause usability issues for sighted and non-sighted users, alike.
I am rendering the input element as a modal(i.e conditionally rendered) and as the modal is rendered I want the focus on input element.
The other approach is to do the same using useRef hook, But the point both autoFous prop and useRef have the same impact on a11y in my opinion(I am not sure hence asking).
The autoFocus is a easy way to focus as soon as the input is rendered and that's what I feel is best in terms of a11y when a modal is shown. The error might be applicable when autoFocus is done in the initial page load itself.
My understanding of the autofocus attribute is that it's primarily used when a page first loads. The accessibility concerns I've read (e.g., Bruce Lawson's article on the autofocus attribute) are about autofocus dumping a user in the middle of a page when they'd normally use a screen reader to read a page from top to bottom, which can be distruptive for accessibility.
In my view, that doesn't apply to a modal, because a modal is designed to draw the user's attention to it. In fact, the W3C WAI-ARIA Authoring Example of a modal dialog states that focus should be placed on the first focusable element (e.g., the input, the first paragraph, the OK button, etc.)
So, that's all to say, I think you should be fine from an accessibility standpoint to use autofocus on the <input> element in the modal when it first loads.