Conversation
- Add lang="he" dir="rtl" to <html> on both pages (WCAG 3.1.1) - Add aria-label to theme-toggle button (WCAG 4.1.2) - Add role="button", tabindex="0", aria-pressed to toggle images (WCAG 2.1.1, 4.1.2) - Add keydown (Enter/Space) handler for toggle images (WCAG 2.1.1) - Update checkImage() to sync aria-pressed state dynamically - Add skip-to-main-content link (WCAG 2.4.1) - Wrap header area in <header>, prayer content in <main id="main-content"> (WCAG 1.3.1) - Add lang="en" to all English text passages (.instr paragraphs, accordion headings) (WCAG 3.1.2) - Add .skip-link and .visually-hidden CSS utilities - Add :focus-visible outlines for .toggleImg and #theme-toggle (WCAG 2.4.7) - Add prefers-reduced-motion media query (WCAG 2.3.3) - Upgrade Al_Hamichya.html jQuery from HTTP 1.11.2 to HTTPS 3.7.1 and jQuery UI to 1.14.0 Co-Authored-By: Oz <oz-agent@warp.dev>
Code Review SummaryStatus: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)WARNING
Positive ObservationsThis PR contains significant accessibility improvements:
Files Reviewed (3 files)
Note: The HTML nesting issue is a WARNING because while browsers are lenient and may render this correctly, it can cause:
To fix: Ensure </div> <!-- close .barticle -->
</main>instead of: </main>
</div> <!-- .barticle closes AFTER main - invalid nesting! --> |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d615349164
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| </div> | ||
| </div> | ||
| </main> |
There was a problem hiding this comment.
Add missing closing div before closing main
Here </main> is emitted while the <div class="article barticle"> opened above is still unclosed (this revision leaves the page with 19 <div> openings but only 18 </div> closings). Browsers will auto-repair malformed markup, but that can produce inconsistent DOM structure for styling/accessibility tools and makes the landmark/content hierarchy unreliable; insert the missing </div> before closing main (the same pattern is present in Al_Hamichya.html).
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Summary
- Addressed the review feedback by fixing invalid element nesting in
index.html: the.article.barticlecontainer is now explicitly closed before</main>. index.htmlL163-L170 - Applied the same nesting fix in
Al_Hamichya.htmlso both pages have consistent, valid structure (.article.barticlecloses before</main>). Al_Hamichya.htmlL159-L166 - Committed the changes (
5ecb1d5) and created a follow-up PR titled “Follow-up: fix invalid main/article nesting in accessibility PR.”
Testing
- ✅
for f in index.html Al_Hamichya.html; do echo "== $f =="; echo -n "open div: "; rg -o '<div\\b' "$f" | wc -l; echo -n "close div: "; rg -o '</div>' "$f" | wc -l; done - ✅
git diff -- index.html Al_Hamichya.html
Summary
Implements all accessibility improvements identified in the WCAG AA audit.
Changes
Critical fixes
lang="he" dir="rtl"to<html>on both pages so screen readers select the correct Hebrew TTS enginearia-label="Toggle dark/light theme"to the theme toggle button (index.html)role="button",tabindex="0",aria-pressedstate, and anEnter/SpacekeydownhandlerSerious fixes
<header>around the actionBox and<main id="main-content">around the prayer text:focus-visibleoutlines for.toggleImgand#theme-toggle(3 px solid blue)Moderate fixes
lang="en"to all English-language passages (.instrparagraphs and accordion<h2>headings)@media (prefers-reduced-motion: reduce)block to suppress animations/transitions for users who prefer itAl_Hamichya.htmljQuery from HTTP 1.11.2 → HTTPS 3.7.1 and jQuery UI from 1.11.3 → 1.14.0CSS additions (
mainStyle.css).skip-link— slide-in-on-focus pattern.visually-hidden— standard screen-reader-only utility classfocus-visiblerules for interactive elementsprefers-reduced-motionmedia queryThis PR was generated with Oz.