fix: Reset behavior is inaccessible by keyboard in Rating Component

[arazni]

🐛 Bug Report

When a keyboard only user (often a blind person) interacts with the Rating component, they are unable to use the Reset functionality.

💻 Repro or Code Sample

Visit your demo page

Change the component to Allow Reset (true).

Navigate back to the rating component with tabs.

There is no key that enables the reset functionality.

🤔 Expected Behavior

There should be some button that enables you to reset the rating for a keyboard only user.

😯 Current Behavior

Hitting {enter} or {space} does not trigger a reset.

💁 Possible Solution

This is actually requires more consideration than it seems.

One frustration I found for this component in the context of my application is that tabbing into it inherently changes the state of the rating component, which I wanted to use for a non-traditional use case (to track a mutable value during a game and emulate the checkbox experience the players are used to). I plan to give up on this component for my application.

So, because the actual value of the rating component changes simply by tabbing or using arrow keys, no {enter} or {space} is necessary to set the value in the first place. However, hitting {enter} or {space} to set the value may be a reasonable habit developed based on how other inputs accept keyboard interaction.

This implies that fixing it so that hitting {enter} or {space} to trigger the reset may be confusing behavior for someone who does not yet realize that hitting {enter} or {space} is unnecessary. That would typically be the standard behavior for a radio group as well, if I understand correctly.

However, that risk may be mitigated by the fact that the screenreader reads the rating's currently navigated value as "checked", which would hopefully successfully indicate that they do not need to hit {enter} or {space} to set the value. Additionally, if hitting {enter} or {space} set it to unchecked and the screen reader correctly picks that up, the user will be informed that their action undid their selection.

It may still be the case that the best action is to make {enter} or {space} be the button to clear the selection when reset is enabled.

However, a deeper evaluation may decide that the state should not mutate by being tabbed or arrowed unless a {space} or {enter} is used to set the value in the first place. Then, a second {space} or {enter} would clear the value if it is already set.

Some research may be necessary to determine if {space} or {enter} is the more appropriate way to set the value if that route is pursued. I believe {space} is preferred in this case, but I am not an expert.

🔦 Context

My web app tries to be accessible to blind users. They will not be able to reset through this Rating component. (I do have a setting to enable them to use a slider component wherever a rating would appear, however.)

🌍 Your Environment

• OS & Device: Windows 11 PC
• Browser Edge and Firefox
• .NET 9 and Fluent UI 4.11.0

[arazni]

Regarding state mutation by navigating with arrows without the user confirming with {space}, it's interesting that the RadioGroup also has this behavior except in one case on the demo site.

If you go to the "In a toolbar" example, and tab into it, you'll see that arrows do not mutate the state until {space} is used.

You'll also see that hitting {enter} will select the first radio button in the input even if a separate has the current tab highlight.

[vnbaaij]

Regarding state mutation by navigating with arrows without the user confirming with {space}, it's interesting that the RadioGroup also has this behavior except in one case on the demo site.

If you go to the "In a toolbar" example, and tab into it, you'll see that arrows do not mutate the state until {space} is used.

This is different from the rating Component as the RadioGroup uses the fluent-radio-group and fluent-radio web components internally. We can't use those in the rating component because they always render as a radio button.

You'll also see that hitting {enter} will select the first radio button in the input even if a separate has the current tab highlight.
That is only the case if no selection has been made yet. Once on tof the others has been selected, hitting enter on the first one does not select it anymore.

[vnbaaij]

With regards to resetting via the keyboard, I think it would be simplest to just add code that resets the Rating component when {space} is pressed on an option that has focus. I do not want to add {enter} as weel because that could potentially lead to a from being submitted (if the Rating would be used within a from context).

Adding the reset with space is pretty simple. I do not want to change any other current behavior (and I don't think we have to). See the screengrab below. Pressing space clears the rating. You would then need to tab out of the rating as a next step because otherwise the focus behavior will select the prev/next value again. I think that is acceptable.

Let us know what you think.

Until this is in and released, you can still already have a reset behavior in the way it is done in the demo you mentioned. You can reset the rating value externally for example through a button.

[arazni]

Seems fair! Thanks.