From 8bb393d5cd357d86ff40e36c654798cccb777950 Mon Sep 17 00:00:00 2001
From: wmagev <74554762+wmagev@users.noreply.github.com>
Date: Sat, 18 Apr 2026 21:05:00 +0900
Subject: [PATCH] a11y+viewport: aria-labels on icon-only buttons; 100dvh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A11y:
- Add aria-label to the 4 icon-only interactive controls
  (docs link, theme toggle, orderbook info, event-feed scroll-to-top)
  so screen readers announce a name instead of 'button'. Tooltips do
  not expose an accessible name on focus.

Viewport:
- Replace 100vh with 100dvh in AppLayout, DashboardPage, SwapDetailPage,
  NotFoundPage so mobile browser address-bar chrome doesn't clip the
  bottom of full-height pages. Done globally, not just in AppLayout.

Extracted from upstream PR #15 — the uncontroversial a11y + viewport
slice, without the bundled error-boundary / retry / SSE-reconnect /
memoization changes.
---
 src/components/dashboard/EventFeed.tsx      | 1 +
 src/components/dashboard/OrderbookDepth.tsx | 6 +++++-
 src/components/layout/AppLayout.tsx         | 4 ++--
 src/pages/DashboardPage.tsx                 | 4 +++-
 src/pages/NotFoundPage.tsx                  | 2 +-
 src/pages/SwapDetailPage.tsx                | 2 +-
 6 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/dashboard/EventFeed.tsx b/src/components/dashboard/EventFeed.tsx
index 72d10b8..300b25d 100644
--- a/src/components/dashboard/EventFeed.tsx
+++ b/src/components/dashboard/EventFeed.tsx
@@ -198,6 +198,7 @@ const EventFeed: React.FC = () => {
       {scrolled && (
         <Button
           onClick={scrollToTop}
+          aria-label="Scroll to top"
           size="small"
           sx={{
             position: 'absolute',
diff --git a/src/components/dashboard/OrderbookDepth.tsx b/src/components/dashboard/OrderbookDepth.tsx
index 7c5ba9d..9a0b4f1 100644
--- a/src/components/dashboard/OrderbookDepth.tsx
+++ b/src/components/dashboard/OrderbookDepth.tsx
@@ -243,7 +243,11 @@ const OrderbookDepth: React.FC = () => {
             arrow
             placement="right"
           >
-            <IconButton size="small" sx={{ p: 0, color: 'text.secondary' }}>
+            <IconButton
+              aria-label="Orderbook info"
+              size="small"
+              sx={{ p: 0, color: 'text.secondary' }}
+            >
               <InfoOutlinedIcon fontSize="small" />
             </IconButton>
           </Tooltip>
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 91d912d..ff3cc82 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -12,8 +12,8 @@ const AppLayout: React.FC = () => {
     <Stack
       sx={{
         width: '100vw',
-        minHeight: '100vh',
-        height: '100vh',
+        minHeight: '100dvh',
+        height: '100dvh',
         overflow: 'hidden',
         justifyContent: 'center',
       }}
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index 181633b..0da28ff 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -33,7 +33,7 @@ const DashboardPage: React.FC = () => {
       />
       <Stack
         sx={{
-          minHeight: '100vh',
+          minHeight: '100dvh',
           backgroundColor: 'background.default',
           px: { xs: 1.5, sm: 2, md: 4 },
           py: { xs: 2, sm: 3, md: 4 },
@@ -70,6 +70,7 @@ const DashboardPage: React.FC = () => {
               href={docsUrl}
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="Documentation"
               sx={{
                 color: 'text.secondary',
                 border: '1px solid',
@@ -88,6 +89,7 @@ const DashboardPage: React.FC = () => {
           </Tooltip>
           <IconButton
             onClick={toggleTheme}
+            aria-label={mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
             sx={{
               color: 'text.secondary',
               border: '1px solid',
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 19231d7..03a0197 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -6,7 +6,7 @@ const NotFoundPage: React.FC = () => (
   <Box
     sx={{
       width: '100vw',
-      height: '100vh',
+      height: '100dvh',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
diff --git a/src/pages/SwapDetailPage.tsx b/src/pages/SwapDetailPage.tsx
index 1c648d0..e3ddf34 100644
--- a/src/pages/SwapDetailPage.tsx
+++ b/src/pages/SwapDetailPage.tsx
@@ -384,7 +384,7 @@ const SwapDetailPage: React.FC = () => {
 const PageWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   <Stack
     sx={{
-      minHeight: '100vh',
+      minHeight: '100dvh',
       backgroundColor: 'background.default',
       px: { xs: 1.5, sm: 2, md: 4 },
       py: { xs: 2, sm: 3, md: 4 },