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

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

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

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
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
Original file line number Diff line number Diff line change
@@ -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 {
@@ -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);
@@ -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>) => {
@@ -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,
@@ -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);