3.1   Text Cannot Be Resized — SC 1.4.4 (AA)  FAIL

File: index.html

The viewport meta tag contains maximum-scale=1.0 and user-scalable=no. These attributes prevent browser-level pinch-zoom, which means low-vision users who rely on text enlargement to read content cannot use the app at a comfortable size. WCAG 1.4.4 requires text to be resizable up to 200% without loss of content or functionality.

<meta name="viewport" content="width=device-width, initial-scale=1.0,
      maximum-scale=1.0, user-scalable=no" />   <!-- PROBLEM -->

Recommended fix:

• Remove maximum-scale=1.0 and user-scalable=no.
• Replace with: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
• If the goal was preventing double-tap zoom issues on iOS, use touch-action: manipulation in CSS on interactive elements instead — this stops the 300 ms delay without locking zoom.

3.2   Insufficient Color Contrast — SC 1.4.3 (AA)  FAIL

Files: Home.jsx, Settings.jsx, Calendar.jsx

Multiple instances of Tailwind's text-gray-500 (#6B7280) are used as hint text, sublabels, and secondary content at 12 px (text-xs). WCAG 1.4.3 requires at least 4.5:1 contrast for normal-sized text (under 18 pt / 24 px).

Affected locations include:

• Home.jsx — Moonrise/Moonset labels: <p className="text-gray-500 text-xs mb-1">🌙 Moonrise</p>
• Settings.jsx — Notification hint lines: "Morning of the festival", "1 hour before eclipse begins", etc.
• Calendar.jsx — Tithi/paksha subtitle in upcoming festivals list

Recommended fix:

• Upgrade all hint/secondary text from text-gray-500 to text-gray-400, which achieves ~7.3:1 on bg-gray-900 and ~5.2:1 on bg-gray-800.
• Do not use text-gray-500 at text-xs (12 px) or smaller on dark backgrounds.

3.3   Toggle Non-text Contrast — SC 1.4.11 (AA)  FAIL

File: Settings.jsx — Toggle and SubToggle components

The toggle track (pill container) has no visible border or outline delineating it from the surrounding card background. WCAG 1.4.11 requires UI component boundaries to achieve at least 3:1 contrast against adjacent colors. The gray-700 toggle background (#374151) against the gray-900 card background (#111827) yields approximately 2.0:1 — well below the 3:1 threshold.

Recommended fix:

• Add a semi-transparent border to the toggle container: border: '1px solid rgba(255,255,255,0.3)'. This creates a clear boundary that achieves >3:1 contrast against both the on and off backgrounds.

3.4   Non-Keyboard-Accessible Elements — SC 2.1.1 (A)  FAIL

File: Calendar.jsx

Two groups of interactive elements use plain <div> elements with onClick handlers. Keyboard users — including screen reader users who Tab through pages — cannot reach or activate these elements at all because divs are not focusable and have no implicit button role.

• Calendar grid day cells — <div onClick={() => day && openModal(day)}> — up to 31 cells per month, all unreachable by keyboard
• Upcoming Festivals list items — <div onClick={() => openModal(day)}>

Recommended fix:

• Replace day cell <div> elements with <button> elements, or add role="button" tabIndex={day ? 0 : -1} to the existing divs.
• Add an onKeyDown handler that calls openModal when Enter or Space is pressed.
• Replace festival list card <div>s with <button> elements styled as cards.

3.5   Focus Indicator Removed — SC 2.4.7 (AA)  FAIL

File: Settings.jsx — city search input

The city search input applies focus:outline-none, removing the browser's default focus ring. The only visual change on focus is a border-color shift (focus:border-yellow-600). A single color change on a border does not constitute a sufficiently visible focus indicator under WCAG 2.4.7.

className="... focus:border-yellow-600 focus:outline-none ..."   // PROBLEM

Recommended fix:

• Remove focus:outline-none.
• Add an explicit focus ring: focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-1 focus-visible:ring-offset-gray-900
• The ring-offset creates a gap between the element and the focus ring, making it clearly visible against the dark background.

3.6   Toggle Buttons Have No Accessible Name — SC 4.1.2 (A)  FAIL

File: Settings.jsx — Toggle and SubToggle components

Both components use aria-pressed correctly but have no textual accessible name. The button contains only an inner <span> for the visual knob with no visible label, aria-label, or aria-labelledby. A screen reader announces only "button" with no context about what is being toggled.

Recommended fix:

// Add a `label` prop and apply it as aria-label
const Toggle = ({ on, onToggle, label }) => (
  <button onClick={onToggle} aria-pressed={on} aria-label={label} ...>
    ...
  </button>
)

// Usage:
<Toggle on={notifEnabled} onToggle={...} label="Enable all alerts" />
<SubToggle on={notifPrefs.festivals} ... label="Festival alerts" />
<SubToggle on={notifPrefs.eclipses}  ... label="Eclipse alerts" />

3.7   Chevron Buttons Have No Accessible Name — SC 4.1.2 (A)  FAIL

Files: Panchang.jsx, Calendar.jsx, DatePickerSheet.jsx

All previous/next navigation uses the single-character glyphs ‹ and › as button content with no aria-label. Screen readers will announce these as "single left-pointing angle quotation mark" — giving the user no indication of what the button does.

Recommended fix:

// Panchang.jsx
<button onClick={() => changeDate(-1)} aria-label="Previous day" className="...">‹</button>
<button onClick={() => changeDate(1)}  aria-label="Next day"     className="...">›</button>

// Calendar.jsx
<button onClick={prevMonth} aria-label="Previous month" className="...">‹</button>
<button onClick={nextMonth} aria-label="Next month"     className="...">›</button>

// DatePickerSheet.jsx — same pattern for both chevrons

3.8   City Search Input Has No Label — SC 3.3.2 (A)  FAIL

File: Settings.jsx

The city search <input> relies solely on its placeholder attribute ("Search city or state…") for identification. WCAG 3.3.2 requires a persistent label. Placeholder text disappears once the user begins typing and is not reliably announced as a label by all screen readers.

Recommended fix:

// Add a visually hidden label (Tailwind's sr-only class)
<label htmlFor="city-search" className="sr-only">Search for a city</label>
<input
  id="city-search"
  type="text"
  placeholder="Search city or state..."
  value={citySearch}
  ...
/>

3.9   Modal Sheets Lack Focus Management — SC 2.1.2 (A)  FAIL

Files: Calendar.jsx (day detail modal), DatePickerSheet.jsx

When a modal/sheet opens, keyboard focus stays on the trigger element. Users can Tab past the modal backdrop and reach elements underneath. Additionally, there is no Escape key handler. WCAG 2.1.2 requires that users can move keyboard focus out of any component, and WCAG 2.1.1 requires all functionality to be keyboard operable.

Recommended fix:

• On modal open, move focus to the first focusable element inside the modal via ref.focus() in a useEffect.
• Implement a focus trap (e.g., the focus-trap-react library) so Tab cycles only within the open modal.
• Add a keydown listener that calls closeModal() when Escape is pressed.
• On modal close, return focus to the element that opened it (store the trigger's ref before opening).

// In Calendar.jsx openModal()
const triggerRef = useRef(null);
const openModal = (day) => {
  triggerRef.current = document.activeElement; // remember where focus was
  setSelectedDay(day);
};
const closeModal = () => {
  setSelectedDay(null);
  triggerRef.current?.focus(); // restore focus
};

3.11   No Skip Navigation Link — SC 2.4.1 (A)  FAIL

File: App.jsx

There is no "skip to main content" link. Keyboard users must Tab through the persistent top bar and all four bottom navigation tabs on every page before reaching the main content. WCAG 2.4.1 requires a mechanism to bypass repeated navigation blocks.

Recommended fix:

// In App.jsx, before the top bar:
<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2
             focus:z-50 focus:bg-yellow-400 focus:text-gray-900 focus:px-4
             focus:py-2 focus:rounded focus:outline-none"
>
  Skip to main content
</a>

// Add id to the content wrapper:
<div id="main-content" className="pt-14 pb-20">

3.12   Active Nav Tab Missing aria-current — SC 2.4.3 (A)  FAIL

File: App.jsx — bottom navigation

The active tab is visually indicated with text-yellow-300, but there is no programmatic indicator. Screen reader users cannot determine which tab is currently active without aria-current="page".

Recommended fix:

<button
  onClick={() => navigate('home')}
  aria-current={screen === 'home' ? 'page' : undefined}
  className={`flex flex-col items-center gap-1 ...`}
>

Apply the same pattern to all four tab buttons (home, calendar, panchang, settings).

3.13   Missing Landmark Roles — SC 1.3.1 (A)  FAIL

Files: App.jsx, Calendar.jsx

Bottom navigation is a plain <div>. Screen reader users who navigate by landmark (a very common strategy) cannot jump to the navigation region. Wrap it in a <nav> element.

Calendar grid uses a plain CSS grid with <div> cells. Day-name column headers (Sun, Mon, …) have no programmatic relationship to the cells beneath them, making the calendar unusable for screen reader users.

Recommended fix:

// App.jsx — wrap bottom nav
<nav aria-label="Main navigation" className="fixed bottom-0 ...">
  {/* tab buttons */}
</nav>

// Calendar.jsx — use role="grid" semantics
<div role="grid" aria-label="Lunar calendar" className="grid grid-cols-7 gap-1">
  {/* header row */}
  {dayNames.map(day => (
    <div key={day} role="columnheader" aria-label={day} className="...">{day}</div>
  ))}
  {/* day cells */}
  {calendarDays.map((day, idx) => (
    <div key={idx} role="gridcell" ...>
      <button onClick={...} aria-label={day ? `${day.day} ${monthNames[currentDate.getMonth()]}` : undefined}>
        ...
      </button>
    </div>
  ))}
</div>

3.14   Dynamic State Changes Not Announced — SC 4.1.3 (AA)  FAIL

Files: Home.jsx, Panchang.jsx, Settings.jsx

Several asynchronous state changes are never communicated to screen readers via live regions:

• Home.jsx & Panchang.jsx: "Calculating moon data…" loading state and the subsequent data render have no aria-live region. Screen readers do not announce when loading completes.
• Home.jsx error: "Could not load moon data. Please refresh." has no role="alert".
• Settings.jsx: The "Settings saved" toast and the notification preview banner appear visually but are never announced to screen reader users.

Recommended fix:

// Loading / status messages (Home.jsx, Panchang.jsx)
<div role="status" aria-live="polite" aria-atomic="true">
  {loading ? "Calculating moon data, please wait." : ""}
</div>

// Error message (Home.jsx)
<p role="alert" className="text-center text-red-400">
  Could not load moon data. Please refresh.
</p>

// Settings saved toast (Settings.jsx)
{saved && (
  <div role="status" aria-live="polite" className="...">
    <p className="text-green-300 text-sm">Settings saved</p>
  </div>
)}

// Notification preview banner (Settings.jsx NotificationPreview component)
<div role="alert" aria-live="assertive" style={{...}}>