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.

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: Reset behavior is inaccessible by keyboard in Rating Component #3069

Open
arazni opened this issue Dec 19, 2024 · 4 comments · May be fixed by #3073
Open

fix: Reset behavior is inaccessible by keyboard in Rating Component #3069

arazni opened this issue Dec 19, 2024 · 4 comments · May be fixed by #3073
Labels
needs: author feedback The author of this issue needs to respond in order for us to continue investigating this issue. status:in-progress Work is in progress
Milestone

Comments

@arazni
Copy link

arazni commented Dec 19, 2024

🐛 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
@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Dec 19, 2024
@arazni
Copy link
Author

arazni commented Dec 20, 2024

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
Copy link
Collaborator

vnbaaij commented Dec 20, 2024

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
Copy link
Collaborator

vnbaaij commented Dec 20, 2024

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.

Image

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.

@vnbaaij vnbaaij added status:in-progress Work is in progress needs: author feedback The author of this issue needs to respond in order for us to continue investigating this issue. and removed triage New issue. Needs to be looked at labels Dec 20, 2024
@vnbaaij vnbaaij added this to the v4.11.1 milestone Dec 20, 2024
@vnbaaij vnbaaij linked a pull request Dec 20, 2024 that will close this issue
@arazni
Copy link
Author

arazni commented Dec 21, 2024

Seems fair! Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: author feedback The author of this issue needs to respond in order for us to continue investigating this issue. status:in-progress Work is in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants