Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent radio buttons from selecting when focused by keyboard #859

Open
pmarsh-scottlogic opened this issue Mar 7, 2024 · 2 comments
Open
Assignees
Labels
bug Something isn't working frontend Requires work on the frontend triage New tickets to be checked by the maintainers

Comments

@pmarsh-scottlogic
Copy link
Contributor

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:

  1. Load the app and go to sandbox
  2. Open Defence Configuration and Prompt Enclosure
  3. Keyboard-navigate to the radio buttons
  4. Use the up-down arrow keys to navigate to different options
  5. 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

Image

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

@pmarsh-scottlogic pmarsh-scottlogic added bug Something isn't working triage New tickets to be checked by the maintainers good first issue Simple issue frontend Requires work on the frontend and removed triage New tickets to be checked by the maintainers labels Mar 7, 2024
@pmarsh-scottlogic pmarsh-scottlogic self-assigned this Mar 19, 2024
@pmarsh-scottlogic pmarsh-scottlogic added triage New tickets to be checked by the maintainers and removed good first issue Simple issue labels Mar 19, 2024
@pmarsh-scottlogic
Copy link
Contributor Author

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

@pmarsh-scottlogic
Copy link
Contributor Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working frontend Requires work on the frontend triage New tickets to be checked by the maintainers
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

1 participant