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.

Sign up for GitHub

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

front: fix combobox behavior #10168

Closed
wants to merge 1 commit into from
Closed

front: fix combobox behavior #10168

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion front/src/applications/stdcm/views/StdcmView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,8 @@ const StdcmView = () => {
if (error && error.message !== NO_CONFIG_FOUND_MSG) throw error;

return (
<div role="button" tabIndex={0} className="stdcm" onClick={() => setShowStatusBanner(false)}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this has accessibility consequences: it's no longer possible to activate the button via the keyboard.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, but it's not really a button since it wraps the whole STDCM view… I think we should drop role="button" as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interacting with this div just removes the simulation banner. Do we need to activate it on the keyboard?

Copy link
Member

@emersion emersion Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The container doesn't act like a button, so I don't think role="button" is appropriate here.

There are many ways to "interact" with a form, using the mouse to do so is just one of them. For instance, the Tab key focuses the next form element, or the "Next" key on an on-screen keyboard (e.g. on an Android tablet) has the same effect.

Maybe onFocus is what we want here instead of onClick?

// eslint-disable-next-line jsx-a11y/interactive-supports-focus
<div role="button" className="stdcm" onClick={() => setShowStatusBanner(false)}>
<StdcmHeader
isDebugMode={isDebugMode}
onDebugModeToggle={setIsDebugMode}
Expand Down
Loading