🎨 Palette: Improve README.md accessibility with presentation roles and hidden decorative images - #152
NITISH-R-G wants to merge 1 commit into
Conversation
…d hidden decorative images Co-authored-by: NITISH-R-G <225521762+NITISH-R-G@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
Reviewer's guide (collapsed on small PRs)Reviewer's GuideThis PR improves accessibility of the profile README by converting decorative markdown images to hidden HTML img tags and marking layout tables as presentational, and it updates the Jules journal with the accessibility guideline learned. File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe README now marks decorative images and layout-only tables for assistive technologies. ChangesAccessibility markup
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- The new 2024-05-19 entry in
.Jules/palette.mdis largely duplicative of the existing 2026-06-07 section and appears out of chronological order; consider consolidating the guidance into a single entry or reordering/merging them to avoid repetition.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- The new 2024-05-19 entry in `.Jules/palette.md` is largely duplicative of the existing 2026-06-07 section and appears out of chronological order; consider consolidating the guidance into a single entry or reordering/merging them to avoid repetition.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.Jules/palette.md:
- Around line 4-6: Add one blank line before and one blank line after the
heading “2024-05-19 - Adding Accessible Multi-Column Layouts in Markdown” in the
palette documentation, preserving the surrounding content.
In `@README.md`:
- Line 1: Add a top-level Markdown heading containing the README document title
before the decorative Bottom_up.svg image, ensuring the image remains below the
heading and markdownlint MD041 passes.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: f94ffc47-0c1f-4f51-88ca-b9a307bc5eba
📒 Files selected for processing (2)
.Jules/palette.mdREADME.md
📜 Review details
🧰 Additional context used
🪛 markdownlint-cli2 (0.23.2)
.Jules/palette.md
[warning] 4-4: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
[warning] 4-4: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
README.md
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🔇 Additional comments (2)
README.md (2)
52-52: LGTM!Also applies to: 94-94
137-137: LGTM!
| ## 2024-05-19 - Adding Accessible Multi-Column Layouts in Markdown | ||
| **Learning:** Purely visual `<table>` elements used for multi-column layouts in markdown files (like profile READMEs) can be read as tabular data by screen readers, creating a confusing experience. | ||
| **Action:** Always add `role="presentation"` to `<table>` elements that are used purely for layout/presentation purposes to prevent screen readers from announcing them as data tables. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add blank lines around the new heading.
## 2024-05-19 - Adding Accessible Multi-Column Layouts in Markdown requires one blank line before and after it. markdownlint MD022 reports both missing blank lines.
🧰 Tools
🪛 markdownlint-cli2 (0.23.2)
[warning] 4-4: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
[warning] 4-4: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.Jules/palette.md around lines 4 - 6, Add one blank line before and one
blank line after the heading “2024-05-19 - Adding Accessible Multi-Column
Layouts in Markdown” in the palette documentation, preserving the surrounding
content.
Source: Linters/SAST tools
| @@ -1,4 +1,4 @@ | |||
|  | |||
| <img src="assets/Bottom_up.svg" alt="" aria-hidden="true" /> | |||
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add a top-level heading before the decorative image.
README.md starts with an <img> element, so markdownlint MD041 reports that the first line is not a top-level heading. Add the document title before this image, or configure an explicit exception if the banner must remain first.
🧰 Tools
🪛 markdownlint-cli2 (0.23.2)
[warning] 1-1: First line in a file should be a top-level heading
(MD041, first-line-heading, first-line-h1)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` at line 1, Add a top-level Markdown heading containing the README
document title before the decorative Bottom_up.svg image, ensuring the image
remains below the heading and markdownlint MD041 passes.
Source: Linters/SAST tools
1 participant
💡 What: Converted decorative markdown images to HTML
<img>tags withalt="" aria-hidden="true"and addedrole="presentation"to<table>elements used for multi-column layout.🎯 Why: Screen readers would previously announce purely visual tables as complex data tables and read out the decorative SVG assets, causing auditory noise and confusion.
♿ Accessibility: Improves the screen reader experience by hiding decorative elements and telling assistive tech to treat layout tables as presentation rather than structured tabular data.
📝 Journaled the learning in
.Jules/palette.md.PR created automatically by Jules for task 11496072763914008391 started by @NITISH-R-G
Summary by Sourcery
Improve README accessibility by marking layout tables as presentational and hiding decorative SVG images from assistive technologies.
Enhancements:
Documentation: