Repository: getsentry/sentry

Issue:
Accessibility Issues with User Feedback Widget
<!-- Requirements: please go through this checklist before opening a new issue -->

- [x] Review the documentation: https://docs.sentry.io/
- [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
- [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
- [x] Provide a link to the affected event from your Sentry account <- Not applicable

## Package + Version

- [x] `@sentry/browser`
- [ ] `@sentry/node`
- [ ] `raven-js`
- [ ] `raven-node` _(raven for node)_
- [ ] other:

### Version:

```
5.29.2
```

## Description

The dialog opened by Sentry.showReportDialog is not accessible. See the [WAI-ARIA Authoring Practices guidance on accessible modals](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).

Some specific issues which need to be fixed:

- `Tab` and `Shift` + `Tab` should not move focus to elements outside the modal (they currently can)
- When the modal loads, the first input of the form should receive focus (currently nothing in the modal is focused when the modal loads)
- The "Close" button is rendered using an anchor tag without an `href` attribute. As a result it is not in the tab sequence and keyboard users are not able to use it. To fix this, a `button` element should be used instead. Since the element does not cause navigation, the `button` element will also have the proper semantics and will improve the experience for users of assistive technology.
- The outermost div of the dialog needs `role` set to `dialog`
- The outermost div of the dialog needs `aria-modal` set to `true`
- The outermost div of the dialog needs `aria-labelledby` set to the `id` of the modal's h2



Discussion:
I would be happy to open a PR. I tried to start a PR, but got stuck with this block of code:
https://github.com/getsentry/sentry-javascript/blob/a833f0ec0a186f0672a536ea8f7d3b129a71a4fe/packages/browser/src/helpers.ts#L191-L215

It looks like the modal code is loaded from an external source at runtime. Is the modal code not open source?
Transferred the issue, as User Feedback Dialog lives in this repository.
This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it `Status: Accepted`, I will leave it alone ... forever!

----

"A weed is but an unloved flower." ― _Ella Wheeler Wilcox_ 🥀

Resolving patch:
diff --git a/src/sentry/web/frontend/debug/debug_error_embed.py b/src/sentry/web/frontend/debug/debug_error_embed.py
--- a/src/sentry/web/frontend/debug/debug_error_embed.py
+++ b/src/sentry/web/frontend/debug/debug_error_embed.py
@@ -15,8 +15,8 @@ def get(self, request):
             "query_params": urlencode(
                 {
                     "dsn": self._get_project_key().dsn_public,
-                    "event_id": "342a3d7f690a49f8bd7c4cf0e61a9ded",
-                    "options": dict(**request.GET),
+                    "eventId": "342a3d7f690a49f8bd7c4cf0e61a9ded",
+                    **request.GET,
                 }
             )
         }
diff --git a/src/sentry/web/frontend/error_page_embed.py b/src/sentry/web/frontend/error_page_embed.py
--- a/src/sentry/web/frontend/error_page_embed.py
+++ b/src/sentry/web/frontend/error_page_embed.py
@@ -209,12 +209,16 @@ def dispatch(self, request):
         context = {
             "endpoint": mark_safe("*/" + json.dumps(absolute_uri(request.get_full_path())) + ";/*"),
             "template": mark_safe("*/" + json.dumps(template) + ";/*"),
-            "strings": json.dumps_htmlsafe(
-                {
-                    "generic_error": str(options["errorGeneric"]),
-                    "form_error": str(options["errorFormEntry"]),
-                    "sent_message": str(options["successMessage"]),
-                }
+            "strings": mark_safe(
+                "*/"
+                + json.dumps_htmlsafe(
+                    {
+                        "generic_error": str(options["errorGeneric"]),
+                        "form_error": str(options["errorFormEntry"]),
+                        "sent_message": str(options["successMessage"]),
+                    }
+                )
+                + ";/*"
             ),
         }
 


Test patch: