fix: optimize console interfaces - accessibility, spacing, and design consistency

Copilot · xuyushun441-sys · web-flow · commit a68ae6738093 · 2026-04-13T08:38:10.000Z
- HomePage: Standardize responsive padding (px-4 sm:px-6), responsive title sizing - AppCard: Add aria-label/aria-pressed for favorite button, focus-visible support, replace hardcoded badge with Shadcn Badge - QuickActions: Add keyboard navigation (Enter/Space), role="link", tabIndex - RecentApps/StarredApps: Unify grid to 4 columns at xl, replace CSS capitalize with proper casing, add keyboard nav - SystemHubPage: Add role="status" + aria-live to loading, aria-label to hub cards, keyboard navigation - MetadataManagerPage: Add accessible search label, aria-live on loading/saving states, standardize gap-4 - MetadataDetailPage: Add role="status" + aria-live to loading indicator - MetadataGrid: Add aria-label to table, add title tooltips for truncated text - MetadataFormDialog: Add aria-required to select, improve focus ring styling on native select - AppManagementPage: Replace raw checkbox with Shadcn Checkbox, add accessible search label, aria-labels on all action buttons - ProfilePage: Add aria-required to name field, add readOnly to role field - SearchResultsPage: Add search input label, focus ring on card links - AuthPageLayout: Add role="img", aria-label, and <title> to SVG logo - DashboardView: Add toolbar role and aria-labels, focus-visible on widget buttons, graduated padding Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/f23eebba-1576-4704-8d15-fa21129d9261 Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>
diff --git a/apps/console/src/components/AuthPageLayout.tsx b/apps/console/src/components/AuthPageLayout.tsx
@@ -22,7 +22,10 @@ export function AuthPageLayout({ children }: { children: React.ReactNode }) {
               strokeLinecap="round"
               strokeLinejoin="round"
               className="h-10 w-10"
+              role="img"
+              aria-label="ObjectStack logo"
             >
+              <title>ObjectStack</title>
               <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
             </svg>
             <span className="text-2xl font-bold">ObjectStack</span>
diff --git a/apps/console/src/components/DashboardView.tsx b/apps/console/src/components/DashboardView.tsx
@@ -391,15 +391,16 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
         <div className="shrink-0 flex items-center gap-1.5">
           {/* Add-widget toolbar — visible only in edit mode */}
           {configPanelOpen && (
-            <div className="flex items-center gap-1 mr-2" data-testid="dashboard-widget-toolbar">
+            <div className="flex items-center gap-1 mr-2" role="toolbar" aria-label="Add widgets" data-testid="dashboard-widget-toolbar">
               {WIDGET_TYPES.map(({ type, label, Icon }) => (
                 <button
                   key={type}
                   type="button"
                   data-testid={`dashboard-add-${type}`}
                   onClick={() => addWidget(type)}
-                  className="inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  className="inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   title={`Add ${label}`}
+                  aria-label={`Add ${label} widget`}
                 >
                   <Plus className="h-3 w-3" />
                   <Icon className="h-3 w-3" />
@@ -421,7 +422,7 @@ export function DashboardView({ dataSource }: { dataSource?: any }) {
 
       {/* ── Main area + Config Panel ─────────────────────────────── */}
       <div className="flex-1 overflow-hidden flex flex-col sm:flex-row relative">
-         <div className="flex-1 min-w-0 overflow-auto p-0 sm:p-6">
+         <div className="flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6">
             <DashboardRenderer
               schema={previewSchema}
               dataSource={dataSource}
diff --git a/apps/console/src/components/MetadataFormDialog.tsx b/apps/console/src/components/MetadataFormDialog.tsx
@@ -127,7 +127,7 @@ export function MetadataFormDialog({
               <div key={field.key} className="space-y-2">
                 <Label htmlFor={inputId}>
                   {field.label}
-                  {field.required && <span className="text-destructive ml-1">*</span>}
+                  {field.required && <span className="text-destructive ml-1" aria-hidden="true">*</span>}
                 </Label>
 
                 {field.type === 'textarea' ? (
@@ -149,7 +149,8 @@ export function MetadataFormDialog({
                       handleChange(field.key, e.target.value)
                     }
                     disabled={disabled}
-                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                    aria-required={field.required || undefined}
+                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                     data-testid={`metadata-field-${field.key}`}
                   >
                     <option value="">Select...</option>
diff --git a/apps/console/src/components/MetadataGrid.tsx b/apps/console/src/components/MetadataGrid.tsx
@@ -58,7 +58,7 @@ export function MetadataGrid({
   return (
     <div className="rounded-lg border bg-card" data-testid="metadata-grid">
       <div className="overflow-x-auto">
-        <table className="w-full text-sm">
+        <table className="w-full text-sm" aria-label={`${typeLabel} list`}>
           <thead>
             <tr className="border-b bg-muted/50">
               {columns.map((col) => (
@@ -87,11 +87,14 @@ export function MetadataGrid({
                   data-testid={`metadata-item-${name}`}
                   onClick={() => onItemClick?.(name)}
                 >
-                  {columns.map((col) => (
-                    <td key={col.key} className="px-4 py-3 truncate max-w-[200px]">
-                      {String(item[col.key] ?? '—')}
-                    </td>
-                  ))}
+                  {columns.map((col) => {
+                    const cellValue = String(item[col.key] ?? '—');
+                    return (
+                      <td key={col.key} className="px-4 py-3 truncate max-w-[200px]" title={cellValue}>
+                        {cellValue}
+                      </td>
+                    );
+                  })}
                   {editable && (
                     <td className="px-4 py-3 text-right">
                       <div className="flex items-center justify-end gap-1">
diff --git a/apps/console/src/components/SearchResultsPage.tsx b/apps/console/src/components/SearchResultsPage.tsx
@@ -137,8 +137,10 @@ export function SearchResultsPage() {
 
       {/* Search input */}
       <div className="relative">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <label htmlFor="search-results-input" className="sr-only">Search objects, dashboards, pages, reports</label>
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" aria-hidden="true" />
         <Input
+          id="search-results-input"
           value={query}
           onChange={(e: any) => handleSearch(e.target.value)}
           placeholder="Search objects, dashboards, pages, reports..."
@@ -180,7 +182,7 @@ export function SearchResultsPage() {
                   {items.map(item => {
                     const ItemIcon = TYPE_ICONS[item.type] || Database;
                     return (
-                    <Link key={item.id} to={item.href}>
+                    <Link key={item.id} to={item.href} className="rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
                       <Card className="hover:bg-accent/50 transition-colors cursor-pointer">
                         <CardContent className="flex items-center gap-3 p-3">
                           <div className={`flex h-8 w-8 items-center justify-center rounded ${TYPE_COLORS[item.type] || ''}`}>
diff --git a/apps/console/src/pages/home/AppCard.tsx b/apps/console/src/pages/home/AppCard.tsx
@@ -7,7 +7,7 @@
  */
 
 import { Star, StarOff } from 'lucide-react';
-import { Card, CardContent, Button } from '@object-ui/components';
+import { Card, CardContent, Button, Badge } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { resolveI18nLabel } from '../../utils';
 import { useFavorites } from '../../hooks/useFavorites';
@@ -50,8 +50,10 @@ export function AppCard({ app, onClick, isFavorite }: AppCardProps) {
         <Button
           variant="ghost"
           size="sm"
-          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
           onClick={handleToggleFavorite}
+          aria-label={isFavorite ? `Remove ${label} from favorites` : `Add ${label} to favorites`}
+          aria-pressed={isFavorite}
           data-testid={`favorite-btn-${app.name}`}
         >
           {isFavorite ? (
@@ -88,9 +90,9 @@ export function AppCard({ app, onClick, isFavorite }: AppCardProps) {
         {/* App Badge (if default) */}
         {app.isDefault && (
           <div className="mt-3">
-            <span className="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-300">
+            <Badge variant="secondary" className="text-xs">
               {t('home.appCard.default', { defaultValue: 'Default' })}
-            </span>
+            </Badge>
           </div>
         )}
       </CardContent>
diff --git a/apps/console/src/pages/home/HomePage.tsx b/apps/console/src/pages/home/HomePage.tsx
@@ -90,17 +90,17 @@ export function HomePage() {
   return (
     <div className="bg-background">
       {/* Page Title */}
-      <div className="px-6 pt-6 pb-4">
-        <h1 className="text-3xl font-bold tracking-tight">
+      <div className="px-4 sm:px-6 pt-6 pb-4">
+        <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">
           {t('home.title', { defaultValue: 'Home' })}
         </h1>
-        <p className="text-muted-foreground mt-1">
+        <p className="text-sm text-muted-foreground mt-1">
           {t('home.subtitle', { defaultValue: 'Your workspace dashboard' })}
         </p>
       </div>
 
       {/* Main Content */}
-      <div className="px-6 py-4 space-y-8">
+      <div className="px-4 sm:px-6 py-4 space-y-8">
         {/* Quick Actions */}
         <QuickActions />
 
diff --git a/apps/console/src/pages/home/QuickActions.tsx b/apps/console/src/pages/home/QuickActions.tsx
@@ -67,6 +67,15 @@ export function QuickActions() {
               className="cursor-pointer hover:shadow-md transition-shadow"
               onClick={() => navigate(action.href)}
               data-testid={`quick-action-${action.id}`}
+              role="link"
+              tabIndex={0}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  navigate(action.href);
+                }
+              }}
+              aria-label={action.label}
             >
               <CardContent className="p-6">
                 <div className="flex items-start gap-4">
diff --git a/apps/console/src/pages/home/RecentApps.tsx b/apps/console/src/pages/home/RecentApps.tsx
@@ -31,7 +31,7 @@ export function RecentApps({ items }: RecentAppsProps) {
           {t('home.recentApps.title', { defaultValue: 'Recently Accessed' })}
         </h2>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {items.map((item) => {
           const Icon = getIcon(item.type);
           return (
@@ -40,15 +40,23 @@ export function RecentApps({ items }: RecentAppsProps) {
               className="cursor-pointer hover:shadow-md transition-shadow"
               onClick={() => navigate(item.href)}
               data-testid={`recent-item-${item.id}`}
+              role="link"
+              tabIndex={0}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  navigate(item.href);
+                }
+              }}
             >
               <CardContent className="p-4">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 rounded-lg bg-muted">
+                  <div className="p-2 rounded-lg bg-muted shrink-0">
                     <Icon className="h-5 w-5" />
                   </div>
                   <div className="flex-1 min-w-0">
                     <h3 className="font-medium text-sm truncate">{item.label}</h3>
-                    <p className="text-xs text-muted-foreground capitalize">{item.type}</p>
+                    <p className="text-xs text-muted-foreground">{item.type.charAt(0).toUpperCase() + item.type.slice(1)}</p>
                   </div>
                 </div>
               </CardContent>
diff --git a/apps/console/src/pages/home/StarredApps.tsx b/apps/console/src/pages/home/StarredApps.tsx
@@ -31,7 +31,7 @@ export function StarredApps({ items }: StarredAppsProps) {
           {t('home.starredApps.title', { defaultValue: 'Starred' })}
         </h2>
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         {items.map((item) => {
           const Icon = getIcon(item.type);
           return (
@@ -40,15 +40,23 @@ export function StarredApps({ items }: StarredAppsProps) {
               className="cursor-pointer hover:shadow-md transition-shadow"
               onClick={() => navigate(item.href)}
               data-testid={`starred-item-${item.id}`}
+              role="link"
+              tabIndex={0}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  navigate(item.href);
+                }
+              }}
             >
               <CardContent className="p-4">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 rounded-lg bg-muted">
+                  <div className="p-2 rounded-lg bg-muted shrink-0">
                     <Icon className="h-5 w-5" />
                   </div>
                   <div className="flex-1 min-w-0">
                     <h3 className="font-medium text-sm truncate">{item.label}</h3>
-                    <p className="text-xs text-muted-foreground capitalize">{item.type}</p>
+                    <p className="text-xs text-muted-foreground">{item.type.charAt(0).toUpperCase() + item.type.slice(1)}</p>
                   </div>
                 </div>
               </CardContent>
diff --git a/apps/console/src/pages/system/AppManagementPage.tsx b/apps/console/src/pages/system/AppManagementPage.tsx
@@ -13,6 +13,7 @@ import {
   CardContent,
   Badge,
   Input,
+  Checkbox,
 } from '@object-ui/components';
 import {
   Plus,
@@ -145,8 +146,10 @@ export function AppManagementPage() {
       {/* Search & Bulk Actions */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2">
         <div className="relative flex-1 max-w-sm">
-          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <label htmlFor="app-search" className="sr-only">Search apps</label>
+          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
           <Input
+            id="app-search"
             placeholder="Search apps..."
             value={searchQuery}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
@@ -170,14 +173,13 @@ export function AppManagementPage() {
       {/* Select All */}
       {filteredApps.length > 0 && (
         <div className="flex items-center gap-2 text-sm text-muted-foreground">
-          <input
-            type="checkbox"
+          <Checkbox
+            id="select-all-apps"
             checked={selectedIds.size === filteredApps.length && filteredApps.length > 0}
-            onChange={toggleSelectAll}
-            className="rounded border-input"
+            onCheckedChange={() => toggleSelectAll()}
             aria-label="Select all apps"
           />
-          <span>Select all ({filteredApps.length})</span>
+          <label htmlFor="select-all-apps" className="cursor-pointer">Select all ({filteredApps.length})</label>
         </div>
       )}
 
@@ -197,12 +199,11 @@ export function AppManagementPage() {
             return (
               <Card key={app.name} className={!isActive ? 'opacity-60' : ''} data-testid={`app-card-${app.name}`}>
                 <CardContent className="flex items-center gap-3 py-3 px-4">
-                  <input
-                    type="checkbox"
+                  <Checkbox
                     checked={selectedIds.has(app.name)}
-                    onChange={() => toggleSelect(app.name)}
-                    className="rounded border-input shrink-0"
+                    onCheckedChange={() => toggleSelect(app.name)}
                     aria-label={`Select ${app.label || app.name}`}
+                    className="shrink-0"
                   />
                   <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                     <LayoutGrid className="h-4 w-4" />
@@ -224,6 +225,7 @@ export function AppManagementPage() {
                       variant="ghost"
                       size="icon"
                       title="Open app"
+                      aria-label={`Open ${app.label || app.name}`}
                       onClick={() => navigate(`/apps/${app.name}`)}
                     >
                       <ExternalLink className="h-4 w-4" />
@@ -232,6 +234,7 @@ export function AppManagementPage() {
                       variant="ghost"
                       size="icon"
                       title="Edit app"
+                      aria-label={`Edit ${app.label || app.name}`}
                       onClick={() => navigate(`${basePath}/edit-app/${app.name}`)}
                     >
                       <Pencil className="h-4 w-4" />
@@ -240,6 +243,7 @@ export function AppManagementPage() {
                       variant="ghost"
                       size="icon"
                       title={isActive ? 'Disable app' : 'Enable app'}
+                      aria-label={isActive ? `Disable ${app.label || app.name}` : `Enable ${app.label || app.name}`}
                       onClick={() => handleToggleActive(app)}
                       disabled={processing}
                     >
@@ -249,6 +253,7 @@ export function AppManagementPage() {
                       variant="ghost"
                       size="icon"
                       title="Set as default"
+                      aria-label={`Set ${app.label || app.name} as default`}
                       onClick={() => handleSetDefault(app)}
                       disabled={processing || isDefault}
                     >
@@ -258,6 +263,7 @@ export function AppManagementPage() {
                       variant="ghost"
                       size="icon"
                       title={isDeleting ? 'Click again to confirm delete' : 'Delete app'}
+                      aria-label={isDeleting ? `Confirm delete ${app.label || app.name}` : `Delete ${app.label || app.name}`}
                       onClick={() => handleDelete(app)}
                       disabled={processing}
                       className={isDeleting ? 'text-destructive' : ''}
diff --git a/apps/console/src/pages/system/MetadataDetailPage.tsx b/apps/console/src/pages/system/MetadataDetailPage.tsx
@@ -289,8 +289,8 @@ export function MetadataDetailPage() {
 
       {/* Loading */}
       {loading && (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground" data-testid="detail-loading">
-          <Loader2 className="h-4 w-4 animate-spin" />
+        <div className="flex items-center gap-2 text-sm text-muted-foreground" role="status" aria-live="polite" data-testid="detail-loading">
+          <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
           Loading...
         </div>
       )}
diff --git a/apps/console/src/pages/system/MetadataManagerPage.tsx b/apps/console/src/pages/system/MetadataManagerPage.tsx
diff --git a/apps/console/src/pages/system/ProfilePage.tsx b/apps/console/src/pages/system/ProfilePage.tsx
diff --git a/apps/console/src/pages/system/SystemHubPage.tsx b/apps/console/src/pages/system/SystemHubPage.tsx
