Каким образом можно исправить ошибку, связанную с атрибутом aria-hidden?

Question

Люсьен

расширения-для-браузеров , html , javascript

Каким образом можно исправить ошибку, связанную с атрибутом aria-hidden?

Я работаю над форком расширения aidungeon translator и столкнулся с проблемой. Код пытается найти текст истории, используя селектор `aria-label="Story"`:

```javascript
const ADVENTURE_CONTENT_SELECTOR = "[aria-label='Story']";
function selectAdventureContent() {
    GUI.elements.adventureContent = document.querySelector(ADVENTURE_CONTENT_SELECTOR);
}
```

Зеленым цветом отмечен элемент, который содержит текст, который пытается извлечь код. Как мне решить эту проблему?

7 апреля 2025 г. 20:24

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ошибка, связанная с атрибутом `aria-hidden`, может возникать, если элемент с атрибутом `aria-label="Story"` скрыт от экранных считывателей или не доступен для взаимодействия. Это может произойти, если `aria-hidden` установлено в значение `true`, или если элемент скрыт с помощью CSS (например, с использованием `display: none`).

Чтобы исправить проблему, вы можете попробовать несколько подходов:

1. **Проверьте значение атрибута `aria-hidden`:** Если элемент с атрибутом `aria-label="Story"` имеет `aria-hidden="true"`, это обозначает, что он скрыт. Вы можете изменить его атрибут или значения, если это возможно:

```javascript
const adventureContent = document.querySelector(ADVENTURE_CONTENT_SELECTOR);
if (adventureContent) {
    adventureContent.setAttribute("aria-hidden", "false");
}
```

2. **Проверьте CSS:** Убедитесь, что элемент не скрыт с помощью CSS. Если `display: none` или `visibility: hidden`, вам необходимо изменить стиль элемента, чтобы сделать его видимым:

```javascript
if (adventureContent) {
    adventureContent.style.display = 'block'; // или нужное значение
}
```

3. **Используйте другой селектор:** Если элемент с `aria-label="Story"` невозможно сделать доступным, попробуйте использовать другой способ выбора элемента. Например, если элемент имеет уникальный класс или идентификатор, используйте его.

4. **Обработайте элемент по событию:** Если элемент загружается асинхронно, возможно, что на момент выполнения кода он еще не доступен на странице. Вам нужно убедиться в том, что DOM загружен, прежде чем вызывать функцию:

```javascript
document.addEventListener("DOMContentLoaded", function() {
    selectAdventureContent();
});
```

5. **Проверка с помощью DevTools:** Используйте инструменты разработчика в вашем браузере (обычно открываются клавишей F12) для проверки состояния элемента. Проверьте, действительно ли элемент на странице существует, доступен ли он, и правильно ли он замечается селектором.

Таким образом, общая идея заключается в том, чтобы убедиться, что элемент доступен и не скрыт, прежде чем пытаться работать с ним.