From 6a65293339dd7b3d6f3292f9113af2ced41c7869 Mon Sep 17 00:00:00 2001 From: zendaya Date: Sun, 3 May 2026 02:08:52 +0200 Subject: [PATCH 1/2] feat: enhance web UI components for improved accessibility and layout - Updated AppShell to replace the skip link from an anchor to a button for better accessibility. - Changed heading levels in OverviewPage from h2 to h3 for improved semantic structure. - Enhanced SecurityStatusBar with updated class names for loading indicators. - Improved layout and spacing utilities across various pages, including RunsPage and DiffPage, to streamline user experience. - Added new CSS classes for consistent margin and alignment adjustments. This update aims to enhance the overall accessibility and usability of the FlightDeck web UI, ensuring a more intuitive experience for users. --- web/index.html | 4 + web/src/components/AppShell.tsx | 8 +- web/src/components/SecurityStatusBar.tsx | 4 +- web/src/index.css | 142 +++++++++++++++++++++++ web/src/pages/ActionsPage.tsx | 4 +- web/src/pages/DiffPage.tsx | 56 ++++----- web/src/pages/OverviewPage.tsx | 6 +- web/src/pages/RunsPage.tsx | 21 ++-- 8 files changed, 186 insertions(+), 59 deletions(-) diff --git a/web/index.html b/web/index.html index a2cac90..8051b30 100644 --- a/web/index.html +++ b/web/index.html @@ -3,6 +3,10 @@ + FlightDeck diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx index a136a5a..16416d6 100644 --- a/web/src/components/AppShell.tsx +++ b/web/src/components/AppShell.tsx @@ -1,4 +1,3 @@ -import type { MouseEvent } from "react"; import { NavLink, Outlet } from "react-router-dom"; import { TimelineRefreshProvider } from "../context/TimelineRefreshContext"; import { SecurityStatusBar } from "./SecurityStatusBar"; @@ -7,8 +6,7 @@ import { UI_READ_ONLY } from "../uiConfig"; const navCls = ({ isActive }: { isActive: boolean }) => `fd-nav__link${isActive ? " fd-nav__link--active" : ""}`; -function skipToMain(e: MouseEvent) { - e.preventDefault(); +function skipToMain() { document.getElementById("main-content")?.focus({ preventScroll: false }); } @@ -16,9 +14,9 @@ export function AppShell() { return (
- +