Accessibility bug: buttons are spamming aria-pressed but they are not toggle buttons

[SleeplessByte]

Steps to Reproduce

This is probably a bug in react-native-web, but that's no excuse.

1. Go to https://bsky.app/
2. Find any <button>
3. It will have aria-pressed="false"
4. Clicking it (mouse down / keyboard hold down) will switch it to aria-pressed="true"
5. Releasing will switch it back to aria-pressed="false"

This one is easy. It's wrong.

From https://w3c.github.io/aria/#aria-pressed and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed

Adding aria-pressed to an element with a role of button turns the button into a toggle button. The aria-pressed attribute is only relevant for toggle buttons. It represents the button's current "pressed" state.

These are not toggle buttons.

• aria-pressed is not added to buttons that are not toggle buttons

Attachments

Relevant html

<button aria-pressed="false" role="button" tabindex="0"></button>

What platform(s) does this occur on?

Web (Desktop), Web (Mobile)

Device Info

Not Relevant

What version of the app are you using?

Web

Additional Information

The problem here is that people may have turned on options that announce something when the button becomes "toggled-on". You don't want that.

[PaulACoroneos]

I would like to get my feet wet contributing to OSS and don't mind contributing this one liner if its okay with the Bsky team.

[auroursa]

These accessibility improvements looks a lot of sense.

[SleeplessByte]

@PaulACoroneos the bug is probably this line of code (it should be removed):

social-app/src/components/Button.tsx

Line 461 in 5f7caf3

aria-pressed={state.pressed}

[PaulACoroneos]

@PaulACoroneos the bug is probably this line of code (it should be removed):

social-app/src/components/Button.tsx

Line 461 in 5f7caf3

aria-pressed={state.pressed}

Yep thus me mentioning 1 liner 😊.

[SleeplessByte]

I would just PR it. They take PRs from the community!