7.4Tab Order Verification

test('tab order follows logical visual flow', async ({ page }) => {
    await page.goto('/checkout');

    const tabOrder: string[] = [];

    // Press Tab through the page and record the order
    for (let i = 0; i < 30; i++) {
        await page.keyboard.press('Tab');
        const label = await page.evaluate(() => {
            const el = document.activeElement;
            return el?.getAttribute('aria-label')
                || el?.getAttribute('name')
                || el?.textContent?.trim().substring(0, 30)
                || el?.tagName
                || 'unknown';
        });
        tabOrder.push(label);
    }

    // Verify the expected tab order for checkout
    const expectedOrder = [
        'Full Name',
        'Email',
        'Address Line 1',
        'Address Line 2',
        'City',
        'State',
        'ZIP Code',
        'Continue to Payment',
    ];

    // Each expected element should appear in the tab order in sequence
    let lastIndex = -1;
    for (const expected of expectedOrder) {
        const index = tabOrder.findIndex(
            (label, i) => i > lastIndex && label.includes(expected)
        );
        expect(index).toBeGreaterThan(lastIndex);
        lastIndex = index;
    }
});