ScottLogic
Prevent radio buttons from selecting when focused by keyboard
Bug report
Description
Regarding radio buttons under sandbox -> Defence Configuration -> Prompt enclosure, if you keyboard-navigate through the options (using the up/down arrows), the button you have just navigated to will automatically get selected. What should happen instead is it doesn't get selected until the user presses the space key.
Reproduction steps
Steps to reproduce the behaviour:
- Load the app and go to sandbox
- Open Defence Configuration and Prompt Enclosure
- Keyboard-navigate to the radio buttons
- Use the up-down arrow keys to navigate to different options
- Observe that the focused option gets selected
Expected behaviour
A focused radio button should not get selected UNTIL the user presses the space key
Screenshots
These radio buttons 'ere
Software (please complete the following information):
- Browser: chrome
Additional context
Add any other context about the problem here.
Acceptance criteria
GIVEN Keyboard navigating through the Prompt Enclosure radio buttons part of the Defence Configuration panel. WHEN User uses the up/down arrow key to focus a different radio button THEN the new radio button is focused AND NOT selected
GIVEN User has focused radio button AND not selected it yet WHEN they press the space key THEN the focused radio button becomes selected
On further research, this is default and expected behaviour of radio buttons. It is unfortunate that changing the option triggers a chat message and a network call. If we want to fix this, I suggest we use some other kind of input, rather than making the radiobutton behave differently to convention
Another idea is we could send the network request and add the info message on blur. So:
- Keyboard naviage through the defences to get to focus the prompt enclosure radio buttons.
- Use the up/down arrows to scroll between options. The option navigated to gets visually selected and the pre-prompt part of the config underneath updates
- When the user unfocuses (blurs) the radio buttons then we send off our request to the backend and put an info message in the chat