feat: add focused and focusable information to _snapshotForAI

packages/injected/src/ariaSnapshot.ts

@@ -31,6 +31,8 @@ export type AriaNode = AriaProps & {
   element: Element;
   box: Box;
   receivesPointerEvents: boolean;
+  focused?: boolean;
+  focusable?: boolean;
   props: Record<string, string>;
 };
 
@@ -192,7 +194,9 @@ function toAriaNode(element: Element, options?: { forAI?: boolean, refPrefix?: s
     props: {},
     element,
     box: box(element),
-    receivesPointerEvents
+    receivesPointerEvents,
+    focused: element.ownerDocument.activeElement === element,
+    focusable: roleUtils.isFocusable(element)
   };
 
   if (roleUtils.kAriaCheckedRoles.includes(role))
@@ -431,6 +435,10 @@ export function renderAriaTree(ariaSnapshot: AriaSnapshot, options?: { mode?: 'r
       key += ` [disabled]`;
     if (ariaNode.expanded)
       key += ` [expanded]`;
+    if (ariaNode.focused)
+      key += ` [focused]`;
+    if (ariaNode.focusable)
+      key += ` [focusable]`;
     if (ariaNode.level)
       key += ` [level=${ariaNode.level}]`;
     if (ariaNode.pressed === 'mixed')

packages/injected/src/roleUtils.ts

@@ -66,7 +66,7 @@ function hasTabIndex(element: Element) {
   return !Number.isNaN(Number(String(element.getAttribute('tabindex'))));
 }
 
-function isFocusable(element: Element) {
+export function isFocusable(element: Element) {
   // TODO:
   // - "inert" attribute makes the whole substree not focusable
   // - when dialog is open on the page - everything but the dialog is not focusable

packages/playwright-core/src/server/chromium/crAccessibility.ts

@@ -254,6 +254,9 @@ class CRAXNode implements accessibility.AXNode {
         continue;
       node[booleanProperty] = value;
     }
+
+    // Add focusable property
+    node.focusable = this._focusable;
     const numericalProperties: Array<keyof channels.AXNode> = [
       'level',
       'valuemax',

packages/playwright-core/src/server/firefox/ffAccessibility.ts

@@ -234,6 +234,10 @@ class FFAXNode implements accessibility.AXNode {
         continue;
       node[booleanProperty] = value;
     }
+
+    // Add focusable property
+    node.focusable = this._focusable;
+
     const numericalProperties: Array<keyof channels.AXNode & keyof Protocol.Accessibility.AXTree> = [
       'level'
     ];

packages/playwright-core/src/server/webkit/wkAccessibility.ts

@@ -225,6 +225,9 @@ class WKAXNode implements accessibility.AXNode {
         continue;
       (node as any)[booleanProperty] = value;
     }
+
+    // Add focusable property
+    node.focusable = this._payload.focusable;
 
     const numericalProperties: Array<keyof channels.AXNode & keyof Protocol.Page.AXNode> = [
       'level',

packages/playwright-core/src/utils/isomorphic/ariaSnapshot.ts

@@ -28,6 +28,8 @@ export type AriaProps = {
   checked?: boolean | 'mixed';
   disabled?: boolean;
   expanded?: boolean;
+  focused?: boolean;
+  focusable?: boolean;
   level?: number;
   pressed?: boolean | 'mixed';
   selected?: boolean;
@@ -443,6 +445,16 @@ export class KeyParser {
       node.expanded = value === 'true';
       return;
     }
+    if (key === 'focused') {
+      this._assert(value === 'true' || value === 'false', 'Value of "focused" attribute must be a boolean', errorPos);
+      node.focused = value === 'true';
+      return;
+    }
+    if (key === 'focusable') {
+      this._assert(value === 'true' || value === 'false', 'Value of "focusable" attribute must be a boolean', errorPos);
+      node.focusable = value === 'true';
+      return;
+    }
     if (key === 'level') {
       this._assert(!isNaN(Number(value)), 'Value of "level" attribute must be a number', errorPos);
       node.level = Number(value);

tests/page/page-aria-snapshot-ai.spec.ts

@@ -231,3 +231,27 @@ it('should gracefully fallback when child frame cant be captured', async ({ page
       - iframe [ref=e3]
   `);
 });
+
+it('should include focused and focusable information', async ({ page }) => {
+  await page.setContent(`
+    <button id="btn1">Button 1</button>
+    <button id="btn2" autofocus>Button 2</button>
+    <div>Not focusable</div>
+  `);
+
+  const snapshot = await snapshotForAI(page);
+
+  // Check for Button 1 with focusable attribute
+  expect(snapshot).toContain('button "Button 1"');
+  expect(snapshot).toContain('[focusable]');
+
+  // Check for Button 2 with focusable attribute
+  expect(snapshot).toContain('button "Button 2"');
+  expect(snapshot).toMatch(/Button 2.*\[focusable\]/);
+
+  // Check that there's a focused element somewhere in the snapshot
+  expect(snapshot).toContain('[focused]');
+
+  // Check for the non-focusable div
+  expect(snapshot).toContain('Not focusable');
+});