Merge pull request #1216 from objectstack-ai/copilot/scan-and-optimize-console

Author: hotlong

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Improved
+
+- **Console UI design optimization sweep** (`@object-ui/console`): Comprehensive accessibility and design consistency improvements across all major console interfaces:
+  - **Accessibility (WCAG 2.1 AA)**: Added `aria-label`, `aria-pressed`, `aria-required`, `aria-live`, `role="status"`, `role="link"`, `role="toolbar"`, `role="img"` attributes across HomePage, SystemHubPage, MetadataManagerPage, MetadataDetailPage, AppManagementPage, ProfilePage, SearchResultsPage, AuthPageLayout, and DashboardView. Added keyboard navigation (Enter/Space) to all clickable Card components. Added `<title>` element to SVG logo. Added screen-reader-only `<label>` elements for search inputs.
+  - **Design tokens**: Replaced hardcoded `bg-blue-50`/`text-blue-700` badge in AppCard with Shadcn `<Badge variant="secondary">` for consistent theming.
+  - **Shadcn component alignment**: Replaced raw `<input type="checkbox">` elements in AppManagementPage with Shadcn `<Checkbox>` component for consistent styling and accessibility.
+  - **Spacing consistency**: Standardized responsive padding (`px-4 sm:px-6`) on HomePage, unified grid columns across RecentApps/StarredApps (4 columns at xl), standardized `gap-4` in MetadataManagerPage grid, graduated padding (`p-2 sm:p-4 md:p-6`) in DashboardView.
+  - **Focus management**: Added `focus-visible:opacity-100` on AppCard favorite button so keyboard users can discover it, added focus rings to search result card links, added `focus-visible:ring-2` to DashboardView widget toolbar buttons and MetadataFormDialog native select.
+  - **i18n compatibility**: Replaced CSS `capitalize` with programmatic string casing in RecentApps/StarredApps type labels.
+
 ### Fixed
 
 - **Home page star/favorite not reactive** (`@object-ui/console`): Migrated `useFavorites` from standalone hook to React Context (`FavoritesProvider`) so all consumers (HomePage, AppCard, AppSidebar, UnifiedSidebar) share a single state instance. Previously, each component calling `useFavorites()` created independent state, so toggling a favorite in AppCard did not trigger re-render in HomePage. localStorage persistence is retained as the storage layer.

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>

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}

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 ? true : 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>

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">

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] || ''}`}>

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">
               {t('home.appCard.default', { defaultValue: 'Default' })}
-            </span>
+            </Badge>
           </div>
         )}
       </CardContent>

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 />
 

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">

apps/console/src/pages/home/RecentApps.tsx

@@ -11,6 +11,7 @@ import { useObjectTranslation } from '@object-ui/i18n';
 import { Card, CardContent } from '@object-ui/components';
 import { Clock } from 'lucide-react';
 import { getIcon } from '../../utils/getIcon';
+import { capitalizeFirst } from '../../utils';
 import type { RecentItem } from '../../hooks/useRecentItems';
 
 interface RecentAppsProps {
@@ -31,7 +32,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 +41,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">{capitalizeFirst(item.type)}</p>
                   </div>
                 </div>
               </CardContent>