Merge pull request #192 from anantham/claude/mobile-a11y

Accessibility on phones and iPads: contrast, touch targets, settings layout, screen-reader labels

Author: anantham

components/InputBar.tsx

@@ -158,10 +158,10 @@ const InputBar: React.FC = () => {
   const isAnyLoading = isLoading || isImporting;
 
   const tabClass = (active: boolean) =>
-    `px-4 py-2 text-sm font-medium rounded-t-lg transition ${
+    `px-4 py-2 pointer-coarse:min-h-11 text-sm font-medium rounded-t-lg transition ${
       active
         ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-b-2 border-blue-500'
-        : 'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200'
+        : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white'
     }`;
 
   return (
@@ -170,6 +170,7 @@ const InputBar: React.FC = () => {
       <div className="flex border-b border-gray-200 dark:border-gray-700 px-4 pt-3 gap-1">
         <button
           type="button"
+          aria-pressed={mode === 'url'}
           className={tabClass(mode === 'url')}
           onClick={() => setMode('url')}
           disabled={isAnyLoading}
@@ -178,6 +179,7 @@ const InputBar: React.FC = () => {
         </button>
         <button
           type="button"
+          aria-pressed={mode === 'paste'}
           className={tabClass(mode === 'paste')}
           onClick={() => setMode('paste')}
           disabled={isAnyLoading}
@@ -214,15 +216,15 @@ const InputBar: React.FC = () => {
                     type="button"
                     onClick={() => fileInputRef.current?.click()}
                     disabled={isAnyLoading}
-                    className="px-4 py-2 bg-gray-600 text-white font-semibold rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-800 disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
+                    className="px-4 py-2 pointer-coarse:min-h-11 bg-gray-600 text-white font-semibold rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-800 disabled:bg-gray-400 dark:disabled:bg-gray-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
                     title="Import session from a JSON file on your computer"
                   >
                     📁 Import
                   </button>
                   <button
                     type="submit"
                     disabled={isAnyLoading || !url.trim()}
-                    className="px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
+                    className="px-4 py-2 pointer-coarse:min-h-11 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
                     title={url.trim() ? 'Fetch chapter or session from URL' : 'Enter a URL first'}
                   >
                     {isImporting ? 'Importing...' : isLoading ? 'Fetching...' : '🔗 Fetch'}
@@ -277,7 +279,7 @@ const InputBar: React.FC = () => {
                         href={site.homeUrl}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-blue-500 hover:underline"
+                        className="text-blue-700 dark:text-blue-400 underline underline-offset-2"
                         title={`Visit ${site.name} - ${category}`}
                         onClick={(e) => {
                           e.preventDefault();
@@ -290,7 +292,7 @@ const InputBar: React.FC = () => {
                     </React.Fragment>
                   ))}
                   {' '}
-                  <span className="text-gray-500">({category})</span>
+                  <span className="text-gray-600 dark:text-gray-400">({category})</span>
                   {categoryIndex < categories.length - 1 && '; '}
                 </React.Fragment>
               ))}
@@ -299,7 +301,7 @@ const InputBar: React.FC = () => {
                 href="https://t.me/webnovels"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-500 hover:underline"
+                className="text-blue-700 dark:text-blue-400 underline underline-offset-2"
               >
                 request for us to add support for your fav website here!
               </a>
@@ -370,7 +372,7 @@ const InputBar: React.FC = () => {
                 type="button"
                 onClick={handlePasteSubmit}
                 disabled={isAnyLoading || !pasteContent.trim()}
-                className="px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
+                className="px-4 py-2 pointer-coarse:min-h-11 bg-blue-600 text-white font-semibold rounded-md shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition duration-300 ease-in-out"
               >
                 {isLoading ? 'Importing...' : 'Import Text'}
               </button>

components/SessionInfo.tsx

@@ -254,7 +254,7 @@ const SessionInfo: React.FC = () => {
   };
 
   return (
-    <div className="w-full max-w-4xl mx-auto -mt-2 mb-6 p-3 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-b-xl shadow-lg flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-t border-gray-200 dark:border-gray-700">
+    <div className="w-full max-w-4xl mx-auto -mt-2 mb-6 p-3 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm rounded-b-xl shadow-lg flex flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 border-t border-gray-200 dark:border-gray-700">
       <div className="flex-grow w-full sm:w-auto flex flex-col gap-2 min-w-0">
         {/* Chapter dropdown row */}
         <div className="flex items-center gap-2">
@@ -303,7 +303,7 @@ const SessionInfo: React.FC = () => {
             <button
               onClick={() => setShowExportModal(true)}
               disabled={sessionIsEmpty || isExporting}
-              className="px-3 py-1.5 bg-green-600 text-white text-sm font-semibold rounded-md shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-800 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition duration-300 ease-in-out"
+              className="px-3 py-1.5 pointer-coarse:min-h-11 bg-green-700 text-white text-sm font-semibold rounded-md shadow-sm hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-800 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition duration-300 ease-in-out"
             >
               {isExporting ? 'Exporting...' : 'Export Book'}
             </button>
@@ -312,11 +312,12 @@ const SessionInfo: React.FC = () => {
       </div>
 
       {/* Settings button */}
-      <div className="flex items-center gap-2 flex-shrink-0 w-full sm:w-auto justify-center sm:justify-end">
+      <div className="flex items-center gap-2 flex-shrink-0">
         <button
           onClick={() => setShowSettingsModal(true)}
-          className="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"
+          className="p-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 inline-flex items-center justify-center bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-sm hover:bg-gray-300 dark:hover:bg-gray-600 transition"
           title="Settings"
+          aria-label="Settings"
         >
           <SettingsIcon className="w-5 h-5" />
         </button>

components/SettingsModal.tsx

@@ -18,6 +18,7 @@ import { SettingsModalProvider, ParameterSupportState } from './settings/Setting
 import DisplayPanel from './settings/DisplayPanel';
 import SessionActions from './settings/SessionActions';
 import { useNovelMetadata } from '../hooks/useNovelMetadata';
+import { useModalDialog } from '../hooks/useModalDialog';
 
 
 interface SettingsModalProps {
@@ -169,6 +170,9 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
     onClose();
   };
 
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useModalDialog(dialogRef, isOpen, onClose);
+
   if (!isOpen) return null;
 
   const handleCancel = () => {
@@ -184,9 +188,17 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-2 sm:p-4" onClick={handleCancel}>
-      <div className="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-2xl w-full max-w-md sm:max-w-2xl lg:max-w-3xl max-h-[95vh] sm:max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="settings-modal-title"
+        tabIndex={-1}
+        className="bg-white dark:bg-gray-800 rounded-xl sm:rounded-2xl shadow-2xl w-full max-w-md sm:max-w-2xl lg:max-w-3xl max-h-[95dvh] sm:max-h-[90dvh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
         <header className="px-6 sm:px-8 py-4 border-b border-gray-200 dark:border-gray-700">
-          <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">
+          <h2 id="settings-modal-title" className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100">
             Settings
           </h2>
           <p className="text-gray-600 dark:text-gray-400 mt-1">
@@ -195,7 +207,7 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose }) => {
         </header>
 
         <SettingsModalProvider value={modalContextValue}>
-          <div className="flex flex-1 overflow-hidden">
+          <div className="flex flex-col sm:flex-row flex-1 min-h-0 overflow-hidden">
             <SettingsSidebar
               sections={sidebarSections}
               activeItem={activePanel}

components/chapter/ChapterHeader.tsx

@@ -27,15 +27,15 @@ interface ChapterHeaderProps {
 const languageButtonClasses = (
   isActive: boolean
 ) =>
-  `px-4 py-1 text-sm font-semibold rounded-full transition-colors ${
-    isActive ? 'bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow' : 'text-gray-600 dark:text-gray-400'
+  `px-4 py-1 pointer-coarse:min-h-11 text-sm font-semibold rounded-full transition-colors ${
+    isActive ? 'bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow' : 'text-gray-700 dark:text-gray-300'
   }`;
 
 const mobileLanguageButtonClasses = (
   isActive: boolean
 ) =>
-  `px-3 py-1 text-xs font-semibold rounded-full transition-colors ${
-    isActive ? 'bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow' : 'text-gray-600 dark:text-gray-400'
+  `px-3 py-1 pointer-coarse:min-h-11 text-xs font-semibold rounded-full transition-colors ${
+    isActive ? 'bg-white dark:bg-gray-900 text-gray-800 dark:text-white shadow' : 'text-gray-700 dark:text-gray-300'
   }`;
 
 const ChapterHeader: React.FC<ChapterHeaderProps> = ({
@@ -104,7 +104,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
         <button
           onClick={onNavigatePrev}
           disabled={prevDisabled}
-          className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition"
+          className="px-5 py-2 pointer-coarse:min-h-11 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition"
         >
           &larr; Previous
         </button>
@@ -113,7 +113,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
           {onOpenLibrary && (
             <button
               onClick={onOpenLibrary}
-              className="p-2 bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
+              className="p-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 inline-flex items-center justify-center bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
               title="Return to the novel library"
               aria-label="Return to library (home)"
             >
@@ -127,7 +127,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
               href={sourceUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-blue-500 hover:underline font-semibold text-sm"
+              className="text-blue-700 dark:text-blue-400 hover:underline font-semibold text-sm inline-flex items-center min-h-11 px-1"
               title="View original source"
             >
               Source
@@ -137,7 +137,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
             <a
               href={suttaStudioUrl}
               onClick={makeSpaClickHandler(suttaStudioUrl)}
-              className="w-9 h-9 rounded-full flex items-center justify-center border border-emerald-500/40 text-emerald-500 hover:bg-emerald-500/10 transition"
+              className="w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 rounded-full flex items-center justify-center border border-emerald-500/40 text-emerald-500 hover:bg-emerald-500/10 transition"
               title="Open Sutta Studio"
               aria-label="Open Sutta Studio"
             >
@@ -154,7 +154,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
             <button
               onClick={onRetranslateClick}
               disabled={retranslateDisabled}
-              className={`p-2 rounded-full border transition-all duration-200 ${
+              className={`p-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 inline-flex items-center justify-center rounded-full border transition-all duration-200 ${
                 isRetranslationActive
                   ? 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40'
                   : retranslateDisabled
@@ -172,7 +172,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
           <button
             onClick={onNavigateNext}
             disabled={nextDisabled}
-            className="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition"
+            className="px-5 py-2 pointer-coarse:min-h-11 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition"
           >
             Next &rarr;
           </button>
@@ -184,7 +184,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
           {onOpenLibrary && (
             <button
               onClick={onOpenLibrary}
-              className="p-2 bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
+              className="p-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 inline-flex items-center justify-center bg-amber-100 dark:bg-amber-900/30 text-amber-900 dark:text-amber-100 rounded-md hover:bg-amber-200 dark:hover:bg-amber-900/50 transition"
               title="Return to the novel library"
               aria-label="Return to library (home)"
             >
@@ -196,14 +196,14 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
           <button
             onClick={onNavigatePrev}
             disabled={prevDisabled}
-            className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition text-sm"
+            className="px-4 py-2 pointer-coarse:min-h-11 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition text-sm"
           >
             &larr; Prev
           </button>
           <button
             onClick={onNavigateNext}
             disabled={nextDisabled}
-            className="px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition text-sm"
+            className="px-4 py-2 pointer-coarse:min-h-11 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition text-sm"
           >
             Next &rarr;
           </button>
@@ -215,7 +215,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
                 <a
                   href={suttaStudioUrl}
                   onClick={makeSpaClickHandler(suttaStudioUrl)}
-                  className="w-8 h-8 rounded-full flex items-center justify-center border border-emerald-500/40 text-emerald-500 hover:bg-emerald-500/10 transition"
+                  className="w-8 h-8 pointer-coarse:w-11 pointer-coarse:h-11 rounded-full flex items-center justify-center border border-emerald-500/40 text-emerald-500 hover:bg-emerald-500/10 transition"
                   title="Open Sutta Studio"
                   aria-label="Open Sutta Studio"
                 >
@@ -231,7 +231,7 @@ const ChapterHeader: React.FC<ChapterHeaderProps> = ({
                 <button
                   onClick={onRetranslateClick}
                   disabled={retranslateDisabled}
-                  className={`p-2 rounded-full border transition-all duration-200 ${
+                  className={`p-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 inline-flex items-center justify-center rounded-full border transition-all duration-200 ${
                     isRetranslationActive
                       ? 'text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-700 hover:bg-red-100 dark:hover:bg-red-900/40'
                       : retranslateDisabled

components/chapter/FooterNavigation.tsx

@@ -19,14 +19,14 @@ const FooterNavigation: React.FC<FooterNavigationProps> = ({
     <button
       onClick={onNavigatePrev}
       disabled={!prevUrl || isLoading}
-      className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition"
+      className="px-5 py-2 pointer-coarse:min-h-11 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition"
     >
       &larr; Previous
     </button>
     <button
       onClick={onNavigateNext}
       disabled={!nextUrl || isLoading}
-      className="px-5 py-2 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition"
+      className="px-5 py-2 pointer-coarse:min-h-11 bg-blue-600 text-white font-semibold rounded-md hover:bg-blue-700 disabled:bg-blue-400 dark:disabled:bg-blue-800 disabled:cursor-not-allowed transition"
     >
       Next &rarr;
     </button>