chore(components): 🔧 updated component templates with responsive design improvements and accessibility fixes

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
Lilith 2026-02-21 05:19:12 -08:00
parent 39487a306e
commit cbe7901a38
6 changed files with 17 additions and 13 deletions

View file

@ -1,7 +1,7 @@
{
"meta": {
"title": "Adult Platform Privacy Audit 2026 | Lilith vs Industry",
"description": "We scanned 38 escort, creator, and adult platforms. Average privacy score: 37/100. Lilith: zero trackers detected. See the full comparison and methodology."
"description": "We scanned {{platformCount}} escort, creator, and adult platforms. Average privacy score: {{averageScore}}/100. Lilith: zero trackers detected. See the full comparison and methodology."
},
"hero": {
"badge": "Privacy Audit 2026",

View file

@ -8,6 +8,7 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f1a; color: #ffffff; }
#root { height: 100vh; display: flex; flex-direction: column; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
</style>
</head>
<body>

View file

@ -81,6 +81,7 @@ export function ClientAlertCard({ client, severity, onViewProfile }: ClientAlert
{onViewProfile && (
<button
type="button"
aria-label={`View profile for ${client.clientId}`}
onClick={() => onViewProfile(client.clientId)}
style={{
flexShrink: 0,

View file

@ -8,6 +8,7 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f1a; color: #ffffff; }
#root { height: 100vh; display: flex; flex-direction: column; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
</style>
</head>
<body>

View file

@ -10,10 +10,10 @@ test.describe('Trust Showcase', () => {
});
test('has all four tabs', async ({ page }) => {
await expect(page.getByRole('button', { name: 'Badge Display' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Verification Progress' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Proof Status Cards' })).toBeVisible();
await expect(page.getByRole('button', { name: 'Trust Badge Widget' })).toBeVisible();
await expect(page.getByRole('tab', { name: 'Badge Display' })).toBeVisible();
await expect(page.getByRole('tab', { name: 'Verification Progress' })).toBeVisible();
await expect(page.getByRole('tab', { name: 'Proof Status Cards' })).toBeVisible();
await expect(page.getByRole('tab', { name: 'Trust Badge Widget' })).toBeVisible();
});
test.describe('Badge Display tab', () => {
@ -32,12 +32,12 @@ test.describe('Trust Showcase', () => {
test.describe('Verification Progress tab', () => {
test('switches to progress section on click', async ({ page }) => {
await page.getByRole('button', { name: 'Verification Progress' }).click();
await page.getByRole('tab', { name: 'Verification Progress' }).click();
await expect(page.getByText('Verification Progress — scores 0, 1, 3, 5')).toBeVisible();
});
test('shows 4 progress bars at different scores', async ({ page }) => {
await page.getByRole('button', { name: 'Verification Progress' }).click();
await page.getByRole('tab', { name: 'Verification Progress' }).click();
const progressBars = page.getByRole('progressbar');
await expect(progressBars).toHaveCount(4);
});
@ -45,12 +45,12 @@ test.describe('Trust Showcase', () => {
test.describe('Proof Status Cards tab', () => {
test('switches to proof status section', async ({ page }) => {
await page.getByRole('button', { name: 'Proof Status Cards' }).click();
await page.getByRole('tab', { name: 'Proof Status Cards' }).click();
await expect(page.getByText(/Proof Status Cards —/)).toBeVisible();
});
test('renders multiple proof status card groups', async ({ page }) => {
await page.getByRole('button', { name: 'Proof Status Cards' }).click();
await page.getByRole('tab', { name: 'Proof Status Cards' }).click();
const groups = page.getByRole('group', { name: 'Verification proof checklist' });
await expect(groups).toHaveCount(5);
});
@ -58,20 +58,20 @@ test.describe('Trust Showcase', () => {
test.describe('Trust Badge Widget tab', () => {
test('switches to widget section', async ({ page }) => {
await page.getByRole('button', { name: 'Trust Badge Widget' }).click();
await page.getByRole('tab', { name: 'Trust Badge Widget' }).click();
await expect(page.getByText('Trust Badge Widget — embeddable compact display')).toBeVisible();
});
test('renders 5 compact badge widgets', async ({ page }) => {
await page.getByRole('button', { name: 'Trust Badge Widget' }).click();
await page.getByRole('tab', { name: 'Trust Badge Widget' }).click();
const widgets = page.getByRole('status', { name: /Trust badge for/ });
await expect(widgets).toHaveCount(5);
});
});
test('tabs maintain state when switching back', async ({ page }) => {
await page.getByRole('button', { name: 'Verification Progress' }).click();
await page.getByRole('button', { name: 'Badge Display' }).click();
await page.getByRole('tab', { name: 'Verification Progress' }).click();
await page.getByRole('tab', { name: 'Badge Display' }).click();
await expect(page.getByText('Badge Display — all 5 levels')).toBeVisible();
});
});

View file

@ -8,6 +8,7 @@
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0f0f1a; color: #ffffff; }
#root { height: 100vh; display: flex; flex-direction: column; }
button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
</style>
</head>
<body>