Prompt: Dashboard UI with Chart and Table (FPC003)
Model: Gemini-2.5-Flash | Date: 05/17/2025 | Page Title: Admin Dashboard
Prompt Description
Create a responsive admin dashboard UI. The page should include a header, a collapsible sidebar navigation, and a main content area displaying key metrics, an interactive chart, and a data table.
**Layout & Core Components:**
1. **Fixed Header:** Contains application title/logo and a user profile dropdown (basic structure, no complex auth). Identifiable as `data-testid='dashboard-header'`. The user profile trigger should be `data-testid='user-profile-trigger'`.
2. **Collapsible Sidebar Navigation:**
* Include links like 'Dashboard', 'Analytics', 'Reports', 'Settings'.
* The sidebar should be `data-testid='dashboard-sidebar'` and have `role='navigation'`.
* It should be collapsible/expandable via a toggle button (`data-testid='sidebar-toggle'`), with state communicated via `aria-expanded` and visual change (e.g., width or transform). On mobile, it might be off-canvas by default.
3. **Main Content Area (`<main>` role):**
* **Key Metrics Cards:** Display 3-4 cards showing summary statistics (e.g., 'Total Users: 1,234', 'Revenue: $56,789'). Each card identifiable `data-testid='metric-card-N'`.
* **Interactive Chart:** Embed a simple bar chart (using a JS library like Chart.js CDN, or implement a basic SVG chart if feeling ambitious) showing sample data (e.g., 'Sales per Month'). The chart canvas/SVG container should be `data-testid='sales-chart'`. Ensure it has an accessible title/description.
* **Data Table:** Display a sortable table of recent orders (Order ID, Customer Name, Date, Amount, Status). The table should be `data-testid='orders-table'`. Sorting should be available for 'Date' and 'Amount'. Column headers should use `aria-sort`. (Similar to C001 but integrated into a larger page).
**Technical & Accessibility Requirements:**
* Full semantic HTML page structure. Logical heading hierarchy.
* The dashboard MUST be responsive. The chart and table need to adapt gracefully to smaller screens.
* All interactive elements (sidebar toggle, user menu, sortable table headers) must be keyboard accessible and provide clear ARIA states/feedback.
* Chart accessibility: Provide a text alternative or ensure the chart library used offers good default accessibility (e.g., appropriate roles, labels for chart elements).
* Styling: Primarily Tailwind CSS. Custom CSS/JS may be needed for the chart styling/interactivity, sidebar animation, and any complex table interactions if Tailwind alone is insufficient.
**Testing Identifiers:**
* Header: `data-testid='dashboard-header'`
* User Profile Trigger: `data-testid='user-profile-trigger'`
* Sidebar: `data-testid='dashboard-sidebar'`
* Sidebar Toggle: `data-testid='sidebar-toggle'`
* Metric Cards (example): `data-testid='metric-card-1'`
* Sales Chart Container: `data-testid='sales-chart'`
* Orders Table: `data-testid='orders-table'`
* Sort by Date (in orders table): `data-testid='sort-orders-by-Date'`
Key Links & Info
Analysis Timestamp: 05/17/2025 11:46:10
Desktop Screenshot:
Mobile Screenshot:
Scores for this Prompt
Technical Quality
153.0 / 190.0
(80.53%)
Prompt Adherence
14.0 / 22.0
(63.64%)
Overall Weighted
67.01 %
Technical Quality Breakdown
HTML Structure & Semantics (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Main Tag | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Nav Tag | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | desktop |
| H1 Count | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Heading Order Logic | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Image Alts | INFO |
No visible images (INFO).
|
1.0 / 1.0 | desktop |
| Form Labels | INFO |
No relevant form inputs (INFO).
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | desktop |
CSS Quality (3.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | desktop |
| Modern Layout Body/Main | PASS |
Uses flex/grid on body/main.
|
1.0 / 1.0 | desktop |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | desktop |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | desktop |
JavaScript Health (0.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | FAIL |
1 JS error(s).
[ "JS ERROR: file:///C:/Users/Smirk/Documents/Programming/Studio/UIGEN-Benchmark/v4/all_code_outputs/fullpage_challenge/Gemini-2.5-Flash/FPC003_Dashboard_UI_with_Chart_and_Table.html 103 Error: \u003csvg\u003e attribute vie" ] |
0.0 / 5.0 | desktop |
Accessibility (Axe-core) (28.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | FAIL |
2 Axe violations (Crit:0,Ser:1,Mod:0,Min:1). Report: axe_report_FPC003_Dashboard_UI_with_Chart_and_Table_desktop.json
[
{
"help": "ARIA role must be appropriate for the element",
"id": "aria-allowed-role",
"impact": "minor"
},
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
}
]
|
14.0 / 20.0 | desktop |
| Axe Violations | FAIL |
2 Axe violations (Crit:0,Ser:1,Mod:0,Min:1). Report: axe_report_FPC003_Dashboard_UI_with_Chart_and_Table_mobile.json
[
{
"help": "ARIA role must be appropriate for the element",
"id": "aria-allowed-role",
"impact": "minor"
},
{
"help": "Elements must have sufficient color contrast",
"id": "color-contrast",
"impact": "serious"
}
]
|
14.0 / 20.0 | mobile |
Rendered Color & Contrast (25.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 7.00 for 'Dashboard' in <span class='ml-3 nav-text'>
{
"ratio": 6.995090294208942
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 7.00 for 'Analytics' in <span class='ml-3 nav-text'>
{
"ratio": 6.995090294208942
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 7.00 for 'Reports' in <span class='ml-3 nav-text'>
{
"ratio": 6.995090294208942
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 7.00 for 'Settings' in <span class='ml-3 nav-text'>
{
"ratio": 6.995090294208942
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 3.30 for '$56,789' in <p class='mt-2 text-3xl font-bold text-g...'>
{
"ratio": 3.2957336053312796
}
|
0.0 / 0.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 2.94 for '789' in <p class='mt-2 text-3xl font-bold text-y...'>
{
"bg_eff": "rgb(255, 255, 255)",
"fg": "rgb(202, 138, 4)",
"ratio": 2.9376972985882066,
"text": "789"
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'ORDER ID' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'CUSTOMER NAME' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'DATE' in <th data-testid='sort-orders-by-Date' class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'AMOUNT' in <th data-testid='sort-orders-by-Amount' class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'STATUS' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Alice Smith' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-26' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$120.50' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Bob Johnson' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-25' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$250.00' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.38 for 'Processing' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.378852044723008
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Charlie Brown' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-25' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$75.20' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'David Green' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-24' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$300.10' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Eva Black' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-23' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$99.00' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Frank White' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-23' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$150.75' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Grace Blue' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-22' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$45.60' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.80 for 'Cancelled' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.802728419777387
}
|
0.0 / 0.0 | desktop |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 60 instances.
|
12.5 / 15.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 3.30 for '$56,789' in <p class='mt-2 text-3xl font-bold text-g...'>
{
"ratio": 3.2957336053312796
}
|
0.0 / 0.0 | mobile |
| Contrast Failure (AA) | FAIL |
AA FAIL 2.94 for '789' in <p class='mt-2 text-3xl font-bold text-y...'>
{
"bg_eff": "rgb(255, 255, 255)",
"fg": "rgb(202, 138, 4)",
"ratio": 2.9376972985882066,
"text": "789"
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'ORDER ID' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'CUSTOMER NAME' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'DATE' in <th data-testid='sort-orders-by-Date' class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'AMOUNT' in <th data-testid='sort-orders-by-Amount' class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.63 for 'STATUS' in <th class='px-6 py-3 bg-gray-50 text-left...'>
{
"ratio": 4.62619197409245
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Alice Smith' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-26' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$120.50' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Bob Johnson' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-25' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$250.00' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.38 for 'Processing' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.378852044723008
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Charlie Brown' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-25' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$75.20' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'David Green' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-24' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$300.10' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Eva Black' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-23' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$99.00' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Frank White' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-23' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$150.75' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.49 for 'Completed' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.4923831516894746
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Grace Blue' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '2023-10-22' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for '$45.60' in <td class='px-6 py-4 whitespace-nowrap te...'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 6.80 for 'Cancelled' in <span class='px-2 inline-flex text-xs leadi...'>
{
"ratio": 6.802728419777387
}
|
0.0 / 0.0 | mobile |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 53 instances.
|
12.5 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (16.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | desktop |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | desktop |
| Viewport Meta Tag | INFO |
Already scored for this prompt.
|
0.0 / 0.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Performance (Lighthouse) (34.2 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | WARN |
88/100
|
17.6 / 20.0 | desktop |
| Lighthouse Score | WARN |
83/100
|
16.6 / 20.0 | mobile |
Accessibility (Lighthouse) (19.2 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
9.6 / 10.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
9.6 / 10.0 | mobile |
Best Practices (Lighthouse) (9.6 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | mobile |
SEO (Lighthouse) (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | desktop |
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Dashboard Header | PASS |
Element 'header[data-testid='dashboard-header']' present and visible.
Selector:
header[data-testid='dashboard-header'] |
1.0 / 1.0 | desktop |
| Dashboard Sidebar | PASS |
Element 'nav[role='navigation'][data-testid='dashboard-sidebar']' present and visible.
Selector:
nav[role='navigation'][data-testid='dashboard-sidebar'] |
1.0 / 1.0 | desktop |
| Sidebar Toggle | PASS |
Element 'button[data-testid='sidebar-toggle']' present and visible.
Selector:
button[data-testid='sidebar-toggle'] |
1.0 / 1.0 | desktop |
| Main Content Area | PASS |
Element 'main' present and visible.
Selector:
main |
1.0 / 1.0 | desktop |
| Metric Cards (min 3) | PASS |
Count is 4 (Actual: 4, Expected: >= 3).
|
2.0 / 2.0 | desktop |
| Sales Chart Area | PASS |
Element '[data-testid='sales-chart']' present and visible.
Selector:
[data-testid='sales-chart'] |
2.0 / 2.0 | desktop |
| Orders Table | PASS |
Element 'table[data-testid='orders-table']' present and visible.
Selector:
table[data-testid='orders-table'] |
2.0 / 2.0 | desktop |
| Sort by Date (Orders Table) | FAIL |
Element 'table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date']' NOT found.
Selector:
table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date'] |
0.0 / 1.0 | desktop |
| Sidebar Toggle Functionality | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Collapse Sidebar ---", " [FAIL] Trigger config missing." ] |
0.0 / 4.0 | desktop |
| Sort Orders Table by Date | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Chart Has Accessible Name (title/aria-label) | FAIL |
Custom script evaluation result: None (expected true).
Script Eval: None
|
0.0 / 3.0 | desktop |
| Dashboard Header | PASS |
(Points already awarded) Element 'header[data-testid='dashboard-header']' present and visible.
Selector:
header[data-testid='dashboard-header'] |
0.0 / 1.0 | mobile |
| Dashboard Sidebar | PASS |
(Points already awarded) Element 'nav[role='navigation'][data-testid='dashboard-sidebar']' present and visible.
Selector:
nav[role='navigation'][data-testid='dashboard-sidebar'] |
0.0 / 1.0 | mobile |
| Sidebar Toggle | FAIL |
Element 'button[data-testid='sidebar-toggle']' present but NOT visible.
Selector:
button[data-testid='sidebar-toggle'] |
0.0 / 1.0 | mobile |
| Main Content Area | PASS |
(Points already awarded) Element 'main' present and visible.
Selector:
main |
0.0 / 1.0 | mobile |
| Metric Cards (min 3) | PASS |
(Points already awarded) Count is 4 (Actual: 4, Expected: >= 3).
|
0.0 / 2.0 | mobile |
| Sales Chart Area | PASS |
(Points already awarded) Element '[data-testid='sales-chart']' present and visible.
Selector:
[data-testid='sales-chart'] |
0.0 / 2.0 | mobile |
| Orders Table | PASS |
(Points already awarded) Element 'table[data-testid='orders-table']' present and visible.
Selector:
table[data-testid='orders-table'] |
0.0 / 2.0 | mobile |
| Sort by Date (Orders Table) | FAIL |
Element 'table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date']' NOT found.
Selector:
table[data-testid='orders-table'] th [data-testid='sort-orders-by-Date'] |
0.0 / 1.0 | mobile |
| Sidebar Toggle Functionality | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Collapse Sidebar ---", " [FAIL] Trigger config missing." ] |
0.0 / 4.0 | mobile |
| Sort Orders Table by Date | PASS |
(Points already awarded) All interaction steps/outcomes verified.
|
0.0 / 4.0 | mobile |
| Chart Has Accessible Name (title/aria-label) | FAIL |
Custom script evaluation result: None (expected true).
Script Eval: None
|
0.0 / 3.0 | mobile |