User Feedback widget has accessibility issues

[gcamacho079]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

7.58.1

Framework Version

No response

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

• Open embeddable User Feedback widget
• Run automated, guided manual, and manual accessibility tests via axe DevTools

Expected Result

No accessibility issues that might prevent a user from submitting feedback.

Actual Result

The following issues were found during a quick scan:

• [ ] The instruction text has < 2.64 contrast ratio against the widget background
• [ ] Submit button text has a contrast ratio of 2.66 (3.9:1 when hovered) against the button background
• [ ] The placeholder text also has under 4.5:1 contrast ratio; ideally, the placeholder text should be included as always-visible instruction text above the input.
• [ ] For name, email, and issue description fields, the actual labels aren’t linked to the inputs, so it’s not 100% clear what the input is for. This also causes issues when using Voice Control as the visible label doesn’t match the accessible name (which falls back to the placeholder text).
• [ ] There’s no visible indication that all fields are required until the user tries to submit.
• [ ] Form errors are only indicated by a red outline (versus the default gray); the contrast ratio between these two colors is only 2.1:1. There should be another visual indicator of the error state that isn’t color-dependent.
• [ ] The error message (”Some fields were invalid”) can be unclear depending on what the error is. Ideally, there would be more specific error messages, like “Email format is invalid”.
• [ ] There should be a more obvious focus indicator for inputs (such as a thick, outset outline). The subtle color shift is difficult to discern.
• [ ] The focus indicator for the “Send Feedback” button has been removed entirely.
• [ ] When closing the modal, focus should return to the trigger button.
• [ ] Users should be able to exit modal using the ESC key.
• [ ] Inputs for name and email should use autocomplete values as specified in Input Purposes
• [ ] A screen reader user doesn't receive feedback after they hit the “Submit” button. One solution would be that focus should move to the success message (with a tabindex=”-1” on the wrapper to enable focus)

[AbhiPrasad]

Hey @gcamacho079 thanks for opening an issue! We should fix some of these issues. I'm going to backlog this us to take a look later, but if you're interested in contributing PRs are very much welcome.

https://github.com/getsentry/sentry/blob/master/src/sentry/templates/sentry/error-page-embed.html is the widget location!

[bruno-garcia]

@gcamacho079 Since you seem interested in a11y, fyi we're discussing a future feature in Sentry: https://github.com/getsentry/sentry/discussions/58423