Assessment wanted for CSS accessibility 1 skill test. Task-3.

Task-3.

by EiNzp

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>JavaScript accessibility: Task 1</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <section class="preview">

      <div class="animal-list">
        <h1>Animal summaries</h1>

        <p>The following list of animals can be clicked to display a description of that animal.</p>

        <ul>
          <li data-description="A type of wild mountain goat, with large recurved horns, found in Eurasia, North Africa, and East Africa." tabindex="1">Ibex</li>
          <li data-description="A medium-sized marine mammal, similar to a manatee, but with a Dolphin-like tail." tabindex="2">Dugong</li>
          <li data-description="A rare marsupial, which looks rather like a tiny kangaroo, measuring around 50 to 75 centimeters." tabindex="3">Quokka</li>
        </ul>
      </div>

      <div class="animal-description">
        <h2></h2>

        <p></p>
      </div>

    </section>

  </body>
  <script src="script.js"></script>

</html>

CSS

p {
    color: purple;
    margin: 0.5em 0;
}

* {
    box-sizing: border-box;
}

li {
    cursor: pointer;
}

/* my code */
li:hover,
li:focus{
    color: rgb(81, 21, 21);
    background-color: rgb(197, 197, 197);
}

JavaScript

const listItems = document.querySelectorAll('li');
const descHeading = document.querySelector('.animal-description h2');
const descPara = document.querySelector('.animal-description p');

listItems.forEach(function (item) {
    item.addEventListener('mouseup', handleSelection);
    // my code start
    item.addEventListener('keyup', (e) => {
        if (e.key === 'Enter') {
            handleSelection(e);
        }
    })
})

const listItems_array = Array.prototype.slice.call(listItems);

listItems_array.forEach(function (item) {
    item.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowDown') {
            if (item === listItems[listItems.length - 1]) {
                listItems[0].focus();
            } else {
                listItems[listItems_array.indexOf(item) + 1].focus();
            }
        } else if (e.key === 'ArrowUp') {
            if (item === listItems[0]) {
                listItems[listItems.length - 1].focus();
            } else {
                listItems[listItems_array.indexOf(item) - 1].focus();
            }
        }
    })
})
// my code end

function handleSelection(e) {
    const heading = e.target.textContent;
    const description = e.target.getAttribute('data-description');
    descHeading.textContent = heading;
    descPara.textContent = description;
}