Skip to content

🎨 Palette: SectionControls accessibility & visual polish #397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aafre wants to merge 2 commits into from
Closed

🎨 Palette: SectionControls accessibility & visual polish #397

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d2077a
feat(ux): improve SectionControls accessibility and visual polish
google-labs-jules[bot] Mar 17, 2026
f38337a
feat(ux): improve SectionControls accessibility and visual polish
google-labs-jules[bot] Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 17 additions & 3 deletions resume-builder-ui/src/components/SectionControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from "react";
import { MdArrowUpward, MdArrowDownward, MdDeleteOutline } from "react-icons/md";

const SectionControls: React.FC<{
sectionIndex: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
sections: any[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setSections: (sections: any[]) => void;
Comment on lines +6 to 9
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

To improve type safety and code clarity, it's better to use a specific type for sections instead of any[] with an ESLint suppression. A Section interface is already used in the parent SectionEditor component. A similar interface could be defined here or, ideally, moved to a shared types file and imported in both places.

For example:

interface Section {
  name: string;
  type: string;
  content: any;
}
Suggested change
// eslint-disable-next-line @typescript-eslint/no-explicit-any
sections: any[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setSections: (sections: any[]) => void;
sections: Section[];
setSections: (sections: Section[]) => void;
References
  1. Using specific types instead of any[] directly improves robustness and type safety, aligning with the principle of enhancing type safety in the codebase.

}> = ({ sectionIndex, sections, setSections }) => {
const moveSection = (fromIndex: number, toIndex: number) => {
Expand All @@ -19,6 +24,9 @@ const SectionControls: React.FC<{
return (
<div className="absolute top-4 right-4 flex gap-2">
<button
type="button"
aria-label="Move section up"
title="Move section up"
onClick={() => moveSection(sectionIndex, sectionIndex - 1)}
disabled={sectionIndex === 0}
className={`px-2 py-1 rounded ${
Expand All @@ -27,9 +35,12 @@ const SectionControls: React.FC<{
: "bg-accent hover:bg-accent text-ink"
}`}
>
↑
<MdArrowUpward />
</button>
<button
type="button"
aria-label="Move section down"
title="Move section down"
onClick={() => moveSection(sectionIndex, sectionIndex + 1)}
disabled={sectionIndex === sections.length - 1}
className={`px-2 py-1 rounded ${
Expand All @@ -38,13 +49,16 @@ const SectionControls: React.FC<{
: "bg-accent hover:bg-accent text-ink"
}`}
>
↓
<MdArrowDownward />
</button>
<button
type="button"
aria-label="Delete section"
title="Delete section"
onClick={deleteSection}
className="bg-red-500 hover:bg-red-600 text-white px-3 py-1 rounded"
>
🗑
<MdDeleteOutline />
</button>
</div>
);
Expand Down
Loading