freeCodeCamp/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.russian.md at c6eb40ceeffcbfa1ff92d09a1d78e08cfc92603d

Files

Valeriy S 12f65a6742 fix(curriculum): fix challenges for russian language

2019-09-18 12:05:38 +05:30

5.3 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d7790367417b2b2512ab1	Use tabindex to Specify the Order of Keyboard Focus for Several Elements	0	https://scrimba.com/c/cmzRRcb	301028	Использование tabindex для указания порядка фокуса клавиатуры для нескольких элементов

Description

tabindex атрибут также определяет точный порядок вкладок элементов. Это достигается, когда значение атрибута установлено как положительное число, равное 1 или выше. Установка tabindex = "1" сначала приведет фокусировку клавиатуры на этот элемент. Затем он перемещается по последовательности указанных значений tabindex (2, 3 и т.д.), прежде чем перейти к настройкам по умолчанию и tabindex = "0" элементам. Важно отметить, что когда порядок табуляции задан таким образом, он переопределяет порядок по умолчанию (который использует источник HTML). Это может смутить пользователей, которые ожидают начать навигацию в верхней части страницы. Этот метод может быть необходим в некоторых случаях, но с точки зрения доступности, будьте аккуратны с его применением. Вот пример: <div tabindex="1">Я получаю фокус клавиатуры, и я получаю его первым!</div> <div tabindex="2">Я получаю фокус клавиатуры, и я получаю его вторым!</div>

Instructions

Camper Cat имеет поле поиска на странице Вдохновляющие цитаты, которое он планирует позиционировать в верхнем правом углу с помощью CSS. Он хочет ввести input и представить элементы управления формой input как первые два элемента в порядке табуляции. Добавьте атрибут tabindex, со значением «1» в поиск input и атрибут tabindex со значением «2», в отправляемый input.

Tests

tests:
  - text: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.
    testString: assert($('#search').attr('tabindex'));
  - text: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.
    testString: assert($('#submit').attr('tabindex'));
  - text: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.
    testString: assert($('#search').attr('tabindex') == '1');
  - text: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.
    testString: assert($('#submit').attr('tabindex') == '2');

Challenge Seed

<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>


    <input type="search" name="search" id="search">
    <input type="submit" name="submit" value="Submit" id="submit">


  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

<body>
  <header>
    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Training</a></li>
      </ul>
    </nav>
  </header>
  <form>
    <label for="search">Search:</label>


    <input tabindex="1" type="search" name="search" id="search">
    <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">


  </form>
  <h2>Inspirational Quotes</h2>
  <blockquote>
    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
    - Chuck Norris</p>
  </blockquote>
  <blockquote>
    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
    - TMNT</p>
  </blockquote>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

5.3 KiB Raw Blame History Unescape Escape