Как вручную установить фокус на кнопке с рефери для доступности клавиатуры? ⇐ Javascript

[Anonymous]

У меня есть веб -страница, где у пользователей есть список изображений, которые они загрузили. У них есть три кнопки: загрузить изображение/загрузка изображения/удаления изображения. Когда пользователь нажимает Delete, кнопка загрузки будет скрывать и загружать изображение/удалить обращение изображения, чтобы удалить/отменить соответственно. Независимо от того, попадает ли пользователь «да» или «нет», мне нужно вручную установить фокус на кнопке, которая будет возвращать фокус пользователя клавиатуры, где он был до открытия модала (то есть кнопка «Отмена, если они нажимают нет»). Эти кнопки обрабатываются с условными операторами рендеринга. Грубый план моего кода заключается в следующем: < /p>

export const Images = ({ setUserImages, userImages }) => {
const cancelRef = useRef(null);
...
const handleFocus = () => {
setShowDeleteModal(false);
cancelRef.current.focus();
};

return (

...

{enableSelect ? (

{selectionType === "delete" && (

{" "}
setShowDeleteModal(true)}>Delete
{
setEnableSelect(false);
setSelectedImages([]);
}}
>
Cancel


)}
{selectionType === "download" && (

{" "}
handleDownload()}
>
Download

{
setEnableSelect(false);
setSelectedImages([]);
}}
>
Cancel


)}

) : (
/* show upload/download/delete instead */
)}

{renderedImages()}
{showDeleteModal && (
{
setShowDeleteModal(false);
setSelectedImages([]);
}}
>

Are you sure you want to delete the selected image(s)?

handleDelete()}>
Yes


No




)}

)
< /code>
перед добавлением ссылок, когда пользователь клавиатуры вышел из модала, фокус бросил бы их до нижней части страницы в нижний колонтитул, который находится за пределами тела страницы. Это происходит только в браузерах Chromium, не происходит в Firefox, поэтому я в этом беспорядке. Я не использовал рефлексы, поэтому я немного необразован, но может ли проблема быть в том, что кнопка «Отмена» отображается условно? Мне пришлось вырезать кучу нерелевантного контента, и это стало немного грязно.

Подробнее здесь: https://stackoverflow.com/questions/795 ... essibility