1471857 - [macOS] when clicked on one of the radio button in group, selection is not happening with arrow keys

Status: NEW

(Core :: DOM: UI Events & Focus Handling, defect, P5)

Description

[Anil Namde]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36

Steps to reproduce:

- have three radio buttons in group (name is same)
- click on the first radio button 
- now click up and down arrow keys on keyboard



Actual results:

so browser scroll if exist happens instead of radio button section cycle. If scroller is not there then the selection is not switching


Expected results:

the expectation is next or previous radio button value should be selected same as observed in IE and Chrome

Comment 1

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0 
Build ID: 20180621125625       
I manage to reproduce this issue on Mac 10.13 with Firefox Release 61.0 using the following page:https://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio. Please note that this issue is also displayed on FF 60.0 and  FF 63.0a1 (2018-07-02) (64-bit). This issue is not reproducible on OS Windows and Ubuntu.

Comment 2

[Anil Namde]

I have put together an example to log active element when a user is interacting with the radio buttons on code pen for testing https://codepen.io/anilnamde/pen/PBzVRq apperantly when ther user switches focus to other element activeElement is shifted to be body causing the issue

// HTML
<form action="">
  <p>
    Select country:
  </p>
  <label>
    <input type="radio" value="india" name="country">
    <span>India</span>
  </label>
  <label>
    <input type="radio" value="US" name="country">
    <span>US</span>
  </label>
    <label>
     <input type="radio" value="UK" name="country">
     <span>UK</span>
  </label>
</form>

// CSS
label{
  display: block;
}

input:checked + span{
  color:red;
}

input:focus + span{
  color:green;
}

// JS
const log = (e) => console.log('e', e.type, e.target, document.activeElement)
const ef = (e) => {
  log(e)
  setTimeout(()=>{log(e)}, 1000);
}
document.addEventListener('click', ef)
document.addEventListener('keydown', ef)
document.addEventListener('keypress', ef)

Comment 3

[Andrew Overholt [:overholt]]

Stephen, are you still doing macOS-specific things? Do you know anything about keyboard navigation on macOS?

Comment 4

[Stephen A Pohl]

Once the radio buttons are focused, arrow key navigation is possible. Safari does not even allow the radio buttons to be focused and arrow key navigation is not possible at all.

Safari tends to be our reference point on macOS.