Typescript библиотека для проверки страниц

3 000 руб.за час
24 марта 2021, 15:44 • 0 откликов • 37 просмотров
Необходимо запрограммировать набор функций для проверки страниц на соответствие определенным критериям (например, что все видимые изображения имеют корректный "alt" атрибут).

У нас есть Typescript/Javascript библиотека, которая вставляется напрямую на страницу клиента и путем взаимодействия с DOM проверяет, соответствует ли страница определенным критериям. Критерии содержатся в отдельных подгружаемых функциях. В функцию передается набор требуемых элементов и она возвращает те из них, которые не соответствуют ее критериям проверки.

Текущий проект расчитан на 250-300 часов работы, но может быть продлен в будущем.

У нас есть небольшое тестовое задание, чтобы лучше понять требования и оценить знания.
Нужно ответить на 2 вопроса и написать одну функцию.

Вопрос номер 1.
Как с помощью чистого Javascript проверить, что элемент на странице может принимать фокус (focusable)?

Вопрос номер 2.
Как с помощью чистого Javascript убедиться, что элемент на странице является видимым? (необходимо учитывать, что у элемента могут быть невидимые родительские элементы)

Задача
Нужно написать функцию, которая возвращает текст из всех "span" элементов, видимых для устройства чтения с экрана (screen reader).
Пример кода страницы, на которой данная функция должна исполнятся.

<html>
<head>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<span>Text 1</span>
<span aria-hidden="false">Text 2</span>

<main>
<section role="main">
<div class="table">
<span>Text 3</span>
<span>Text 4</span>
<span style="visibility: hidden;">Text 5</span>
<span style="display: none;">Text 6</span>
</div>
<div class="article">
<p>Text 7 <span>Text 8</span></p>

<p><span aria-hidden="true">Text 8</span></p>

<p aria-hidden="true"><span>Text 9</span></p>

<p style="opacity: 0;"><span>Text 10</span></p>
</div>
<div class="article hidden">
<p style="opacity: 0;"><span>Text 11</span></p>

<p><span aria-hidden="false">Text 12</span></p>

<p aria-hidden="true"><span>Text 13</span></p>

<p><span>Text 14</span></p>
</div>
</section>
</main>
</body>
</html>