diff --git a/static/app/utils/replays/hooks/mockA11yData.tsx b/static/app/utils/replays/hooks/mockA11yData.tsx
new file mode 100644
index 0000000000000..db32388fb8655
--- /dev/null
+++ b/static/app/utils/replays/hooks/mockA11yData.tsx
@@ -0,0 +1,1043 @@
+export const MOCK_A11Y_DATA = [
+  {
+    id: 'button-name',
+    impact: 'critical',
+    description: 'Buttons must have discernible text',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/button-name?application=playwright',
+    element:
+      '<button class="copy"><svg style="width: 16px; height: 16px;"></svg></button>',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have inner text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/data-collected/">**** *********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/migration/">********* *****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/performance/">*** ** ***********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/profiling/">*** ** *********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/crons/">*** ** *****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/context/">*** *******</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/identify-user/">******** *****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/transaction-name/">*** *********** ****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/tags/">********* ****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/user-feedback/">**** ********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/scopes/">****** *** ****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://fastapi.tiangolo.com/" class="">******* *********<span class="icon icon-external-link"><svg style="width: 14px; height: 14px;"></svg></span></a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.62 (foreground color: #e1557c, background color: #ffffff, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<span class="token comment">* *** ****************** ** *** ** ******* ****</span>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #77658b, background color: #251f3d, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<span class="token comment">* ** ************ *** *********** ***********</span>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #77658b, background color: #251f3d, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<span class="token comment">* ** ********* ********* **** ***** ** ***********</span>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #77658b, background color: #251f3d, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element: '<span class="token comment">* ***</span>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 2.99 (foreground color: #77658b, background color: #251f3d, font size: 11.3pt (15px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://github.com/getsentry/sentry-docs/edit/master/src/platforms/python/guides/fastapi/index.mdx" class="">******* ** **** ** **** ****<span class="icon icon-external-link"><svg style="width: 14px; height: 14px;"></svg></span></a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #e1557c, background color: #faf8ff, font size: 9.7pt (12.92px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/contributing/" class="">********** ** ****<span class="icon icon-external-link"><svg style="width: 14px; height: 14px;"></svg></span></a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #e1557c, background color: #faf8ff, font size: 9.7pt (12.92px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://github.com/getsentry/sentry-docs/issues/new/choose" class="">****** * *******<span class="icon icon-external-link"><svg style="width: 14px; height: 14px;"></svg></span></a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #e1557c, background color: #faf8ff, font size: 9.7pt (12.92px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'duplicate-id-active',
+    impact: 'serious',
+    description: 'IDs of active elements must be unique',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/duplicate-id-active?application=playwright',
+    element:
+      '<a aria-haspopup="true" aria-expanded="false" id="nd-platforms" href="https://docs.sentry.io/platforms/python/guides/fastapi/#" class="dropdown-toggle nav-link" role="button"><img style="width: 0px; height: 0px;">*******</a>',
+    failureSummary:
+      'Fix any of the following:\n  Document has active elements with the same id attribute: nd-platforms',
+  },
+  {
+    id: 'duplicate-id',
+    impact: 'minor',
+    description: 'id attribute value must be unique',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/duplicate-id?application=playwright',
+    element: '<div class="d-sm-none d-block" id="navbar-menu">',
+    failureSummary:
+      'Fix any of the following:\n  Document has multiple static elements with the same id attribute: navbar-menu',
+  },
+  {
+    id: 'image-alt',
+    impact: 'critical',
+    description: 'Images must have alternate text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/image-alt?application=playwright',
+    element: '<img style="width: 50px; height: 30.6562px;">',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'image-alt',
+    impact: 'critical',
+    description: 'Images must have alternate text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/image-alt?application=playwright',
+    element: '<img style="width: 16px; height: 16px;">',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'image-alt',
+    impact: 'critical',
+    description: 'Images must have alternate text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/image-alt?application=playwright',
+    element:
+      '<img class="gatsby-resp-image-image" style="width: 742.5px; height: 175.719px;">',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'image-alt',
+    impact: 'critical',
+    description: 'Images must have alternate text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/image-alt?application=playwright',
+    element:
+      '<img class="gatsby-resp-image-image" style="width: 742.5px; height: 202.938px;">',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'link-name',
+    impact: 'serious',
+    description: 'Links must have discernible text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/link-name?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/static/502c68be8728b45907000721f9409472/ffaa5/issues-list.png" class="gatsby-resp-image-link" style="display:block" target="_blank" rel="noopener">',
+    failureSummary:
+      'Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute',
+  },
+  {
+    id: 'link-name',
+    impact: 'serious',
+    description: 'Links must have discernible text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/link-name?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/static/7925169685c3d90602ab05f3ccf9d0ad/e515d/performance-details.png" class="gatsby-resp-image-link" style="display:block" target="_blank" rel="noopener">',
+    failureSummary:
+      'Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element: '<h6>****</h6>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a aria-current="page" class=" sidebar-title d-flex align-items-center active" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/"><h6>****** *** *******</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a aria-current="page" class="active css-1o62c7a active" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/">******* *******</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/configuration/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/usage/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/troubleshooting/">***************</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/performance/"><h6>*********** **********</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/performance/instrumentation/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/performance/troubleshooting/">***************</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/profiling/"><h6>*********</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/profiling/troubleshooting/">***************</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/crons/"><h6>*****</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/crons/troubleshooting/">***************</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/"><h6>********* ******</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/attachments/">***********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/enriching-events/breadcrumbs/">***********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/data-management/"><h6>**** **********</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/data-management/sensitive-data/">********* ********* ****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/product/"><h6>******* ******</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/sentry-basics/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/issues/">******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/projects/">********<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/performance/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/profiling/">*********<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/session-replay/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/crons/">*****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/alerts/">******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/discover-queries/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/dashboards/">**********<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/releases/">********<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/user-feedback/">**** ********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/stats/">*****</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/codecov/">*******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/security-policy-reporting/">******** ****** *********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/data-management-settings/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/accounts/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/relay/">*****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/cli/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/security/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/product/integrations/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" sidebar-title d-flex align-items-center" data-sidebar-link="true" href="https://docs.sentry.io/platforms/"><h6>***** *********</h6></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/dotnet/">****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/android/">*******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/apple/">*****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/javascript/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/dart/">****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/elixir/">******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/flutter/">*******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/go/">**<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/java/">****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/kotlin/">******</a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/kotlin-multiplatform/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/native/">******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/node/">*******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/php/">***<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/react-native/">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/ruby/">****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/rust/">****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/unity/">*****<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<a class=" css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/unreal/">****** ******<style data-emotion="css 1eta2b">.css-1eta2b { transition: transform 200ms ease 0s; transform: rotate(270deg); }</style><svg class="css-1eta2b" style="width: 16px; height: 16px;"></svg></a>',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://sentry.io/auth/login/?next=https://docs.sentry.io/platforms/python/guides/fastapi/">****** **<span class="icon icon-external-link"><svg style="width: 14px; height: 14px;"></svg></span></a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.44 (foreground color: #e1557c, background color: #faf8ff, font size: 9.7pt (12.92px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/platforms/python/guides/fastapi/#issue-reporting">***** *********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/platforms/python/guides/fastapi/#monitor-performance">******* ***********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/platforms/python/guides/fastapi/#integration-options">*********** *******</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/platforms/python/guides/fastapi/#supported-versions">********* ********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element: '<h4 style="display: inline-block;">****** *******</h4>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.3pt (13.76px), font weight: bold). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element: '<h4 style="display: inline-block;">*** ******</h4>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.3pt (13.76px), font weight: bold). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'heading-order',
+    impact: 'moderate',
+    description: 'Heading levels should only increase by one',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/heading-order?application=playwright',
+    element: '<h6>** **** ****</h6>',
+    failureSummary: 'Fix any of the following:\n  Heading order invalid',
+  },
+  {
+    id: 'image-alt',
+    impact: 'critical',
+    description: 'Images must have alternate text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/image-alt?application=playwright',
+    element: '<img style="width: 20px; height: 20px;">',
+    failureSummary:
+      'Fix any of the following:\n  Element does not have an alt attribute\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute\n  Element\'s default semantics were not overridden with role="none" or role="presentation"',
+  },
+  {
+    id: 'link-name',
+    impact: 'serious',
+    description: 'Links must have discernible text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/link-name?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/static/502c68be8728b45907000721f9409472/ffaa5/issues-list.png" class="gatsby-resp-image-link" target="_blank" rel="noopener" style="display: block;">',
+    failureSummary:
+      'Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute',
+  },
+  {
+    id: 'link-name',
+    impact: 'serious',
+    description: 'Links must have discernible text',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/link-name?application=playwright',
+    element:
+      '<a href="https://docs.sentry.io/static/7925169685c3d90602ab05f3ccf9d0ad/e515d/performance-details.png" class="gatsby-resp-image-link" target="_blank" rel="noopener" style="display: block;">',
+    failureSummary:
+      'Fix all of the following:\n  Element is in tab order and does not have accessible text\n\nFix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<div class="d-md-flex flex-column align-items-stretch collapse navbar-collapse" id="sidebar">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    description: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl:
+      'https://dequeuniversity.com/rules/axe/4.7/color-contrast?application=playwright',
+    element:
+      '<a class="css-1o62c7a" data-sidebar-link="true" href="https://docs.sentry.io/platforms/python/guides/fastapi/performance/">*** ** ***********</a>',
+    failureSummary:
+      'Fix any of the following:\n  Element has insufficient color contrast of 3.54 (foreground color: #9481a3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+  },
+  {
+    id: 'region',
+    impact: 'moderate',
+    description: 'All page content should be contained by landmarks',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.7/region?application=playwright',
+    element:
+      '<div class="d-md-flex flex-column align-items-stretch collapse navbar-collapse :hover" id="sidebar">',
+    failureSummary:
+      'Fix any of the following:\n  Some page content is not contained by landmarks',
+  },
+];
diff --git a/static/app/utils/replays/hooks/useCrumbHandlers.tsx b/static/app/utils/replays/hooks/useCrumbHandlers.tsx
index 2f349bbff1668..2297c1105f200 100644
--- a/static/app/utils/replays/hooks/useCrumbHandlers.tsx
+++ b/static/app/utils/replays/hooks/useCrumbHandlers.tsx
@@ -24,6 +24,29 @@ function useCrumbHandlers() {
 
   const onMouseEnter = useCallback(
     (frame: ReplayFrame) => {
+      if (frame.element) {
+        try {
+          const div = document.createElement('div');
+          div.innerHTML = frame.element!;
+          const element = div.firstChild;
+
+          const selector: string[] = [];
+          for (const attr of element!.attributes) {
+            selector.push(`[${attr.name}="${attr.value}"]`);
+          }
+
+          clearAllHighlights();
+          highlight({
+            selector: selector.join(''),
+            annotation: frame.id,
+            // spotlight: true,
+          });
+        } catch (error) {
+          // console.error(error);
+        }
+        return;
+      }
+
       // this debounces the mouseEnter callback in unison with mouseLeave
       // we ensure the pointer remains over the target element before dispatching state events in order to minimize unnecessary renders
       // this helps during scrolling or mouse move events which would otherwise fire in rapid succession slowing down our app
diff --git a/static/app/utils/replays/hooks/useReplayData.tsx b/static/app/utils/replays/hooks/useReplayData.tsx
index a9203201ff871..94f89df5ac216 100644
--- a/static/app/utils/replays/hooks/useReplayData.tsx
+++ b/static/app/utils/replays/hooks/useReplayData.tsx
@@ -3,6 +3,7 @@ import * as Sentry from '@sentry/react';
 
 import {Client} from 'sentry/api';
 import parseLinkHeader, {ParsedHeader} from 'sentry/utils/parseLinkHeader';
+import {MOCK_A11Y_DATA} from 'sentry/utils/replays/hooks/mockA11yData';
 import {mapResponseToReplayRecord} from 'sentry/utils/replays/replayDataUtils';
 import RequestError from 'sentry/utils/requestError/requestError';
 import useApi from 'sentry/utils/useApi';
@@ -49,6 +50,7 @@ type Options = {
 };
 
 interface Result {
+  accessibilityFrames: unknown[];
   attachments: unknown[];
   errors: ReplayError[];
   fetchError: undefined | RequestError;
@@ -63,6 +65,7 @@ const INITIAL_STATE: State = Object.freeze({
   fetchingAttachments: true,
   fetchingErrors: true,
   fetchingReplay: true,
+  fetchingAccessibilityFrames: true,
 });
 
 /**
@@ -103,6 +106,7 @@ function useReplayData({
   const [attachments, setAttachments] = useState<unknown[]>([]);
   const attachmentMap = useRef<Map<string, unknown[]>>(new Map()); // Map keys are always iterated by insertion order
   const [errors, setErrors] = useState<ReplayError[]>([]);
+  const [accessibilityFrames, setAccessibilityFrames] = useState<unknown[]>([]);
   const [replayRecord, setReplayRecord] = useState<ReplayRecord>();
 
   const projectSlug = useMemo(() => {
@@ -184,6 +188,31 @@ function useReplayData({
     setState(prev => ({...prev, fetchingErrors: false}));
   }, [api, orgSlug, replayRecord, errorsPerPage]);
 
+  const fetchAccessibilityFrames = useCallback(async () => {
+    if (!attachments || attachments.length === 0) {
+      return;
+    }
+
+    if (MOCK_A11Y_DATA) {
+      setAccessibilityFrames(MOCK_A11Y_DATA);
+    } else {
+      const atts = JSON.stringify(attachments);
+      const response = await fetch('http://localhost:3000/events', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: atts,
+      });
+
+      const body = await response.json();
+
+      setAccessibilityFrames(body);
+    }
+
+    setState(prev => ({...prev, fetchingAccessibilityFrames: false}));
+  }, [attachments]);
+
   const onError = useCallback(error => {
     Sentry.captureException(error);
     setState(prev => ({...prev, fetchError: error}));
@@ -212,9 +241,17 @@ function useReplayData({
     fetchAttachments().catch(onError);
   }, [state.fetchError, fetchAttachments, onError]);
 
+  useEffect(() => {
+    if (state.fetchError) {
+      return;
+    }
+    fetchAccessibilityFrames().catch(onError);
+  }, [state.fetchError, fetchAccessibilityFrames, onError]);
+
   return {
     attachments,
     errors,
+    accessibilityFrames,
     fetchError: state.fetchError,
     fetching: state.fetchingAttachments || state.fetchingErrors || state.fetchingReplay,
     onRetry: loadData,
diff --git a/static/app/utils/replays/hooks/useReplayReader.tsx b/static/app/utils/replays/hooks/useReplayReader.tsx
index e2f0db845b80c..a043027837f6a 100644
--- a/static/app/utils/replays/hooks/useReplayReader.tsx
+++ b/static/app/utils/replays/hooks/useReplayReader.tsx
@@ -11,14 +11,15 @@ type Props = {
 export default function useReplayReader({orgSlug, replaySlug}: Props) {
   const replayId = parseReplayId(replaySlug);
 
-  const {attachments, errors, replayRecord, ...replayData} = useReplayData({
-    orgSlug,
-    replayId,
-  });
+  const {attachments, accessibilityFrames, errors, replayRecord, ...replayData} =
+    useReplayData({
+      orgSlug,
+      replayId,
+    });
 
   const replay = useMemo(
-    () => ReplayReader.factory({attachments, errors, replayRecord}),
-    [attachments, errors, replayRecord]
+    () => ReplayReader.factory({attachments, errors, replayRecord, accessibilityFrames}),
+    [attachments, errors, replayRecord, accessibilityFrames]
   );
 
   return {
@@ -28,6 +29,7 @@ export default function useReplayReader({orgSlug, replaySlug}: Props) {
     replay,
     replayId,
     replayRecord,
+    accessibilityFrames,
   };
 }
 
diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx
index 3aa0a1faa9faf..ec616b263f22e 100644
--- a/static/app/utils/replays/replayReader.tsx
+++ b/static/app/utils/replays/replayReader.tsx
@@ -33,6 +33,8 @@ import {
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
 
 interface ReplayReaderParams {
+  accessibilityFrames: unknown;
+
   /**
    * Loaded segment data
    *
@@ -88,13 +90,18 @@ function removeDuplicateClicks(frames: BreadcrumbFrame[]) {
 }
 
 export default class ReplayReader {
-  static factory({attachments, errors, replayRecord}: ReplayReaderParams) {
-    if (!attachments || !replayRecord || !errors) {
+  static factory({
+    attachments,
+    errors,
+    replayRecord,
+    accessibilityFrames,
+  }: ReplayReaderParams) {
+    if (!attachments || !replayRecord || !errors || !accessibilityFrames) {
       return null;
     }
 
     try {
-      return new ReplayReader({attachments, errors, replayRecord});
+      return new ReplayReader({attachments, errors, replayRecord, accessibilityFrames});
     } catch (err) {
       Sentry.captureException(err);
 
@@ -113,6 +120,7 @@ export default class ReplayReader {
   private constructor({
     attachments,
     errors,
+    accessibilityFrames,
     replayRecord,
   }: RequiredNotNull<ReplayReaderParams>) {
     this._cacheKey = domId('replayReader-');
@@ -161,6 +169,8 @@ export default class ReplayReader {
     this._sortedSpanFrames = hydrateSpans(replayRecord, spanFrames).sort(sortFrames);
     this._optionFrame = optionFrame;
 
+    this._accessibilityFrames = accessibilityFrames;
+
     // Insert extra records to satisfy minimum requirements for the UI
     this._sortedBreadcrumbFrames.push(replayInitBreadcrumb(replayRecord));
     this._sortedRRWebEvents.unshift(recordingStartFrame(replayRecord));
@@ -173,6 +183,7 @@ export default class ReplayReader {
   private _errors: ErrorFrame[];
   private _optionFrame: undefined | OptionFrame;
   private _replayRecord: ReplayRecord;
+  private _accessibilityFrames: unknown;
   private _sortedBreadcrumbFrames: BreadcrumbFrame[];
   private _sortedRRWebEvents: RecordingFrame[];
   private _sortedSpanFrames: SpanFrame[];
@@ -194,6 +205,8 @@ export default class ReplayReader {
 
   getErrorFrames = () => this._errors;
 
+  getAccessibilityFrames = () => this._accessibilityFrames;
+
   getConsoleFrames = memoize(() =>
     this._sortedBreadcrumbFrames.filter(
       frame =>
diff --git a/static/app/utils/replays/resourceFrame.tsx b/static/app/utils/replays/resourceFrame.tsx
index 25df09ed918c4..2dc4b4b1e35d9 100644
--- a/static/app/utils/replays/resourceFrame.tsx
+++ b/static/app/utils/replays/resourceFrame.tsx
@@ -40,3 +40,13 @@ export function getResponseBodySize(frame: SpanFrame) {
   }
   return undefined;
 }
+
+export function getFrameType(frame: SpanFrame) {
+  return frame.id ?? 'unknown';
+}
+export function getFrameImpact(frame: SpanFrame) {
+  return frame.impact ?? 'unknown';
+}
+export function getFramePath(frame: SpanFrame) {
+  return frame.element ?? 'unknown';
+}
diff --git a/static/app/views/replays/detail/accessibility/a11yTable.tsx b/static/app/views/replays/detail/accessibility/a11yTable.tsx
new file mode 100644
index 0000000000000..a6b6718e125d4
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/a11yTable.tsx
@@ -0,0 +1,271 @@
+import {useCallback, useMemo, useRef, useState} from 'react';
+import {AutoSizer, CellMeasurer, GridCellProps, MultiGrid} from 'react-virtualized';
+import styled from '@emotion/styled';
+
+import Placeholder from 'sentry/components/placeholder';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
+import {t} from 'sentry/locale';
+import useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
+import {useResizableDrawer} from 'sentry/utils/useResizableDrawer';
+import useUrlParams from 'sentry/utils/useUrlParams';
+import AccessibilityFilters from 'sentry/views/replays/detail/accessibility/accessibilityFilters';
+import AccessibilityHeaderCell, {
+  COLUMN_COUNT,
+} from 'sentry/views/replays/detail/accessibility/accessibilityHeaderCell';
+import AccessibilityTableCell from 'sentry/views/replays/detail/accessibility/accessibilityTableCell';
+import AccessibilityDetails from 'sentry/views/replays/detail/accessibility/details';
+import useAccessibilityFilters from 'sentry/views/replays/detail/accessibility/useAccessibilityFilters';
+import useSortAccessibility from 'sentry/views/replays/detail/accessibility/useSortAccessibility';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import NoRowRenderer from 'sentry/views/replays/detail/noRowRenderer';
+import useVirtualizedGrid from 'sentry/views/replays/detail/useVirtualizedGrid';
+
+const HEADER_HEIGHT = 25;
+const BODY_HEIGHT = 28;
+
+const RESIZEABLE_HANDLE_HEIGHT = 105;
+
+type Props = {
+  accessibilityFrames: undefined | any;
+  startTimestampMs: number;
+};
+
+const cellMeasurer = {
+  defaultHeight: BODY_HEIGHT,
+  defaultWidth: 100,
+  fixedHeight: true,
+};
+
+function AccessibilityList({accessibilityFrames, startTimestampMs}: Props) {
+  const {currentTime, currentHoverTime} = useReplayContext();
+  const {onMouseEnter, onMouseLeave, onClickTimestamp} = useCrumbHandlers();
+
+  const [scrollToRow, setScrollToRow] = useState<undefined | number>(undefined);
+
+  const filterProps = useAccessibilityFilters({
+    accessibilityFrames: accessibilityFrames || [],
+  });
+  const {items: filteredItems, searchTerm, setSearchTerm} = filterProps;
+  const clearSearchTerm = () => setSearchTerm('');
+  const {handleSort, items, sortConfig} = useSortAccessibility({items: filteredItems});
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gridRef = useRef<MultiGrid>(null);
+  const deps = useMemo(() => [items, searchTerm], [items, searchTerm]);
+  const {cache, getColumnWidth, onScrollbarPresenceChange, onWrapperResize} =
+    useVirtualizedGrid({
+      cellMeasurer,
+      gridRef,
+      columnCount: COLUMN_COUNT,
+      dynamicColumnIndex: 2,
+      deps,
+    });
+
+  // `initialSize` cannot depend on containerRef because the ref starts as
+  // `undefined` which then gets set into the hook and doesn't update.
+  const initialSize = Math.max(150, window.innerHeight * 0.4);
+
+  const {size: containerSize, ...resizableDrawerProps} = useResizableDrawer({
+    direction: 'up',
+    initialSize,
+    min: 0,
+    onResize: () => {},
+  });
+  const {getParamValue: getDetailRow, setParamValue: setDetailRow} = useUrlParams(
+    'n_detail_row',
+    ''
+  );
+  const detailDataIndex = getDetailRow();
+
+  const maxContainerHeight =
+    (containerRef.current?.clientHeight || window.innerHeight) - RESIZEABLE_HANDLE_HEIGHT;
+  const splitSize =
+    accessibilityFrames && detailDataIndex
+      ? Math.min(maxContainerHeight, containerSize)
+      : undefined;
+
+  const onClickCell = useCallback(
+    ({dataIndex, rowIndex}: {dataIndex: number; rowIndex: number}) => {
+      if (getDetailRow() === String(dataIndex)) {
+        setDetailRow('');
+      } else {
+        setDetailRow(String(dataIndex));
+        setScrollToRow(rowIndex);
+      }
+    },
+    [getDetailRow, setDetailRow]
+  );
+
+  const cellRenderer = ({columnIndex, rowIndex, key, style, parent}: GridCellProps) => {
+    const accessibility = items[rowIndex - 1];
+
+    return (
+      <CellMeasurer
+        cache={cache}
+        columnIndex={columnIndex}
+        key={key}
+        parent={parent}
+        rowIndex={rowIndex}
+      >
+        {({
+          measure: _,
+          registerChild,
+        }: {
+          measure: () => void;
+          registerChild?: (element?: Element) => void;
+        }) =>
+          rowIndex === 0 ? (
+            <AccessibilityHeaderCell
+              ref={e => e && registerChild?.(e)}
+              handleSort={handleSort}
+              index={columnIndex}
+              sortConfig={sortConfig}
+              style={{...style, height: HEADER_HEIGHT}}
+            />
+          ) : (
+            <AccessibilityTableCell
+              columnIndex={columnIndex}
+              currentHoverTime={currentHoverTime}
+              currentTime={currentTime}
+              frame={accessibility}
+              onMouseEnter={onMouseEnter}
+              onMouseLeave={onMouseLeave}
+              onClickCell={onClickCell}
+              onClickTimestamp={onClickTimestamp}
+              ref={e => e && registerChild?.(e)}
+              rowIndex={rowIndex}
+              sortConfig={sortConfig}
+              startTimestampMs={startTimestampMs}
+              style={{...style, height: BODY_HEIGHT}}
+            />
+          )
+        }
+      </CellMeasurer>
+    );
+  };
+
+  return (
+    <FluidHeight>
+      <AccessibilityFilters accessibilityFrames={accessibilityFrames} {...filterProps} />
+      <AccessibilityTable
+        ref={containerRef}
+        data-test-id="replay-details-accessibility-tab"
+      >
+        <SplitPanel
+          style={{
+            gridTemplateRows: splitSize !== undefined ? `1fr auto ${splitSize}px` : '1fr',
+          }}
+        >
+          {accessibilityFrames ? (
+            <OverflowHidden>
+              <AutoSizer onResize={onWrapperResize}>
+                {({height, width}) => (
+                  <MultiGrid
+                    ref={gridRef}
+                    cellRenderer={cellRenderer}
+                    columnCount={COLUMN_COUNT}
+                    columnWidth={getColumnWidth(width)}
+                    deferredMeasurementCache={cache}
+                    estimatedColumnSize={100}
+                    estimatedRowSize={BODY_HEIGHT}
+                    fixedRowCount={1}
+                    height={height}
+                    noContentRenderer={() => (
+                      <NoRowRenderer
+                        unfilteredItems={accessibilityFrames}
+                        clearSearchTerm={clearSearchTerm}
+                      >
+                        {t('No accessibility requests recorded')}
+                      </NoRowRenderer>
+                    )}
+                    onScrollbarPresenceChange={onScrollbarPresenceChange}
+                    onScroll={() => {
+                      if (scrollToRow !== undefined) {
+                        setScrollToRow(undefined);
+                      }
+                    }}
+                    scrollToRow={scrollToRow}
+                    overscanColumnCount={COLUMN_COUNT}
+                    overscanRowCount={5}
+                    rowCount={items.length + 1}
+                    rowHeight={({index}) => (index === 0 ? HEADER_HEIGHT : BODY_HEIGHT)}
+                    width={width}
+                  />
+                )}
+              </AutoSizer>
+            </OverflowHidden>
+          ) : (
+            <Placeholder height="100%" />
+          )}
+          <AccessibilityDetails
+            {...resizableDrawerProps}
+            item={detailDataIndex ? items[detailDataIndex] : null}
+            onClose={() => {
+              setDetailRow('');
+            }}
+            projectId="1"
+            startTimestampMs={startTimestampMs}
+          />
+        </SplitPanel>
+      </AccessibilityTable>
+    </FluidHeight>
+  );
+}
+
+const SplitPanel = styled('div')`
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+  display: grid;
+  overflow: auto;
+`;
+
+const OverflowHidden = styled('div')`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const AccessibilityTable = styled(FluidHeight)`
+  border: 1px solid ${p => p.theme.border};
+  border-radius: ${p => p.theme.borderRadius};
+
+  .beforeHoverTime + .afterHoverTime:before {
+    border-top: 1px solid ${p => p.theme.purple200};
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 999999999%;
+  }
+
+  .beforeHoverTime:last-child:before {
+    border-bottom: 1px solid ${p => p.theme.purple200};
+    content: '';
+    right: 0;
+    position: absolute;
+    bottom: 0;
+    width: 999999999%;
+  }
+
+  .beforeCurrentTime + .afterCurrentTime:before {
+    border-top: 1px solid ${p => p.theme.purple300};
+    content: '';
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 999999999%;
+  }
+
+  .beforeCurrentTime:last-child:before {
+    border-bottom: 1px solid ${p => p.theme.purple300};
+    content: '';
+    right: 0;
+    position: absolute;
+    bottom: 0;
+    width: 999999999%;
+  }
+`;
+
+export default AccessibilityList;
diff --git a/static/app/views/replays/detail/accessibility/accessibilityFilters.tsx b/static/app/views/replays/detail/accessibility/accessibilityFilters.tsx
new file mode 100644
index 0000000000000..20097b2689a7d
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/accessibilityFilters.tsx
@@ -0,0 +1,59 @@
+import {CompactSelect, SelectOption} from 'sentry/components/compactSelect';
+import SearchBar from 'sentry/components/searchBar';
+import {t} from 'sentry/locale';
+import useAccessibilityFilters from 'sentry/views/replays/detail/accessibility/useAccessibilityFilters';
+import FiltersGrid from 'sentry/views/replays/detail/filtersGrid';
+
+type Props = {
+  accessibilityFrames: undefined | unknown[];
+} & ReturnType<typeof useAccessibilityFilters>;
+
+function AccessibilityFilters({
+  getResourceTypes,
+  accessibilityFrames,
+  searchTerm,
+  selectValue,
+  setFilters,
+  setSearchTerm,
+}: Props) {
+  const resourceTypes = getResourceTypes();
+
+  return (
+    <FiltersGrid>
+      <CompactSelect
+        disabled={!resourceTypes}
+        multiple
+        onChange={setFilters as (selection: SelectOption<string>[]) => void}
+        options={
+          [
+            // {
+            //   label: t('Method'),
+            //   options: methodTypes,
+            // },
+            // {
+            //   label: t('Status'),
+            //   options: statusTypes,
+            // },
+            // {
+            //   label: t('Type'),
+            //   options: resourceTypes,
+            // },
+          ]
+        }
+        size="sm"
+        triggerLabel={selectValue?.length === 0 ? t('Any') : null}
+        triggerProps={{prefix: t('Filter')}}
+        value={selectValue}
+      />
+      <SearchBar
+        size="sm"
+        onChange={setSearchTerm}
+        placeholder={t('Search Accessibility Requests')}
+        query={searchTerm}
+        disabled={!accessibilityFrames || !accessibilityFrames.length}
+      />
+    </FiltersGrid>
+  );
+}
+
+export default AccessibilityFilters;
diff --git a/static/app/views/replays/detail/accessibility/accessibilityHeaderCell.tsx b/static/app/views/replays/detail/accessibility/accessibilityHeaderCell.tsx
new file mode 100644
index 0000000000000..cf5359c89014c
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/accessibilityHeaderCell.tsx
@@ -0,0 +1,54 @@
+import {ComponentProps, CSSProperties, forwardRef, ReactNode} from 'react';
+
+import HeaderCell from 'sentry/components/replays/virtualizedGrid/headerCell';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconExclamation} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import useSortAccessibility from 'sentry/views/replays/detail/accessibility/useSortAccessibility';
+
+type SortConfig = ReturnType<typeof useSortAccessibility>['sortConfig'];
+type Props = {
+  handleSort: ReturnType<typeof useSortAccessibility>['handleSort'];
+  index: number;
+  sortConfig: SortConfig;
+  style: CSSProperties;
+};
+
+const COLUMNS: {
+  field: SortConfig['by'];
+  label: ReactNode;
+  tooltipTitle?: ComponentProps<typeof Tooltip>['title'];
+}[] = [
+  {
+    field: 'impact',
+    label: <IconExclamation />,
+  },
+  {
+    field: 'id',
+    label: t('Type'),
+  },
+  {field: 'element', label: t('Path')},
+
+  {field: 'timestamp', label: t('Timestamp')},
+];
+
+export const COLUMN_COUNT = COLUMNS.length;
+
+const AccessibilityHeaderCell = forwardRef<HTMLButtonElement, Props>(
+  ({handleSort, index, sortConfig, style}: Props, ref) => {
+    const {field, label, tooltipTitle} = COLUMNS[index];
+    return (
+      <HeaderCell
+        ref={ref}
+        handleSort={handleSort}
+        field={field}
+        label={label}
+        tooltipTitle={tooltipTitle}
+        sortConfig={sortConfig}
+        style={style}
+      />
+    );
+  }
+);
+
+export default AccessibilityHeaderCell;
diff --git a/static/app/views/replays/detail/accessibility/accessibilityTableCell.tsx b/static/app/views/replays/detail/accessibility/accessibilityTableCell.tsx
new file mode 100644
index 0000000000000..d30200a8f8772
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/accessibilityTableCell.tsx
@@ -0,0 +1,174 @@
+import {ComponentProps, CSSProperties, forwardRef} from 'react';
+import classNames from 'classnames';
+
+import FileSize from 'sentry/components/fileSize';
+import {
+  ButtonWrapper,
+  Cell,
+  Text,
+} from 'sentry/components/replays/virtualizedGrid/bodyCell';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconCircleFill} from 'sentry/icons';
+import type useCrumbHandlers from 'sentry/utils/replays/hooks/useCrumbHandlers';
+import {
+  getFrameImpact,
+  getFramePath,
+  getFrameType,
+} from 'sentry/utils/replays/resourceFrame';
+import type {SpanFrame} from 'sentry/utils/replays/types';
+import useUrlParams from 'sentry/utils/useUrlParams';
+import useSortAccessibility from 'sentry/views/replays/detail/accessibility/useSortAccessibility';
+import TimestampButton from 'sentry/views/replays/detail/timestampButton';
+import {operationName} from 'sentry/views/replays/detail/utils';
+
+const EMPTY_CELL = '--';
+
+const IMPACT_COLOR_MAPPINGS = {
+  minor: 'blue400',
+  moderate: 'blue400',
+  serious: 'yellow400',
+  critical: 'red400',
+};
+
+interface Props extends ReturnType<typeof useCrumbHandlers> {
+  columnIndex: number;
+  currentHoverTime: number | undefined;
+  currentTime: number;
+  frame: SpanFrame;
+  onClickCell: (props: {dataIndex: number; rowIndex: number}) => void;
+  rowIndex: number;
+  sortConfig: ReturnType<typeof useSortAccessibility>['sortConfig'];
+  startTimestampMs: number;
+  style: CSSProperties;
+}
+
+const AccessibilityTableCell = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      columnIndex,
+      currentHoverTime,
+      currentTime,
+      frame,
+      onMouseEnter,
+      onMouseLeave,
+      onClickCell,
+      onClickTimestamp,
+      rowIndex,
+      sortConfig,
+      startTimestampMs,
+      style,
+    }: Props,
+    ref
+  ) => {
+    // Rows include the sortable header, the dataIndex does not
+    const dataIndex = rowIndex - 1;
+
+    const {getParamValue} = useUrlParams('n_detail_row', '');
+    const isSelected = getParamValue() === String(dataIndex);
+
+    const type = getFrameType(frame);
+    const impact = getFrameImpact(frame);
+    const path = getFramePath(frame);
+
+    const hasOccurred = currentTime >= frame.offsetMs;
+    const isBeforeHover =
+      currentHoverTime === undefined || currentHoverTime >= frame.offsetMs;
+
+    const isByTimestamp = sortConfig.by === 'startTimestamp';
+    const isAsc = isByTimestamp ? sortConfig.asc : undefined;
+    const columnProps = {
+      className: classNames({
+        beforeCurrentTime: isByTimestamp
+          ? isAsc
+            ? hasOccurred
+            : !hasOccurred
+          : undefined,
+        afterCurrentTime: isByTimestamp
+          ? isAsc
+            ? !hasOccurred
+            : hasOccurred
+          : undefined,
+        beforeHoverTime:
+          isByTimestamp && currentHoverTime !== undefined
+            ? isAsc
+              ? isBeforeHover
+              : !isBeforeHover
+            : undefined,
+        afterHoverTime:
+          isByTimestamp && currentHoverTime !== undefined
+            ? isAsc
+              ? !isBeforeHover
+              : isBeforeHover
+            : undefined,
+      }),
+      hasOccurred: isByTimestamp ? hasOccurred : undefined,
+      isSelected,
+      isStatusError: typeof statusCode === 'number' && statusCode >= 400,
+      onClick: () => onClickCell({dataIndex, rowIndex}),
+      onMouseEnter: () => onMouseEnter(frame),
+      onMouseLeave: () => onMouseLeave(frame),
+      ref,
+      style,
+    } as ComponentProps<typeof Cell>;
+
+    const renderFns = [
+      () => (
+        <Cell {...columnProps}>
+          <Text>
+            <Tooltip title={impact ? impact : 'unknown'}>
+              <IconCircleFill color={IMPACT_COLOR_MAPPINGS[impact]} />
+            </Tooltip>
+          </Text>
+        </Cell>
+      ),
+      () => (
+        <Cell {...columnProps}>
+          <Text>{type ? type : 'unknown'}</Text>
+        </Cell>
+      ),
+      () => (
+        <Cell {...columnProps}>
+          <Text>{path ? path : EMPTY_CELL}</Text>
+        </Cell>
+      ),
+      () => (
+        <Cell {...columnProps}>
+          <Tooltip
+            title={frame.timestamp}
+            isHoverable
+            showOnlyOnOverflow
+            overlayStyle={{maxWidth: '500px !important'}}
+          >
+            <Text>{frame.timestamp || EMPTY_CELL}</Text>
+          </Tooltip>
+        </Cell>
+      ),
+      () => (
+        <Cell {...columnProps}>
+          <Tooltip title={operationName(frame.op)} isHoverable showOnlyOnOverflow>
+            <Text>{operationName(frame.op)}</Text>
+          </Tooltip>
+        </Cell>
+      ),
+      () => (
+        <Cell {...columnProps} numeric>
+          <ButtonWrapper>
+            <TimestampButton
+              format="mm:ss.SSS"
+              onClick={event => {
+                event.stopPropagation();
+                onClickTimestamp(frame);
+              }}
+              startTimestampMs={startTimestampMs}
+              timestampMs={frame.timestampMs}
+            />
+          </ButtonWrapper>
+        </Cell>
+      ),
+    ];
+
+    return renderFns[columnIndex]();
+  }
+);
+
+export default AccessibilityTableCell;
diff --git a/static/app/views/replays/detail/accessibility/details/components.tsx b/static/app/views/replays/detail/accessibility/details/components.tsx
new file mode 100644
index 0000000000000..9e59645537b83
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/details/components.tsx
@@ -0,0 +1,137 @@
+import {Fragment, ReactNode, useState} from 'react';
+import styled from '@emotion/styled';
+
+import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconChevron} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+
+export const Indent = styled('div')`
+  padding-left: ${space(4)};
+`;
+
+const NotFoundText = styled('span')`
+  color: ${p => p.theme.subText};
+  font-size: ${p => p.theme.fontSizeSmall};
+`;
+
+const WarningText = styled('span')`
+  color: ${p => p.theme.errorText};
+`;
+
+export function Warning({warnings}: {warnings: undefined | string[]}) {
+  if (warnings?.includes('JSON_TRUNCATED') || warnings?.includes('TEXT_TRUNCATED')) {
+    return (
+      <WarningText>{t('Truncated (~~) due to exceeding 150k characters')}</WarningText>
+    );
+  }
+
+  if (warnings?.includes('INVALID_JSON')) {
+    return <WarningText>{t('Invalid JSON')}</WarningText>;
+  }
+
+  return null;
+}
+
+export function SizeTooltip({children}: {children: ReactNode}) {
+  return (
+    <Tooltip
+      title={t(
+        'It is possible the accessibility transfer size is smaller due to compression.'
+      )}
+    >
+      {children}
+    </Tooltip>
+  );
+}
+
+export function keyValueTableOrNotFound(
+  data: undefined | Record<string, string | ReactNode>,
+  notFoundText: string
+) {
+  return data ? (
+    <StyledKeyValueTable noMargin>
+      {Object.entries(data).map(([key, value]) => (
+        <KeyValueTableRow key={key} keyName={key} value={<span>{value}</span>} />
+      ))}
+    </StyledKeyValueTable>
+  ) : (
+    <Indent>
+      <NotFoundText>{notFoundText}</NotFoundText>
+    </Indent>
+  );
+}
+
+const SectionTitle = styled('dt')``;
+
+const SectionTitleExtra = styled('span')`
+  flex-grow: 1;
+  text-align: right;
+  font-weight: normal;
+`;
+
+const SectionData = styled('dd')`
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+`;
+
+const ToggleButton = styled('button')`
+  background: ${p => p.theme.background};
+  border: 0;
+  color: ${p => p.theme.headingColor};
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: 600;
+  line-height: ${p => p.theme.text.lineHeightBody};
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${space(1)};
+
+  padding: ${space(0.5)} ${space(1)};
+
+  :hover {
+    background: ${p => p.theme.backgroundSecondary};
+  }
+`;
+
+export function SectionItem({
+  children,
+  title,
+  titleExtra,
+}: {
+  children: ReactNode;
+  title: ReactNode;
+  titleExtra?: ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <Fragment>
+      <SectionTitle>
+        <ToggleButton aria-label={t('toggle section')} onClick={() => setIsOpen(!isOpen)}>
+          <IconChevron direction={isOpen ? 'down' : 'right'} size="xs" />
+          {title}
+          {titleExtra ? <SectionTitleExtra>{titleExtra}</SectionTitleExtra> : null}
+        </ToggleButton>
+      </SectionTitle>
+      <SectionData>{isOpen ? children : null}</SectionData>
+    </Fragment>
+  );
+}
+
+const StyledKeyValueTable = styled(KeyValueTable)`
+  & > dt {
+    font-size: ${p => p.theme.fontSizeSmall};
+    padding-left: ${space(4)};
+  }
+  & > dd {
+    ${p => p.theme.overflowEllipsis};
+    font-size: ${p => p.theme.fontSizeSmall};
+    display: flex;
+    justify-content: flex-end;
+    white-space: normal;
+    text-align: right;
+  }
+`;
diff --git a/static/app/views/replays/detail/accessibility/details/content.spec.tsx b/static/app/views/replays/detail/accessibility/details/content.spec.tsx
new file mode 100644
index 0000000000000..8903cac8083c7
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/details/content.spec.tsx
@@ -0,0 +1,441 @@
+import {render, screen} from 'sentry-test/reactTestingLibrary';
+
+import hydrateSpans from 'sentry/utils/replays/hydrateSpans';
+import useProjectSdkNeedsUpdate from 'sentry/utils/useProjectSdkNeedsUpdate';
+import AccessibilityDetailsContent from 'sentry/views/replays/detail/accessibility/details/content';
+import type {TabKey} from 'sentry/views/replays/detail/accessibility/details/tabs';
+
+jest.mock('sentry/utils/useProjectSdkNeedsUpdate');
+
+function mockNeedsUpdate(needsUpdate: boolean) {
+  jest.mocked(useProjectSdkNeedsUpdate).mockReturnValue({isFetching: false, needsUpdate});
+}
+
+const [
+  img,
+  fetchNoDataObj,
+  fetchUrlSkipped,
+  fetchBodySkipped,
+  fetchWithHeaders,
+  fetchWithRespBody,
+] = hydrateSpans(TestStubs.ReplayRecord(), [
+  TestStubs.Replay.ResourceFrame({
+    op: 'resource.img',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/static/img/logo.png',
+  }),
+  TestStubs.Replay.RequestFrame({
+    op: 'resource.fetch',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/api/0/issues/1234',
+  }),
+  TestStubs.Replay.RequestFrame({
+    op: 'resource.fetch',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/api/0/issues/1234',
+    data: {
+      method: 'GET',
+      statusCode: 200,
+      request: {_meta: {warnings: ['URL_SKIPPED']}, headers: {}},
+      response: {_meta: {warnings: ['URL_SKIPPED']}, headers: {}},
+    },
+  }),
+  TestStubs.Replay.RequestFrame({
+    op: 'resource.fetch',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/api/0/issues/1234',
+    data: {
+      method: 'GET',
+      statusCode: 200,
+      request: {
+        // @ts-expect-error
+        _meta: {warnings: ['BODY_SKIPPED']},
+        headers: {accept: 'application/json'},
+      },
+      response: {
+        // @ts-expect-error
+        _meta: {warnings: ['BODY_SKIPPED']},
+        headers: {'content-type': 'application/json'},
+      },
+    },
+  }),
+  TestStubs.Replay.RequestFrame({
+    op: 'resource.fetch',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/api/0/issues/1234',
+    data: {
+      method: 'GET',
+      statusCode: 200,
+      request: {
+        _meta: {},
+        headers: {accept: 'application/json'},
+      },
+      response: {
+        _meta: {},
+        headers: {'content-type': 'application/json'},
+      },
+    },
+  }),
+  TestStubs.Replay.RequestFrame({
+    op: 'resource.fetch',
+    startTimestamp: new Date(),
+    endTimestamp: new Date(),
+    description: '/api/0/issues/1234',
+    data: {
+      method: 'GET',
+      statusCode: 200,
+      request: {
+        _meta: {},
+        headers: {accept: 'application/json'},
+      },
+      response: {
+        _meta: {},
+        headers: {'content-type': 'application/json'},
+        body: {success: true},
+      },
+    },
+  }),
+]);
+
+const mockItems = {
+  img,
+  fetchNoDataObj,
+  fetchUrlSkipped,
+  fetchBodySkipped,
+  fetchWithHeaders,
+  fetchWithRespBody,
+};
+
+function basicSectionProps() {
+  return {
+    projectId: '',
+    startTimestampMs: new Date('2023-12-24').getTime(),
+  };
+}
+
+function queryScreenState() {
+  return {
+    dataSectionHeaders: screen
+      .queryAllByLabelText('toggle section')
+      .map(elem => elem.textContent),
+    isShowingSetup: Boolean(screen.queryByTestId('accessibility-setup-steps')),
+    isShowingUnsupported: Boolean(screen.queryByTestId('accessibility-op-unsupported')),
+  };
+}
+
+describe('AccessibilityDetailsContent', () => {
+  mockNeedsUpdate(false);
+
+  describe('Details Tab', () => {
+    const visibleTab = 'details' as TabKey;
+
+    describe('Unsupported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'img'},
+        {isSetup: true, itemName: 'img'},
+      ])(
+        'should render the `general` & `unsupported` sections when the span is not FETCH or XHR and isSetup=$isSetup. [$itemName]',
+        ({isSetup}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems.img}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['General'],
+            isShowingSetup: false,
+            isShowingUnsupported: true,
+          });
+        }
+      );
+    });
+
+    describe('Supported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'fetchNoDataObj'},
+        {isSetup: false, itemName: 'fetchUrlSkipped'},
+        {isSetup: false, itemName: 'fetchBodySkipped'},
+        {isSetup: false, itemName: 'fetchWithHeaders'},
+        {isSetup: false, itemName: 'fetchWithRespBody'},
+      ])(
+        'should render the `general` & `setup` sections when isSetup=false, no matter the item. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['General'],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([
+        {isSetup: true, itemName: 'fetchNoDataObj'},
+        {isSetup: true, itemName: 'fetchUrlSkipped'},
+      ])(
+        'should render the `general` & `setup` sections when the item has no data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['General'],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([
+        {isSetup: true, itemName: 'fetchBodySkipped'},
+        {isSetup: true, itemName: 'fetchWithHeaders'},
+        {isSetup: true, itemName: 'fetchWithRespBody'},
+      ])(
+        'should render the `general` & two `headers` sections, and always the setup section, when things are setup and the item has some data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['General', 'Request Headers', 'Response Headers'],
+            isShowingUnsupported: false,
+            isShowingSetup: true,
+          });
+        }
+      );
+    });
+  });
+
+  describe('Request Tab', () => {
+    const visibleTab = 'request' as TabKey;
+
+    describe('Unsupported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'img'},
+        {isSetup: true, itemName: 'img'},
+      ])(
+        'should render the `query params` & `unsupported` sections when the span is not FETCH or XHR and isSetup=$isSetup. [$itemName]',
+        ({isSetup}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems.img}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['Query String Parameters'],
+            isShowingSetup: false,
+            isShowingUnsupported: true,
+          });
+        }
+      );
+    });
+
+    describe('Supported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'fetchNoDataObj'},
+        {isSetup: false, itemName: 'fetchUrlSkipped'},
+        {isSetup: false, itemName: 'fetchBodySkipped'},
+        {isSetup: false, itemName: 'fetchWithHeaders'},
+        {isSetup: false, itemName: 'fetchWithRespBody'},
+      ])(
+        'should render the `query params` & `setup` sections when isSetup is false, no matter the item. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['Query String Parameters'],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([
+        {isSetup: true, itemName: 'fetchNoDataObj'},
+        {isSetup: true, itemName: 'fetchUrlSkipped'},
+        {isSetup: true, itemName: 'fetchBodySkipped'},
+        {isSetup: true, itemName: 'fetchWithHeaders'},
+      ])(
+        'should render the `query params` & `setup` sections when the item has no data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['Query String Parameters'],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([{isSetup: true, itemName: 'fetchWithRespBody'}])(
+        'should render the `query params` & `request payload` sections when things are setup and the item has some data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['Query String Parameters', 'Request BodySize: 0 B'],
+            isShowingUnsupported: false,
+            isShowingSetup: false,
+          });
+        }
+      );
+    });
+  });
+
+  describe('Response Tab', () => {
+    const visibleTab = 'response' as TabKey;
+
+    describe('Unsupported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'img'},
+        {isSetup: true, itemName: 'img'},
+      ])(
+        'should render the `unsupported` section when the span is not FETCH or XHR and isSetup=$isSetup. [$itemName]',
+        ({isSetup}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems.img}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: [],
+            isShowingSetup: false,
+            isShowingUnsupported: true,
+          });
+        }
+      );
+    });
+
+    describe('Supported Operation', () => {
+      it.each([
+        {isSetup: false, itemName: 'fetchNoDataObj'},
+        {isSetup: false, itemName: 'fetchUrlSkipped'},
+        {isSetup: false, itemName: 'fetchBodySkipped'},
+        {isSetup: false, itemName: 'fetchWithHeaders'},
+        {isSetup: false, itemName: 'fetchWithRespBody'},
+      ])(
+        'should render the `setup` section when isSetup is false, no matter the item. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: [],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([
+        {isSetup: true, itemName: 'fetchNoDataObj'},
+        {isSetup: true, itemName: 'fetchUrlSkipped'},
+        {isSetup: true, itemName: 'fetchBodySkipped'},
+        {isSetup: true, itemName: 'fetchWithHeaders'},
+      ])(
+        'should render the `setup` section when the item has no data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: [],
+            isShowingSetup: true,
+            isShowingUnsupported: false,
+          });
+        }
+      );
+
+      it.each([{isSetup: true, itemName: 'fetchWithRespBody'}])(
+        'should render the `response body` section when things are setup and the item has some data. [$itemName]',
+        ({isSetup, itemName}) => {
+          render(
+            <AccessibilityDetailsContent
+              {...basicSectionProps()}
+              isSetup={isSetup}
+              item={mockItems[itemName]}
+              visibleTab={visibleTab}
+            />
+          );
+
+          expect(queryScreenState()).toStrictEqual({
+            dataSectionHeaders: ['Response BodySize: 0 B'],
+            isShowingUnsupported: false,
+            isShowingSetup: false,
+          });
+        }
+      );
+    });
+  });
+});
diff --git a/static/app/views/replays/detail/accessibility/details/content.tsx b/static/app/views/replays/detail/accessibility/details/content.tsx
new file mode 100644
index 0000000000000..36936791f80f6
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/details/content.tsx
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+import type {SectionProps} from 'sentry/views/replays/detail/accessibility/details/sections';
+import {GeneralSection} from 'sentry/views/replays/detail/accessibility/details/sections';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+
+type Props = SectionProps;
+
+export default function AccessibilityDetailsContent(props: Props) {
+  // const organization = useOrganization();
+
+  return (
+    <OverflowFluidHeight>
+      <GeneralSection {...props} />
+    </OverflowFluidHeight>
+  );
+}
+
+const OverflowFluidHeight = styled(FluidHeight)`
+  overflow: auto;
+`;
diff --git a/static/app/views/replays/detail/accessibility/details/index.tsx b/static/app/views/replays/detail/accessibility/details/index.tsx
new file mode 100644
index 0000000000000..986e62a2212e3
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/details/index.tsx
@@ -0,0 +1,90 @@
+import {Fragment, MouseEvent} from 'react';
+import styled from '@emotion/styled';
+
+import {Button} from 'sentry/components/button';
+import Stacked from 'sentry/components/replays/breadcrumbs/stacked';
+import {IconClose} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {SpanFrame} from 'sentry/utils/replays/types';
+import {useResizableDrawer} from 'sentry/utils/useResizableDrawer';
+import AccessibilityDetailsContent from 'sentry/views/replays/detail/accessibility/details/content';
+import SplitDivider from 'sentry/views/replays/detail/layout/splitDivider';
+
+type Props = {
+  item: null | SpanFrame;
+  onClose: () => void;
+  projectId: undefined | string;
+  startTimestampMs: number;
+} & Omit<ReturnType<typeof useResizableDrawer>, 'size'>;
+
+function AccessibilityDetails({
+  isHeld,
+  item,
+  onClose,
+  onDoubleClick,
+  onMouseDown,
+  projectId,
+  startTimestampMs,
+}: Props) {
+  if (!item || !projectId) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      <StyledStacked>
+        <StyledSplitDivider
+          isHeld={isHeld}
+          onDoubleClick={onDoubleClick}
+          onMouseDown={onMouseDown}
+          slideDirection="updown"
+        />
+        <CloseButtonWrapper>
+          <Button
+            aria-label={t('Hide request details')}
+            borderless
+            icon={<IconClose isCircled size="sm" color="subText" />}
+            onClick={(e: MouseEvent) => {
+              e.preventDefault();
+              onClose();
+            }}
+            size="zero"
+          />
+        </CloseButtonWrapper>
+      </StyledStacked>
+
+      <AccessibilityDetailsContent
+        item={item}
+        projectId={projectId}
+        startTimestampMs={startTimestampMs}
+      />
+    </Fragment>
+  );
+}
+
+const StyledStacked = styled(Stacked)`
+  position: relative;
+  border-top: 1px solid ${p => p.theme.border};
+  border-bottom: 1px solid ${p => p.theme.border};
+`;
+
+const CloseButtonWrapper = styled('div')`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding: ${space(1)};
+  z-index: ${p => p.theme.zIndex.initial};
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSplitDivider = styled(SplitDivider)<{isHeld: boolean}>`
+  height: 100%;
+  ${p => (p.isHeld ? `z-index: ${p.theme.zIndex.initial + 1};` : '')}
+  :hover {
+    z-index: ${p => p.theme.zIndex.initial + 1};
+  }
+`;
+
+export default AccessibilityDetails;
diff --git a/static/app/views/replays/detail/accessibility/details/sections.tsx b/static/app/views/replays/detail/accessibility/details/sections.tsx
new file mode 100644
index 0000000000000..541e516ab2906
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/details/sections.tsx
@@ -0,0 +1,95 @@
+import {Fragment, MouseEvent} from 'react';
+import styled from '@emotion/styled';
+import beautify from 'js-beautify';
+
+import {CodeSnippet} from 'sentry/components/codeSnippet';
+import {useReplayContext} from 'sentry/components/replays/replayContext';
+import {t} from 'sentry/locale';
+import type {SpanFrame} from 'sentry/utils/replays/types';
+import {
+  keyValueTableOrNotFound,
+  SectionItem,
+} from 'sentry/views/replays/detail/accessibility/details/components';
+import FluidHeight from 'sentry/views/replays/detail/layout/fluidHeight';
+import TimestampButton from 'sentry/views/replays/detail/timestampButton';
+
+export type SectionProps = {
+  item: unknown;
+  projectId: string;
+  startTimestampMs: number;
+};
+
+function DisplayString(props) {
+  const {text} = props;
+
+  return (
+    <div
+      style={{
+        textAlign: 'left',
+        marginTop: '30px',
+        fontSize: '1.2em',
+        paddingLeft: '20px',
+      }}
+    >
+      <b>{text.split('\n')[0]}</b>
+      <ul style={{marginTop: '10px'}}>
+        {text
+          .split('\n')
+          .slice(1)
+          .map((line, index) => (
+            <li key={index}>{line}</li>
+          ))}
+      </ul>
+    </div>
+  );
+}
+
+export function GeneralSection({item, startTimestampMs}: SectionProps) {
+  const {setCurrentTime} = useReplayContext();
+
+  // TODO[replay]: what about:
+  // `requestFrame?.data?.request?.size` vs. `requestFrame?.data?.requestBodySize`
+
+  const data = {
+    [t('Type')]: item.id,
+    [t('Help')]: <a href={item.helpUrl}>{item.description}</a>,
+    [t('Impact')]: item.impact,
+    [t('Path')]: item.element,
+
+    [t('Timestamp')]: (
+      <TimestampButton
+        format="mm:ss.SSS"
+        onClick={(event: MouseEvent) => {
+          event.stopPropagation();
+          setCurrentTime(item.offsetMs);
+        }}
+        startTimestampMs={startTimestampMs}
+        timestampMs={item.timestampMs}
+      />
+    ),
+    // [t('Extended Summary')]: <DisplayStringStyled text={item.failureSummary} />,
+  };
+
+  return (
+    <Fragment>
+      <SectionItem title={t('DOM Element')}>
+        <CodeSnippet language="html" hideCopyButton>
+          {beautify.html(item.element, {indent_size: 2})}
+        </CodeSnippet>
+      </SectionItem>
+      <SectionItem title={t('General')}>
+        {keyValueTableOrNotFound(data, t('Missing request details'))}
+      </SectionItem>
+      <DisplayStringStyled text={item.failureSummary} />
+    </Fragment>
+  );
+}
+
+const OverflowFluidHeight = styled(FluidHeight)`
+  overflow: auto;
+`;
+
+const DisplayStringStyled = styled(DisplayString)`
+  text-align: left;
+  margin-top: 30px;
+`;
diff --git a/static/app/views/replays/detail/accessibility/useAccessibilityFilters.tsx b/static/app/views/replays/detail/accessibility/useAccessibilityFilters.tsx
new file mode 100644
index 0000000000000..4902eaff56085
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/useAccessibilityFilters.tsx
@@ -0,0 +1,137 @@
+import {useCallback, useMemo} from 'react';
+
+import type {SelectOption} from 'sentry/components/compactSelect';
+import {decodeList, decodeScalar} from 'sentry/utils/queryString';
+import useFiltersInLocationQuery from 'sentry/utils/replays/hooks/useFiltersInLocationQuery';
+import type {SpanFrame} from 'sentry/utils/replays/types';
+import {filterItems, operationName} from 'sentry/views/replays/detail/utils';
+
+export interface AccessibilitySelectOption extends SelectOption<string> {
+  qs: 'f_n_type';
+}
+
+const DEFAULT_FILTERS = {
+  f_n_type: [],
+} as Record<AccessibilitySelectOption['qs'], string[]>;
+
+export type FilterFields = {
+  f_n_search: string;
+  f_n_type: string[];
+  n_detail_row?: string;
+  n_detail_tab?: string;
+};
+
+type Options = {
+  accessibilityFrames: SpanFrame[];
+};
+
+type Return = {
+  getResourceTypes: () => AccessibilitySelectOption[];
+  items: SpanFrame[];
+  searchTerm: string;
+  selectValue: string[];
+  setFilters: (val: AccessibilitySelectOption[]) => void;
+  setSearchTerm: (searchTerm: string) => void;
+};
+
+const FILTERS = {
+  type: (item: unknown, types: string[]) => types.length === 0 || types.includes(item.op),
+
+  searchTerm: (item: unknown, searchTerm: string) => {
+    console.log(item);
+    return JSON.stringify(item?.description).toLowerCase().includes(searchTerm);
+  },
+};
+
+function useAccessibilityFilters({accessibilityFrames}: Options): Return {
+  const {setFilter, query} = useFiltersInLocationQuery<FilterFields>();
+
+  // const method = useMemo(() => decodeList(query.f_n_method), [query.f_n_method]);
+  const type = useMemo(() => decodeList(query.f_n_type), [query.f_n_type]);
+  const searchTerm = decodeScalar(query.f_n_search, '')?.toLowerCase();
+
+  // Need to clear Accessibility Details URL params when we filter, otherwise you can
+  // get into a state where it is trying to load details for a non fetch/xhr
+  // request.
+  const setFilterAndClearDetails = useCallback(
+    arg => {
+      setFilter({
+        ...arg,
+        n_detail_row: undefined,
+        n_detail_tab: undefined,
+      });
+    },
+    [setFilter]
+  );
+
+  const items = useMemo(
+    () =>
+      filterItems({
+        items: accessibilityFrames,
+        filterFns: FILTERS,
+        filterVals: {type, searchTerm},
+      }),
+    [accessibilityFrames, type, searchTerm]
+  );
+
+  // const getMethodTypes = useCallback(
+  //   () =>
+  //     Array.from(
+  //       new Set(accessibilityFrames.map(getFrameMethod).concat('GET').concat(method))
+  //     )
+  //       .filter(Boolean)
+  //       .sort()
+  //       .map(
+  //         (value): AccessibilitySelectOption => ({
+  //           value,
+  //           label: value,
+  //           qs: 'f_n_method',
+  //         })
+  //       ),
+  //   [accessibilityFrames, method]
+  // );
+
+  const getResourceTypes = useCallback(
+    () =>
+      Array.from(new Set(accessibilityFrames.map(frame => frame.op).concat(type)))
+        .sort((a, b) => (operationName(a) < operationName(b) ? -1 : 1))
+        .map(
+          (value): AccessibilitySelectOption => ({
+            value,
+            label: value?.split('.')?.[1] ?? value,
+            qs: 'f_n_type',
+          })
+        ),
+    [accessibilityFrames, type]
+  );
+
+  const setSearchTerm = useCallback(
+    (f_n_search: string) =>
+      setFilterAndClearDetails({f_n_search: f_n_search || undefined}),
+    [setFilterAndClearDetails]
+  );
+
+  const setFilters = useCallback(
+    (value: AccessibilitySelectOption[]) => {
+      const groupedValues = value.reduce((state, selection) => {
+        return {
+          ...state,
+          [selection.qs]: [...state[selection.qs], selection.value],
+        };
+      }, DEFAULT_FILTERS);
+      setFilterAndClearDetails(groupedValues);
+    },
+    [setFilterAndClearDetails]
+  );
+
+  return {
+    getResourceTypes,
+    items,
+    searchTerm,
+    selectValue: [...type],
+    setFilters,
+    setSearchTerm,
+  };
+}
+
+export default useAccessibilityFilters;
diff --git a/static/app/views/replays/detail/accessibility/useSortAccessibility.tsx b/static/app/views/replays/detail/accessibility/useSortAccessibility.tsx
new file mode 100644
index 0000000000000..ed6379204bb00
--- /dev/null
+++ b/static/app/views/replays/detail/accessibility/useSortAccessibility.tsx
@@ -0,0 +1,112 @@
+import {useCallback, useMemo} from 'react';
+
+import type {SpanFrame} from 'sentry/utils/replays/types';
+import useUrlParams from 'sentry/utils/useUrlParams';
+
+interface SortConfig {
+  asc: boolean;
+  by: keyof SpanFrame | string;
+  getValue: (row: SpanFrame) => any;
+}
+
+const IMPACT_SORT = {
+  minor: 0,
+  moderate: 1,
+  serious: 2,
+  critical: 3,
+};
+
+const SortStrategies: Record<string, (row) => any> = {
+  impact: row => IMPACT_SORT[row.impact],
+  id: row => row.id,
+  element: row => row.element,
+  startTimestamp: row => row.startTimestamp,
+};
+
+const DEFAULT_ASC = 'false';
+const DEFAULT_BY = 'impact';
+
+type Opts = {items: SpanFrame[]};
+
+function useSortAccessibility({items}: Opts) {
+  const {getParamValue: getSortAsc, setParamValue: setSortAsc} = useUrlParams(
+    's_n_asc',
+    DEFAULT_ASC
+  );
+  const {getParamValue: getSortBy, setParamValue: setSortBy} = useUrlParams(
+    's_n_by',
+    DEFAULT_BY
+  );
+  const {setParamValue: setDetailRow} = useUrlParams('n_detail_row', '');
+
+  const sortAsc = getSortAsc();
+  const sortBy = getSortBy();
+
+  const sortConfig = useMemo(
+    () =>
+      ({
+        asc: sortAsc === 'true',
+        by: sortBy,
+        getValue: SortStrategies[sortBy],
+      } as SortConfig),
+    [sortAsc, sortBy]
+  );
+
+  const sortedItems = useMemo(
+    () => sortAccessibility(items, sortConfig),
+    [items, sortConfig]
+  );
+
+  const handleSort = useCallback(
+    (fieldName: keyof typeof SortStrategies) => {
+      if (sortConfig.by === fieldName) {
+        setSortAsc(sortConfig.asc ? 'false' : 'true');
+      } else {
+        setSortAsc('true');
+        setSortBy(fieldName);
+      }
+      setDetailRow('');
+    },
+    [sortConfig, setSortAsc, setSortBy, setDetailRow]
+  );
+
+  return {
+    handleSort,
+    items: sortedItems,
+    sortConfig,
+  };
+}
+
+function sortAccessibility(
+  accessibility: SpanFrame[],
+  sortConfig: SortConfig
+): SpanFrame[] {
+  return [...accessibility].sort((a, b) => {
+    let valueA = sortConfig.getValue(a);
+    let valueB = sortConfig.getValue(b);
+
+    valueA = typeof valueA === 'string' ? valueA.toUpperCase() : valueA;
+    valueB = typeof valueB === 'string' ? valueB.toUpperCase() : valueB;
+
+    // if the values are not defined, we want to push them to the bottom of the list
+    if (valueA === undefined) {
+      return 1;
+    }
+
+    if (valueB === undefined) {
+      return -1;
+    }
+
+    if (valueA === valueB) {
+      return 0;
+    }
+
+    if (sortConfig.asc) {
+      return valueA > valueB ? 1 : -1;
+    }
+
+    return valueB > valueA ? 1 : -1;
+  });
+}
+
+export default useSortAccessibility;
diff --git a/static/app/views/replays/detail/utils.tsx b/static/app/views/replays/detail/utils.tsx
index 628b43a7deb92..d7552cdaf4dfe 100644
--- a/static/app/views/replays/detail/utils.tsx
+++ b/static/app/views/replays/detail/utils.tsx
@@ -22,5 +22,5 @@ export function filterItems<I extends object, K extends string>({
 }
 
 export function operationName(op: string) {
-  return op.split('.')?.[1] ?? op;
+  return op?.split('.')?.[1] ?? op;
 }