feat: CSS showcase updates, Cupertino layout fixes, and Apache-2.0 licensing

cli/package.json

@@ -24,7 +24,7 @@
   },
   "keywords": [],
   "author": "",
-  "license": "MIT",
+  "license": "Apache-2.0",
   "type": "commonjs",
   "devDependencies": {
     "@types/inquirer": "^8.2.11",

packages/react-core-ui/package.json

@@ -13,7 +13,7 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "type": "commonjs",
   "peerDependencies": {
     "react": ">=16.8.0",

packages/vue-core-ui/package.json

@@ -9,7 +9,7 @@
   ],
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "peerDependencies": {
     "vue": "^3.0.0"
   },

packages/vue-cupertino-ui/package.json

@@ -9,7 +9,7 @@
     ],
     "keywords": [],
     "author": "",
-    "license": "ISC",
+    "license": "Apache-2.0",
     "peerDependencies": {
       "vue": "^3.0.0"
     },

packages/webf-deeplink/package.json

@@ -22,7 +22,7 @@
     "native"
   ],
   "author": "OpenWebF Team",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "homepage": "https://openwebf.com",
   "dependencies": {
     "@openwebf/webf-enterprise-typings": "^0.22.1"

packages/webf-share/package.json

@@ -23,7 +23,7 @@
     "native"
   ],
   "author": "OpenWebF Team",
-  "license": "ISC",
+  "license": "Apache-2.0",
   "homepage": "https://openwebf.com",
   "dependencies": {
     "@openwebf/webf-enterprise-typings": "^0.22.1"

use_cases/src/App.tsx

@@ -8,6 +8,7 @@ import { CookiesPage } from './pages/CookiesPage';
 import { UrlEncodingPage } from './pages/UrlEncodingPage';
 import { WebSocketPage } from './pages/WebSocketPage';
 import { SvgImagePage } from './pages/SvgImagePage';
+import { AccessibilityPage } from './pages/AccessibilityPage';
 // cleaned: remove unused demo imports
 import {ImagePage} from './pages/ImagePage';
 import {AnimationPage} from './pages/AnimationPage';
@@ -123,6 +124,7 @@ function App() {
         <Route path="/url-encoding" title="URL & Encoding" element={<UrlEncodingPage/>}/>
         <Route path="/websocket" title="WebSocket" element={<WebSocketPage/>}/>
         <Route path="/svg-image" title="SVG via Img" element={<SvgImagePage/>}/>
+        <Route path="/accessibility" title="Accessibility Use Cases" element={<AccessibilityPage />} />
 
         <Route path="/dom/events" title="DOM Events" element={<DOMEventsPage />} />
         <Route path="/dom/geometry" title="DOM Geometry" element={<DOMGeometryPage />} />

use_cases/src/pages/AccessibilityPage.tsx

@@ -141,15 +141,22 @@ export const AccessibilityPage: React.FC = () => {
         Skip to main content
       </a>
       <header className={styles.introHeader} role="banner">
-        <h1 className={styles.pageTitle}>Accessibility Use Cases</h1>
+        <h1 id="accessibility-page-title" className={styles.pageTitle}>
+          Accessibility Use Cases
+        </h1>
         <p className={styles.pageSubtitle}>
           Explore practical accessibility patterns: meaningful landmarks, keyboard interactions, live announcements, and
           inclusive forms that work for everyone.
         </p>
       </header>
 
       <WebFListView className={styles.list}>
-        <main id="accessibilityMainContent" className={styles.componentSection} role="main">
+        <main
+          id="accessibilityMainContent"
+          className={styles.componentSection}
+          role="main"
+          aria-labelledby="accessibility-page-title"
+        >
           <div className={styles.componentBlock}>
             <section className={styles.componentItem} aria-labelledby="landmark-demo-title">
               <h2 id="landmark-demo-title" className={styles.itemLabel}>
@@ -361,7 +368,13 @@ export const AccessibilityPage: React.FC = () => {
               </div>
             </section>
           </div>
-          <div className={styles.liveRegion} role="status" aria-live="polite" aria-atomic="true">
+          <div
+            className={styles.liveRegion}
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+            aria-label="Accessibility announcements"
+          >
             {announcement}
           </div>
         </main>