fix: address code review feedback - extract capitalizeFirst utility, fix aria attrs, clean up

- Extract shared capitalizeFirst() utility to utils.ts, use in RecentApps/StarredApps
- Remove redundant aria-label on select-all Checkbox (already has associated label)
- Add id to per-item Checkbox in AppManagementPage
- Fix aria-required expression to use ternary instead of falsy OR
- Remove redundant className="text-xs" from Badge in AppCard
- Remove conflicting readOnly attr from disabled role input in ProfilePage

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>

Author: Copilot

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/MetadataFormDialog.tsx

@@ -149,7 +149,7 @@ export function MetadataFormDialog({
                       handleChange(field.key, e.target.value)
                     }
                     disabled={disabled}
-                    aria-required={field.required || undefined}
+                    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}`}
                   >

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

@@ -90,7 +90,7 @@ export function AppCard({ app, onClick, isFavorite }: AppCardProps) {
         {/* App Badge (if default) */}
         {app.isDefault && (
           <div className="mt-3">
-            <Badge variant="secondary" className="text-xs">
+            <Badge variant="secondary">
               {t('home.appCard.default', { defaultValue: 'Default' })}
             </Badge>
           </div>

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 {
@@ -56,7 +57,7 @@ export function RecentApps({ items }: RecentAppsProps) {
                   </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">{item.type.charAt(0).toUpperCase() + item.type.slice(1)}</p>
+                    <p className="text-xs text-muted-foreground">{capitalizeFirst(item.type)}</p>
                   </div>
                 </div>
               </CardContent>

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

@@ -11,6 +11,7 @@ import { useObjectTranslation } from '@object-ui/i18n';
 import { Card, CardContent } from '@object-ui/components';
 import { Star } from 'lucide-react';
 import { getIcon } from '../../utils/getIcon';
+import { capitalizeFirst } from '../../utils';
 import type { FavoriteItem } from '../../hooks/useFavorites';
 
 interface StarredAppsProps {
@@ -56,7 +57,7 @@ export function StarredApps({ items }: StarredAppsProps) {
                   </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">{item.type.charAt(0).toUpperCase() + item.type.slice(1)}</p>
+                    <p className="text-xs text-muted-foreground">{capitalizeFirst(item.type)}</p>
                   </div>
                 </div>
               </CardContent>

apps/console/src/pages/system/AppManagementPage.tsx

@@ -177,7 +177,6 @@ export function AppManagementPage() {
             id="select-all-apps"
             checked={selectedIds.size === filteredApps.length && filteredApps.length > 0}
             onCheckedChange={() => toggleSelectAll()}
-            aria-label="Select all apps"
           />
           <label htmlFor="select-all-apps" className="cursor-pointer">Select all ({filteredApps.length})</label>
         </div>
@@ -200,6 +199,7 @@ export function AppManagementPage() {
               <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">
                   <Checkbox
+                    id={`select-app-${app.name}`}
                     checked={selectedIds.has(app.name)}
                     onCheckedChange={() => toggleSelect(app.name)}
                     aria-label={`Select ${app.label || app.name}`}

apps/console/src/pages/system/ProfilePage.tsx

@@ -129,7 +129,6 @@ export function ProfilePage() {
                 type="text"
                 value={user.role ?? 'member'}
                 disabled
-                readOnly
                 className="bg-muted text-muted-foreground"
               />
             </div>

apps/console/src/utils.ts

@@ -21,6 +21,15 @@ export function resolveI18nLabel(
   return label.defaultValue || label.key;
 }
 
+/**
+ * Capitalize the first letter of a string.
+ * Preferred over CSS `capitalize` for i18n compatibility.
+ */
+export function capitalizeFirst(str: string): string {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 /**
  * Format a record title using the titleFormat pattern
  * @param titleFormat Pattern like "{name} - {email}" or "{firstName} {lastName}"