javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tab-button): nested interactives are not rendered (#26576)

Browse Source 
resolves #23332
This commit is contained in:
Liam DeBeasi
2023-01-09 09:41:39 -05:00
committed by GitHub
parent f724980833
commit df4882d4d1
3 changed files with 90 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
core/src/components/tab-button/test/a11y/index.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Tab Button - a11y</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/core.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<main>
<h1>Tab Button</h1>
<ion-tab-bar>
<ion-tab-button href="#">
<ion-label>Tab One</ion-label>
<ion-icon aria-hidden="true" name="star"></ion-icon>
</ion-tab-button>
<ion-tab-button href="#">
<ion-label>Tab Two</ion-label>
<ion-icon aria-hidden="true" name="globe"></ion-icon>
<ion-badge aria-hidden="true" color="danger">6</ion-badge>
</ion-tab-button>
<ion-tab-button href="#" disabled="true">
<ion-label>Tab Three</ion-label>
<ion-icon aria-hidden="true" name="logo-facebook"></ion-icon>
<ion-badge aria-hidden="true" color="primary">6</ion-badge>
</ion-tab-button>
<ion-tab-button hidden>
<ion-label>Hidden</ion-label>
<ion-icon aria-hidden="true" name="alert"></ion-icon>
</ion-tab-button>
<ion-tab-button href="#">
<ion-label>Tab Four</ion-label>
<ion-icon aria-hidden="true" name="chatbox"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-tab-bar>
<ion-tab-button href="#" aria-label="Tab 1">
<ion-icon aria-hidden="true" name="star"></ion-icon>
</ion-tab-button>
<ion-tab-button href="#" aria-label="Tab 2">
<ion-icon aria-hidden="true" name="globe"></ion-icon>
</ion-tab-button>
<ion-tab-button href="#" aria-label="Tab 3">
<ion-icon aria-hidden="true" name="chatbox"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</main>
</body>
</html>

12
core/src/components/tab-button/test/a11y/tab-button.e2e.ts Normal file
View File

@@ -0,0 +1,12 @@
import AxeBuilder from '@axe-core/playwright';
import { expect } from '@playwright/test';
import { test } from '@utils/test/playwright';
test.describe('tab-button: a11y', () => {
test('should not have any axe violations', async ({ page }) => {
await page.goto('/src/components/tab-button/test/a11y');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});
});