ragusa-it/ragusaitweb
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into palette-contact-a11y-2847648259567731202

Browse Source
This commit is contained in:
Melvin Ragusa
2026-01-29 05:19:59 +01:00
committed by GitHub
parent 2c9cb547e7 f91f487fda
commit 5745e07da2
10 changed files with 145 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.jules/bolt.md
View File

@@ -1,3 +1,7 @@
## 2024-05-22 - Missing Scripts and Environment
**Learning:** The project lacks `lint` script in `package.json`. Running `pnpm lint` might invoke system tools (like Android Lint?) instead of failing or doing nothing useful. Always check `package.json` scripts first.
**Action:** Use specific commands like `pnpm exec tsc --noEmit` or `npx vitest` as discovered/documented, rather than assuming standard scripts exist.
## 2024-05-22 - High-Frequency State Isolation
**Learning:** High-frequency state updates (like typing effects) in large parent components (`Hero`) trigger massive unnecessary re-renders of expensive sub-trees (`GradientBlinds`, `Button`).
**Action:** Isolate high-frequency state into small, leaf-node components (e.g., `TypedText`) and wrap them in `React.memo` if necessary, keeping the heavy parent static.

3
.jules/palette.md
View File

@@ -1,3 +1,6 @@
## 2025-02-18 - Missing Alerts for Dynamic Status
**Learning:** The application uses `framer-motion` for dynamic feedback messages but consistently lacks `role="alert"` and `aria-live` attributes, causing screen readers to miss critical status updates.
**Action:** When auditing forms, check all `motion.div/p` elements used for feedback and add `role="alert"` and `aria-live="polite"` (or "assertive" for errors).
## 2024-05-22 - Semantic Required Fields with Custom Validation
**Learning:** To combine custom validation UI with semantic `required` attributes (vital for a11y), add `noValidate` to the `<form>`. This prevents native browser bubbles while keeping the accessibility benefits.
**Action:** Use `noValidate` on forms when implementing custom validation but keep `required` attributes on inputs.

8
firebase.json
View File

@@ -24,6 +24,14 @@
"key": "X-Frame-Options",
"value": "DENY"
},
{
"key": "Strict-Transport-Security",
"value": "max-age=31536000; includeSubDomains"
},
{
"key": "Permissions-Policy",
"value": "camera=(), microphone=(), geolocation=()"
},
{
"key": "Referrer-Policy",
"value": "strict-origin-when-cross-origin"

38
src/components/effects/GradientBlinds.test.tsx
View File

@@ -176,17 +176,11 @@ describe('GradientBlinds', () => {
unmount();
expect(removeEventListenerSpy).toHaveBeenCalledWith('pointermove', expect.any(Function));
});
it('minimizes getBoundingClientRect calls during pointer move', () => {
const { unmount } = render(<GradientBlinds />);
// Spy on getBoundingClientRect
// Note: In jsdom, canvas is an HTMLCanvasElement which inherits from HTMLElement
const spy = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
// Trigger pointer move to clear any initial calls or verify baseline
// The initial render calls resize(), which calls getBoundingClientRect on container
// Clear spy history from initial render
spy.mockClear();
act(() => {
@@ -198,9 +192,37 @@ describe('GradientBlinds', () => {
window.dispatchEvent(event);
});
// EXPECTATION: It should NOT be called because the listener shouldn't be attached (not visible)
expect(spy).not.toHaveBeenCalled();
unmount();
});
it('avoids expensive DOM reads (scrollX/Y) in pointermove handler when visible', () => {
const { unmount } = render(<GradientBlinds />);
// Spy on scrollX/scrollY getters
// Note: In jsdom, these are properties on window.
const scrollSpy = vi.spyOn(window, 'scrollX', 'get');
// Make visible to attach listener
act(() => {
if (ioCallback) {
ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
}
});
scrollSpy.mockClear();
// Trigger pointer move
act(() => {
window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100, clientY: 100 }));
});
// With the optimization (moving to RAF loop), this should be 0.
// Without optimization, this will be > 0.
// Since we are mocking RAF and not running the loop, if it's in the loop, it won't be called.
expect(scrollSpy).not.toHaveBeenCalled();
unmount();
});
});

30
src/components/effects/GradientBlinds.tsx
View File

@@ -64,6 +64,8 @@ const GradientBlinds: React.FC<GradientBlindsProps> = ({
const geometryRef = useRef<Geometry | null>(null);
const rendererRef = useRef<Renderer | null>(null);
const mouseTargetRef = useRef<[number, number]>([0, 0]);
// Optimization: store raw pointer position (viewport coords) to decouple event handling from calculation
const pointerPosRef = useRef<{ x: number; y: number } | null>(null);
const lastTimeRef = useRef<number>(0);
const firstResizeRef = useRef<boolean>(true);
const rectRef = useRef<DOMRect | null>(null);
@@ -309,6 +311,15 @@ void main() {
ro.observe(container);
const onPointerMove = (e: PointerEvent) => {
pointerPosRef.current = { x: e.clientX, y: e.clientY };
};
const loop = (t: number) => {
rafRef.current = requestAnimationFrame(loop);
uniforms.iTime.value = t * 0.001;
// Update target based on pointer position and scroll offset
if (pointerPosRef.current) {
const scale = (renderer as unknown as { dpr?: number }).dpr || 1;
let x, y;
@@ -317,23 +328,17 @@ void main() {
const dy = window.scrollY - scrollPosRef.current.y;
const rectLeft = rectRef.current.left - dx;
const rectTop = rectRef.current.top - dy;
x = (e.clientX - rectLeft) * scale;
y = (rectRef.current.height - (e.clientY - rectTop)) * scale;
x = (pointerPosRef.current.x - rectLeft) * scale;
y = (rectRef.current.height - (pointerPosRef.current.y - rectTop)) * scale;
} else {
// Fallback if rectRef missing
const rect = canvas.getBoundingClientRect();
x = (e.clientX - rect.left) * scale;
y = (rect.height - (e.clientY - rect.top)) * scale;
x = (pointerPosRef.current.x - rect.left) * scale;
y = (rect.height - (pointerPosRef.current.y - rect.top)) * scale;
}
mouseTargetRef.current = [x, y];
if (mouseDampening <= 0) {
uniforms.iMouse.value = [x, y];
}
};
const loop = (t: number) => {
rafRef.current = requestAnimationFrame(loop);
uniforms.iTime.value = t * 0.001;
if (mouseDampening > 0) {
if (!lastTimeRef.current) lastTimeRef.current = t;
const dt = (t - lastTimeRef.current) / 1000;
@@ -346,6 +351,9 @@ void main() {
cur[0] += (target[0] - cur[0]) * factor;
cur[1] += (target[1] - cur[1]) * factor;
} else {
if (pointerPosRef.current) {
uniforms.iMouse.value = mouseTargetRef.current;
}
lastTimeRef.current = t;
}
if (!paused && programRef.current && meshRef.current) {

26
src/components/sections/Hero.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef, memo } from "react";
import { Link } from "react-router-dom";
import { motion } from "motion/react";
import { useTranslation } from "../../i18n";
@@ -9,6 +9,21 @@ import styles from "./Hero.module.css";
const GRADIENT_COLORS = ["#26a269", "#8ff0a4"];
interface TypedTextProps {
words: string[];
}
const TypedText = memo(({ words }: TypedTextProps) => {
const { text } = useTypingEffect({
words,
typingSpeed: 80,
deletingSpeed: 40,
pauseDuration: 2500,
});
return <>{text}</>;
});
export function Hero() {
const { t } = useTranslation();
const [showScrollIndicator, setShowScrollIndicator] = useState(true);
@@ -29,13 +44,6 @@ export function Hero() {
return () => observer.disconnect();
}, []);
const { text } = useTypingEffect({
words: t.hero.rotatingWords,
typingSpeed: 80,
deletingSpeed: 40,
pauseDuration: 2500,
});
return (
<section className={styles.hero}>
<div
@@ -100,7 +108,7 @@ export function Hero() {
>
<span>{t.hero.tagline}</span>
<span className={styles.typed}>
{text}
<TypedText words={t.hero.rotatingWords} />
<span className={styles.cursor}>|</span>
</span>
</motion.div>

5
src/components/ui/Input.module.css
View File

@@ -10,6 +10,11 @@
color: var(--md-sys-color-on-surface);
}
.required {
color: var(--md-sys-color-error);
margin-left: 0.25rem;
}
.input {
padding: var(--space-md);
font-family: var(--md-sys-typescale-body-font);

10
src/components/ui/Input.tsx
View File

@@ -15,6 +15,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
<div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
<label htmlFor={inputId} className={styles.label}>
{label}
{props.required && (
<span className={styles.required} aria-hidden="true">
*
</span>
)}
</label>
<input
ref={ref}
@@ -46,6 +51,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
<div className={`${styles.field} ${error ? styles.hasError : ''} ${className || ''}`}>
<label htmlFor={inputId} className={styles.label}>
{label}
{props.required && (
<span className={styles.required} aria-hidden="true">
*
</span>
)}
</label>
<textarea
ref={ref}

24
src/components/ui/__tests__/Input.test.tsx
View File

@@ -32,6 +32,19 @@ describe('Input', () => {
expect(input.getAttribute('aria-invalid')).toBe('false');
expect(input.hasAttribute('aria-describedby')).toBe(false);
});
it('renders required asterisk when required prop is passed', () => {
render(<Input label="Required Input" required />);
// We search for the asterisk specifically
// Note: getByText('*') matches the content of the span
const asterisk = screen.getByText('*');
expect(asterisk).toBeTruthy();
expect(asterisk.getAttribute('aria-hidden')).toBe('true');
const input = screen.getByRole('textbox', { name: /Required Input/i });
expect(input.hasAttribute('required')).toBe(true);
});
});
describe('Textarea', () => {
@@ -49,4 +62,15 @@ describe('Textarea', () => {
expect(error.id).toBeDefined();
expect(error.id).not.toBe('');
});
it('renders required asterisk when required prop is passed', () => {
render(<Textarea label="Required Textarea" required />);
const asterisk = screen.getByText('*');
expect(asterisk).toBeTruthy();
expect(asterisk.getAttribute('aria-hidden')).toBe('true');
const textarea = screen.getByRole('textbox', { name: /Required Textarea/i });
expect(textarea.hasAttribute('required')).toBe(true);
});
});

17
src/pages/Contact.tsx
View File

@@ -9,6 +9,7 @@ import { sanitizeInput, isValidEmail } from "../utils/security";
import styles from "./Contact.module.css";
const NAME_MAX_LENGTH = 100;
const EMAIL_MAX_LENGTH = 254;
const SUBJECT_MAX_LENGTH = 200;
const MESSAGE_MAX_LENGTH = 5000;
@@ -53,6 +54,8 @@ export function Contact() {
if (!formData.email.trim()) {
newErrors.email = "Required";
} else if (formData.email.length > EMAIL_MAX_LENGTH) {
newErrors.email = `Max ${EMAIL_MAX_LENGTH} characters`;
} else if (!isValidEmail(formData.email)) {
newErrors.email = "Invalid email";
}
@@ -158,39 +161,51 @@ export function Contact() {
>
<p className={styles.intro}>{t.contact.intro}</p>
<form onSubmit={handleSubmit} className={styles.form}>
<form
onSubmit={handleSubmit}
className={styles.form}
noValidate
>
<Input
label={t.contact.form.name}
required
placeholder={t.contact.form.namePlaceholder}
value={formData.name}
onChange={(e) => handleChange("name", e.target.value)}
error={errors.name}
maxLength={NAME_MAX_LENGTH}
/>
<Input
label={t.contact.form.email}
type="email"
required
placeholder={t.contact.form.emailPlaceholder}
value={formData.email}
onChange={(e) => handleChange("email", e.target.value)}
error={errors.email}
maxLength={EMAIL_MAX_LENGTH}
/>
<Input
label={t.contact.form.subject}
required
placeholder={t.contact.form.subjectPlaceholder}
value={formData.subject}
onChange={(e) => handleChange("subject", e.target.value)}
error={errors.subject}
maxLength={SUBJECT_MAX_LENGTH}
/>
<Textarea
label={t.contact.form.message}
required
placeholder={t.contact.form.messagePlaceholder}
value={formData.message}
onChange={(e) => handleChange("message", e.target.value)}
error={errors.message}
rows={6}
maxLength={MESSAGE_MAX_LENGTH}
/>
<Button