Browse Source

fix(replays): better aria label parsing for brackets (#59584)

now we're correctly checking for brackets!

before:
<img width="881" alt="SCR-20231107-nojj"
src="https://github.com/getsentry/sentry/assets/56095982/a19d640c-1d85-4bf6-962d-3ad9661d0443">
after:
<img width="893" alt="SCR-20231107-nohc"
src="https://github.com/getsentry/sentry/assets/56095982/af5ab489-4430-46b4-9593-57d07750e50b">
Michelle Zhang 1 year ago
parent
commit
2219da23bc

+ 35 - 0
static/app/views/replays/deadRageClick/getAriaLabel.spec.tsx

@@ -12,6 +12,41 @@ describe('getAriaLabel', () => {
         'button#ID1.classA[role="button"][data-test-id="button-test"][alt="view more"][title="cool title"]',
       ariaLabel: '',
     },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="[Filtered]"][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: '[Filtered]',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="[]"][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: '[]',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria=""][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: '',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="["][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: '[',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="]blah"][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: ']blah',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="""][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: '"',
+    },
+    {
+      element:
+        'button#ID1.classA[role="button"][aria="]""][data-test-id="button-test"][alt="view more"][title="cool title"]',
+      ariaLabel: ']"',
+    },
   ])(
     'should construct the correct aria label for each element in the list',
     ({element, ariaLabel}) => {

+ 3 - 2
static/app/views/replays/detail/utils.tsx

@@ -28,12 +28,13 @@ export function operationName(op: string) {
 }
 
 export function getAriaLabel(str: string) {
-  const matches = str.match(/\[aria=(.*?)\]/g);
+  const matches = str.match(/\[aria=(.*)\]/g);
   if (!matches) {
     return '';
   }
   const pre = matches[0];
-  return matches[0].substring(pre.indexOf('aria="') + 6, pre.lastIndexOf('"]'));
+  const start = pre.indexOf('aria="') + 6;
+  return pre.substring(start, pre.indexOf('"]', start));
 }
 
 function trimAttribute(elementAttribute, fullAlltribute) {