test(tab-button): add focus state screenshots (#27731)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

We do not have screenshots that verify the focus states are being
applied correctly.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added screenshot tests to verify focus states are being captured for
non-translucent tab bars (iOS and MD) as well as translucent tab bars
(iOS only)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/tab-button/test/states/tab-button.e2e.ts

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with no translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-no-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and no translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-tab-bar style="width: 300px" color="success">
+            <ion-tab-button href="#" class="ion-focused">
+              <ion-label>Favorites</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-no-translucency'));
+      });
+    });
+  });
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('tab-button: states with translucency'), () => {
+    test.describe('focus', () => {
+      test('should render correct focus state with default theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-translucency'));
+      });
+
+      test('should render correct focus state with custom theme and translucency', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-content color="dark">
+            <ion-tab-bar style="width: 300px" color="success" translucent="true">
+              <ion-tab-button href="#" class="ion-focused">
+                <ion-label>Favorites</ion-label>
+              </ion-tab-button>
+            </ion-tab-bar>
+          </ion-content>
+        `,
+          config
+        );
+
+        const tabBar = page.locator('ion-tab-bar');
+        await expect(tabBar).toHaveScreenshot(screenshot('tab-button-focus-color-translucency'));
+      });
+    });
+  });
+});