Skip to content

Commit fd88a5f

Browse files
OpenStaxClaudeclaudeCopilot
authored and
RoyEJohnson
committed
Fix Modal component accessibility and TypeScript issues
- Add React.forwardRef to CloseModalIcon to accept refs - Explicitly accept and render children in Heading and BodyHeading components - Fix aria-label type by casting to string - Break long lines to meet max-len linting requirements This addresses the code review feedback to fix TypeScript compilation errors and jsx-a11y/heading-has-content warnings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) snaps Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> Co-Authored-By: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
1 parent aaf2b55 commit fd88a5f

5 files changed

Lines changed: 255 additions & 1035 deletions

File tree

‎src/app/components/Modal/Modal.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ export function Header({ className, style, ...props }: React.HTMLAttributes<HTML
6161
}
6262

6363
// Heading component
64-
export function Heading({ className, style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
64+
export function Heading(
65+
{ className, style, children, ...props }: React.PropsWithChildren<React.HTMLAttributes<HTMLHeadingElement>>
66+
) {
6567
return (
6668
<h1
6769
{...props}
@@ -70,12 +72,16 @@ export function Heading({ className, style, ...props }: React.HTMLAttributes<HTM
7072
'--text-color': theme.color.text.default,
7173
...style,
7274
} as React.CSSProperties}
73-
/>
75+
>
76+
{children}
77+
</h1>
7478
);
7579
}
7680

7781
// BodyHeading component
78-
export function BodyHeading({ className, style, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
82+
export function BodyHeading(
83+
{ className, style, children, ...props }: React.PropsWithChildren<React.HTMLAttributes<HTMLHeadingElement>>
84+
) {
7985
return (
8086
<h3
8187
{...props}
@@ -84,7 +90,9 @@ export function BodyHeading({ className, style, ...props }: React.HTMLAttributes
8490
'--text-color': theme.color.text.default,
8591
...style,
8692
} as React.CSSProperties}
87-
/>
93+
>
94+
{children}
95+
</h3>
8896
);
8997
}
9098

@@ -103,20 +111,23 @@ export function Footer({ className, ...props }: React.HTMLAttributes<HTMLDivElem
103111
return <div {...props} className={classNames('modal-footer', className)} />;
104112
}
105113

106-
// CloseModalIcon component
107-
export function CloseModalIcon({ className, style, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
108-
return (
109-
<button
110-
type="button"
111-
{...props}
112-
className={classNames('modal-close-icon', className)}
113-
style={{
114-
'--icon-color-lighter': toolbarIconColor.lighter,
115-
'--icon-color-base': toolbarIconColor.base,
116-
...style,
117-
} as React.CSSProperties}
118-
>
119-
<Times aria-hidden="true" />
120-
</button>
121-
);
122-
}
114+
// CloseModalIcon component with forwardRef
115+
export const CloseModalIcon = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
116+
function CloseModalIcon({ className, style, ...props }, ref) {
117+
return (
118+
<button
119+
ref={ref}
120+
type="button"
121+
{...props}
122+
className={classNames('modal-close-icon', className)}
123+
style={{
124+
'--icon-color-lighter': toolbarIconColor.lighter,
125+
'--icon-color-base': toolbarIconColor.base,
126+
...style,
127+
} as React.CSSProperties}
128+
>
129+
<Times aria-hidden="true" />
130+
</button>
131+
);
132+
}
133+
);

0 commit comments

Comments
 (0)