Chrome Version: 65.0.3325.209
OS: Chrome OS

What steps will reproduce the problem?
(1) Open the jsfiddle example here: https://jsfiddle.net/7cm0fmfp/
(2) Start ChromeVox
(3) Click on the text field in the example
(4) Use linear navigation (search + right arrow key) to try to move out of the text field

What is the expected result?
The screen reader is able to continue linear navigation to other elements.

What happens instead?
The screen reader gets stuck in a loop going back to the text field repeatedly on linear navigation. This makes it difficult to navigate away from the text field without using tab.


This appears to be related to toggling aria-hidden on the associated label upon entering/exiting the input field. If you comment out the associated JS that does this, linear navigation works as expected.
 

Chrome Version: 65.0.3325.209
OS: Chrome OS

What steps will reproduce the problem?
(1) Open the jsfiddle example here (or open a page with the example HTML listed below): https://jsfiddle.net/7cm0fmfp/
(2) Start ChromeVox
(3) Click on the text field in the example
(4) Use linear navigation (search + right arrow key) to try to move out of the text field

What is the expected result?
The screen reader is able to continue linear navigation to other elements.

What happens instead?
The screen reader gets stuck in a loop going back to the text field repeatedly on linear navigation. This makes it difficult to navigate away from the text field without using tab.


This appears to be related to toggling aria-hidden on the associated label upon entering/exiting the input field. If you comment out the associated JS that does this, linear navigation works as expected.


Example HTML and JS to replicate the issue:

<input id="f1" type="text" class="field">
<p id="helper" for="f1" aria-hidden="true">Error in field</p>

<script>
  const inputEl = document.getElementById('f1');
  const helperText = document.getElementById('helper');

  inputEl.addEventListener('blur', function() {
    helperText.setAttribute('aria-hidden', true);
  });

  inputEl.addEventListener('focus', function() {
    helperText.setAttribute('aria-hidden', false);
  });
</script>
 

Chrome Version: 65.0.3325.209
OS: Chrome OS

What steps will reproduce the problem?
(1) Open the jsfiddle example here (or open a page with the example HTML listed below): https://jsfiddle.net/7cm0fmfp/
(2) Start ChromeVox
(3) Click on the text field in the example
(4) Use linear navigation (search + right arrow key) to try to move out of the text field

What is the expected result?
The screen reader is able to continue linear navigation to other elements.

What happens instead?
The screen reader gets stuck in a loop going back to the text field repeatedly on linear navigation. This makes it difficult to navigate away from the text field without using tab.


This appears to be related to toggling aria-hidden on the associated label upon entering/exiting the input field. If you comment out the associated JS that does this, linear navigation works as expected.


Example HTML to replicate the issue:

<input id="f1" type="text" class="field">
<p id="helper" for="f1" aria-hidden="true">Error in field</p>

<script>
  const inputEl = document.getElementById('f1');
  const helperText = document.getElementById('helper');

  inputEl.addEventListener('blur', function() {
    helperText.setAttribute('aria-hidden', true);
  });

  inputEl.addEventListener('focus', function() {
    helperText.setAttribute('aria-hidden', false);
  });
</script>