Skip to content

fix: Spinbutton aria-valuenow vs native value update timing fix #33923

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
merged 3 commits into from
Mar 17, 2025
Merged

fix: Spinbutton aria-valuenow vs native value update timing fix #33923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ab7166
fix: Spinbutton aria-valuenow vs native value timing fix
smhigley Feb 27, 2025
c77e7cb
change file
smhigley Feb 27, 2025
9d3df3b
updated timing fix
smhigley Mar 7, 2025
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
7 changes: 7 additions & 0 deletions change/@fluentui-react-spinbutton-d2901e1c-c4b6-47ad-b78e-0ae03c8814f6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Contributor

Choose a reason for hiding this comment

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

Hey @smhigley , do you know why those screenshots are removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm guessing it was just a screenshot tool issue, I'll update the branch and see if it fixes just by running again

"type": "patch",
"comment": "fix: Spinbutton aria-valuenow vs native value timing fix",
"packageName": "@fluentui/react-spinbutton",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "patch"
}
11 changes: 10 additions & 1 deletion ...ges/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
useControllableState,
useTimeout,
slot,
useMergedRefs,
} from '@fluentui/react-utilities';
import { ArrowUp, ArrowDown, End, Enter, Escape, Home, PageDown, PageUp } from '@fluentui/keyboard-keys';
import {
Expand Down Expand Up @@ -86,6 +87,8 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
initialState: 0,
});

const inputRef = React.useRef<HTMLInputElement>(null);

const isControlled = value !== undefined;

const [textValue, setTextValue] = React.useState<string | undefined>(undefined);
Expand Down Expand Up @@ -151,6 +154,11 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
}
const newValue = e.target.value;
setTextValue(newValue);
if (inputRef.current) {
// we need to set this here using the IDL attribute directly, because otherwise the timing of the ARIA value update
// is not in sync with the user-entered native input value, and some screen readers end up reading the wrong value.
inputRef.current.ariaValueNow = newValue;
}
};

const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
Expand Down Expand Up @@ -285,7 +293,6 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
}),
input: slot.always(input, {
defaultProps: {
ref,
autoComplete: 'off',
role: 'spinbutton',
appearance,
Expand Down Expand Up @@ -323,8 +330,10 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
};

state.input.value = valueToDisplay;
state.input.ref = useMergedRefs(inputRef, ref);
state.input['aria-valuemin'] = min;
state.input['aria-valuemax'] = max;
state.input['aria-valuenow'] = internalState.current.value ?? undefined;
state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);
state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);
state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);
Expand Down