fix: improve SVG icon accessibility by SiyaSatija · Pull Request #445 · magic-peach/reframe

SiyaSatija · 2026-05-16T07:07:09Z

#171
Adds accessibility improvements for decorative SVG icons by applying aria-hidden="true" to non-informative Lucide icons that already have accompanying visible or screen-reader text. This prevents redundant announcements from screen readers and improves overall accessibility.

vercel · 2026-05-16T07:07:13Z

@SiyaSatija is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-05-16T07:07:17Z

👋 Thanks for your PR, @SiyaSatija!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

🤖 Automated checks — build & TypeScript typecheck will run automatically
✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
👀 Code review — a maintainer will review your changes
🚀 Merge — once approved, your PR will be merged!

Quick checklist

PR title follows Conventional Commits (e.g. feat: add dark mode)
Linked the issue this PR closes (e.g. Closes #123)
Tested the changes locally (bun run dev)
Build passes (bun run build)

Useful links

📖 CONTRIBUTING.md
🐛 Open Issues
⭐ Star the repo to support the project!

Happy coding! 🎉

github-actions · 2026-05-16T07:07:18Z

⚠️ PR Format Issues — @SiyaSatija

Please fix the following before your PR can be reviewed:

⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

Copilot

Pull request overview

Adds aria-hidden="true" to decorative Lucide icons across the video-editor UI so screen readers skip them, eliminating redundant announcements where adjacent visible text or sr-only labels already convey meaning (issue #171).

Changes:

Mark decorative Lucide icons (Scissors, RotateCw, Volume2, Layers, Crop, Github, Download, etc.) as aria-hidden="true".
Covers icons accompanied by visible labels (Section titles, buttons like EXPORT/Download/New) and by sr-only text (rotate-degree buttons, framing buttons, audio toggle).
No behavioral/logic changes; purely accessibility-attribute additions.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/components/VideoEditor.tsx	`aria-hidden` added to Section icons, AlertTriangle, Zap (EXPORT button), and Github link icon.
src/components/RotateControl.tsx	`aria-hidden` added to rotating `RotateCw` icon (sr-only label already present).
src/components/PresetSelector.tsx	`aria-hidden` added to `Settings2` icon.
src/components/FramingControl.tsx	`aria-hidden` added to per-mode `Icon` (sr-only describes mode).
src/components/FileUpload.tsx	`aria-hidden` added to `Film` and `FolderOpen` icons.
src/components/ExportSettings.tsx	`aria-hidden` added to `SlidersHorizontal` next to “Quality” label.
src/components/DownloadResult.tsx	`aria-hidden` added to `Download` and `RotateCcw` button icons.
src/components/AudioSpeedControl.tsx	`aria-hidden` added to `Volume2`/`VolumeX` toggle icons and `Gauge` label icon.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.


-              <Section icon={<Crop size={12} />} title="Framing" delay={100}>
+
+              <Section icon={<Crop size={12} aria-hidden="true" />} title="Framing" delay={100}>


            className="flex items-center gap-1.5 text-[11px] font-heading font-medium text-[var(--muted)] hover:text-film-600 transition-colors"
          >
-            <Github size={13} />
+            <Github size={13} aria-hidden="true"/>


+          <Download size={15} aria-hidden="true"  />
          Download {result.format.toUpperCase()}
        </a>
        <button
          type="button"
          onClick={onReset}
          className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:bg-[var(--bg)] transition-colors"
        >
-          <RotateCcw size={14} />
+          <RotateCcw size={14} aria-hidden="true"  />


        >
          <Settings2
-            size={20}
+            size={20} aria-hidden="true"


…lation error

magic-peach · 2026-05-16T07:42:25Z

Hey @SiyaSatija! The build is failing with a JSX syntax error in src/components/AudioSpeedControl.tsx:

Error — line 101:

Error: Expected '</', got 'jsx text (`)'
,-[ src/components/AudioSpeedControl.tsx:101:1]
 98 |                   {getSpeedDescription(recipe.speed)}
 99 |                 </span>
100 |               </div>
101 |,->             </div>
102 |`->             <input

This is a mismatched or prematurely closed JSX tag around line 100-101 in the component's render output. A </div> is closing at the wrong nesting level, breaking the JSX tree.

Fix: Check the JSX nesting in the speed description section (around lines 95–110) of AudioSpeedControl.tsx and make sure every opening tag has a matching closing tag at the correct level. Then push and CI should pass.

magic-peach · 2026-05-16T10:41:29Z

Hi @SiyaSatija 👋 This PR has a merge conflict with main. Please update your branch:

git fetch upstream && git merge upstream/main
# resolve any conflicts, then:
git push

Once conflicts are resolved and CI passes, this will be ready to merge. 🙂

magic-peach · 2026-05-16T17:36:13Z

Hey @SiyaSatija, this PR has merge conflicts with main. Please merge/rebase main into your branch and resolve the conflicts before we can review it. Run: git fetch upstream && git merge upstream/main

magic-peach · 2026-05-17T04:28:05Z

Hey @SiyaSatija! The SVG accessibility improvements look good, but this PR now has conflicts with main because AudioSpeedControl.tsx and DownloadResult.tsx were recently updated by merged PRs (#505 and #513). Please rebase:

git fetch origin && git rebase origin/main

Resolve any conflicts in those files (keep the new changes from main AND your accessibility improvements), then push. Once CI passes, it'll be ready to merge!

magic-peach · 2026-05-17T17:01:37Z

Hey @SiyaSatija! The build check is failing for this PR. Please review the build logs, fix the error, and push an update. Once the build passes and the code looks clean, this will be ready to merge. Let me know if you need help identifying the issue!

magic-peach · 2026-05-17T17:51:18Z

Hey @SiyaSatija! Improving SVG icon accessibility is a great contribution. This PR has several issues:

Merge conflicts with main
Build is failing
Lint is failing

Please rebase and fix both build and lint errors before this can be reviewed.

magic-peach · 2026-05-18T02:26:51Z

Hey @SiyaSatija! This PR has CI check failures (build/lint/typecheck) and merge conflicts with main. Please:

Rebase onto main to resolve conflicts
Fix the build/lint/typecheck errors

git fetch origin
git rebase origin/main
# fix any errors, then:
git push --force-with-lease

Once all checks pass, we'll review and merge!

magic-peach · 2026-05-18T08:58:30Z

Hey @SiyaSatija! This PR had merge conflicts with main — I've resolved them automatically and pushed. Conflicts were resolved by keeping main's versions of core files while preserving your changes. CI has been re-triggered. Once it passes, we'll review for merge!

magic-peach · 2026-05-18T08:59:44Z

Hey @SiyaSatija! I've resolved the merge conflicts and pushed, but the build/lint/typecheck checks are still failing. Please check the build logs at the CI check links above and fix the errors.

Common issues to look for: TypeScript errors, unused imports, or lint violations. Once the build passes, we'll review and merge!

magic-peach · 2026-05-18T09:10:41Z

Hey @SiyaSatija! The build was failing due to unresolved conflict markers in AudioSpeedControl.tsx. I've fixed the conflict resolution and pushed again — all conflict markers should now be resolved. CI has been re-triggered. Once it passes, we'll review and merge!

magic-peach · 2026-05-18T09:18:39Z

Merged! ✅ All checks pass. Thanks @SiyaSatija — adding aria-hidden="true" to decorative SVG icons is exactly the right accessibility fix. This closes issue #171!

…gic-peach#445) Squash merged. Build/lint/typecheck pass. Adds aria-hidden='true' to decorative SVG icons in DownloadResult and FramingControl - good accessibility improvement.

fix: improve SVG icon accessibility

e1121b8

Copilot AI review requested due to automatic review settings May 16, 2026 07:07

github-actions Bot added the ui/ux User interface or experience improvement label May 16, 2026

Copilot started reviewing on behalf of SiyaSatija May 16, 2026 07:07 View session

Copilot AI reviewed May 16, 2026

View reviewed changes

SiyaSatija added 2 commits May 16, 2026 12:45

Merge branch 'main' into accessibility/171-svg-icons-fix

e447456

fix(VideoEditor): remove duplicate AudioSpeedControl to resolve compi…

9c432e9

…lation error

magic-peach added gssoc'26 GirlScript Summer of Code 2026 gssoc:approved Approved for GSSoC'26 labels May 16, 2026

magic-peach added needs-fixes PR has issues that need to be fixed type:accessibility Accessibility type:design UI/UX design level:beginner Beginner level - 20 pts quality:clean Well-implemented, clean code type:bug Bug fix labels May 16, 2026

SiyaSatija added 2 commits May 17, 2026 00:33

Fix label issue in AudioSpeedControl

f138304

Fix label markup and resolve merge conflict in AudioSpeedControl

784939a

github-actions Bot added the level:intermediate Intermediate level - 35 pts label May 16, 2026

Merge branch 'main' into accessibility/171-svg-icons-fix

c5d3d53

magic-peach removed ui/ux User interface or experience improvement level:beginner Beginner level - 20 pts labels May 17, 2026

chore: resolve merge conflicts with main (v2)

88a517a

magic-peach force-pushed the accessibility/171-svg-icons-fix branch from cc21ee2 to 88a517a Compare May 18, 2026 09:10

github-actions Bot added the level:beginner Beginner level - 20 pts label May 18, 2026

magic-peach merged commit 46d0b4e into magic-peach:main May 18, 2026
7 of 10 checks passed

magic-peach mentioned this pull request May 18, 2026

[Accessibility] Add title attributes to SVG icons for screen readers #171

Closed

3 tasks


		<Section icon={<Crop size={12} />} title="Framing" delay={100}>

		<Section icon={<Crop size={12} aria-hidden="true" />} title="Framing" delay={100}>

Conversation

SiyaSatija commented May 16, 2026

Uh oh!

vercel Bot commented May 16, 2026

Uh oh!

github-actions Bot commented May 16, 2026

👋 Thanks for your PR, @SiyaSatija!

What happens next

Quick checklist

Useful links

Uh oh!

github-actions Bot commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ PR Format Issues — @SiyaSatija

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

magic-peach commented May 16, 2026

Uh oh!

magic-peach commented May 16, 2026

Uh oh!

magic-peach commented May 16, 2026

Uh oh!

magic-peach commented May 17, 2026

Uh oh!

magic-peach commented May 17, 2026

Uh oh!

magic-peach commented May 17, 2026

Uh oh!

magic-peach commented May 18, 2026

Uh oh!

magic-peach commented May 18, 2026

Uh oh!

magic-peach commented May 18, 2026

Uh oh!

magic-peach commented May 18, 2026

Uh oh!

Uh oh!

magic-peach commented May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented May 16, 2026 •

edited

Loading