Skip to content

fix: keyboard nav returns to feedback button after closing or submitting feedback form #4088

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

Merged
Claudio Castillo (claudio-codebase) merged 8 commits into from
Oct 16, 2026
Merged

fix: keyboard nav returns to feedback button after closing or submitting feedback form #4088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9954813
added button refs to have the keyboard navigation return to the feedb…
Oct 2, 2026
a348b43
timeout unnecessary pretty sure
Oct 2, 2026
1fb9334
set keyboard focus to close button element by id instead of survey va…
Oct 5, 2026
de8ebc4
expecting void to pass cloud gate test
Oct 5, 2026
788f473
not sure how this got deleted but added back the focus behaviour.
Oct 5, 2026
bfa545e
Merge remote-tracking branch 'origin/dev' into fix/feedback_keyboard_nav
Oct 16, 2026
9bf4d49
added await to async
Oct 16, 2026
f9df23d
Merge branch 'dev' into fix/feedback_keyboard_nav
claudio-codebase Oct 16, 2026
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
5 changes: 4 additions & 1 deletion src/app/views/main-header/FeedbackButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Button, MenuTrigger, Tooltip } from '@fluentui/react-components'
import { PersonFeedback20Regular } from '@fluentui/react-icons'
import { useState } from 'react'
import { useState, useRef } from 'react'
import { useAppSelector } from '../../../store'
import { eventTypes, telemetry } from '../../../telemetry'
import { FEEDBACK_BUTTON } from '../../../telemetry/component-names'
Expand All @@ -17,13 +17,15 @@ const trackFeedbackButtonEvent = () => {
const FeedbackButton = ()=>{
const [enableSurvey, setEnableSurvey] = useState(false);
const user = useAppSelector(state=> state.profile.user)
const buttonRef = useRef<HTMLButtonElement>(null)
const activateSurvey = () => {
setEnableSurvey(true);
trackFeedbackButtonEvent();
}

const disableSurvey = () => {
setEnableSurvey(false);
buttonRef.current?.focus();
}

const styles = useHeaderStyles()
Expand All @@ -33,6 +35,7 @@ const FeedbackButton = ()=>{
<Button
aria-label={translateMessage('Feedback')}
onClick={activateSurvey}
ref={buttonRef}
className={styles.iconButton} appearance="subtle" icon={<PersonFeedback20Regular />} />
</Tooltip>
<FeedbackForm onDismissSurvey={disableSurvey}
Expand Down
11 changes: 9 additions & 2 deletions src/app/views/query-runner/request/feedback/FeedbackForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function FeedbackForm({ activated, onDismissSurvey, onDisableSurv

const initializeFeedback = () => {
const floodgateObject: OfficeBrowserFeedback = makeFloodgate();
loadAndInitialize(floodgateObject, surveyActivated).then(() => {
void loadAndInitialize(floodgateObject, surveyActivated).then(() => {
setOfficeBrowserFeedback(floodgateObject);
});
}
Expand Down Expand Up @@ -55,8 +55,15 @@ export default function FeedbackForm({ activated, onDismissSurvey, onDisableSurv
title: translateMessage('title')
}
if(officeBrowserFeedback){
const onFocusIn = (event: FocusEvent) => {
if ((event.target as HTMLInputElement)?.name !== 'obf-TFormRating') { return; }
document.removeEventListener('focusin', onFocusIn);
document.getElementById('obf-ToastCancel')?.focus();
};
document.addEventListener('focusin', onFocusIn);
officeBrowserFeedback.floodgate.showCustomSurvey(customSurvey).catch(
(error: any) => {
document.removeEventListener('focusin', onFocusIn);
onDisableSurvey();
throw error; }
);
Expand Down Expand Up @@ -136,7 +143,7 @@ export default function FeedbackForm({ activated, onDismissSurvey, onDisableSurv
'CloseLabel': translateMessage('Close')
});

floodgateObject.floodgate.initialize().then(
await floodgateObject.floodgate.initialize().then(
function () {
floodgateObject.floodgate.start();
setEvents();
Expand Down
Loading