import json
import os
data = [
{
"instruction": "Add descriptive alt text to the following image component to improve accessibility for screen reader users.",
"input": "const Logo = () => <img src=\"/logo.png\" className=\"h-8 w-8\" />;",
"output": "const Logo = () => <img src=\"/logo.png\" alt=\"Acme Corp Logo\" className=\"h-8 w-8\" />;",
"metadata": {"category": "a11y", "framework": "react", "complexity": "low"}
},
{
"instruction": "Convert this clickable `div` into a semantic `<button>` element to ensure it is keyboard accessible and recognized by screen readers.",
"input": "const ClickableDiv = ({ onClick }) => <div onClick={onClick} className=\"bg-blue-500 text-white p-2 rounded cursor-pointer\">Click Me</div>;",
"output": "const ClickableButton = ({ onClick }) => <button onClick={onClick} className=\"bg-blue-500 text-white p-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400\">Click Me</button>;",
"metadata": {"category": "a11y", "framework": "react", "complexity": "low"}
},
{
"instruction": "Add an `aria-label` to this icon-only button so screen reader users know its purpose.",
"input": "const DeleteButton = ({ onDelete }) => <button onClick={onDelete} className=\"p-2 text-gray-500 hover:text-gray-700\"><TrashIcon className=\"h-5 w-5\" /></button>;",
"output": "const DeleteButton = ({ onDelete }) => <button aria-label=\"Delete item\" onClick={onDelete} className=\"p-2 text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400\"><TrashIcon className=\"h-5 w-5\" /></button>;",
"metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Improve the accessibility of this input field by associating it with a proper `<label>` element and using appropriate input types.",
"input": "const EmailInput = () => <input type=\"text\" className=\"border p-2 rounded\" placeholder=\"Enter your email\" />;",
"output": "const EmailInput = () => (<div><label htmlFor=\"email-input\" className=\"block text-sm font-medium text-gray-700\">Email Address</label><input id=\"email-input\" type=\"email\" className=\"mt-1 block w-full border border-gray-300 p-2 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500\" placeholder=\"email@example.com\" /></div>);",
"metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Implement an `aria-live` region to ensure that dynamic status messages are announced by screen readers when they change.",
"input": "const StatusMessage = ({ message }) => <div className=\"text-sm text-green-600\">{message}</div>;",
"output": "const StatusMessage = ({ message }) => <div aria-live=\"polite\" className=\"text-sm text-green-600\">{message}</div>;",
"metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Refactor this modal component to implement a focus trap and handle the 'Escape' key for better keyboard accessibility.",
"input": "const SimpleModal = ({ isOpen, onClose, children }) => { if (!isOpen) return null; return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center\"><div className=\"bg-white p-6 rounded shadow-lg\">{children}<button onClick={onClose}>Close</button></div></div>; };",
"output": "import { useEffect, useRef } from 'react'; const AccessibleModal = ({ isOpen, onClose, children }) => { const modalRef = useRef(null); useEffect(() => { if (isOpen) { const handleKeyDown = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', handleKeyDown); modalRef.current?.focus(); return () => document.removeEventListener('keydown', handleKeyDown); } }, [isOpen, onClose]); if (!isOpen) return null; return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center\" role=\"dialog\" aria-modal=\"true\"><div ref={modalRef} tabIndex={-1} className=\"bg-white p-6 rounded shadow-lg focus:outline-none\">{children}<button onClick={onClose} className=\"mt-4 block text-blue-500 underline\">Close</button></div></div>; };",
"metadata": {"category": "a11y", "framework": "react", "complexity": "high"}
},
{
"instruction": "Enhance this custom dropdown component with appropriate ARIA attributes (`aria-expanded`, `aria-haspopup`, `role='listbox'`) and keyboard support to make it accessible.",
"input": "const CustomSelect = ({ options, onSelect }) => { const [isOpen, setIsOpen] = React.useState(false); return <div className=\"relative\"><div onClick={() => setIsOpen(!isOpen)} className=\"border p-2 rounded cursor-pointer\">{options[0]}</div>{isOpen && <div className=\"absolute border w-full bg-white\">{options.map(opt => <div key={opt} onClick={() => onSelect(opt)} className=\"p-2 hover:bg-gray-100\">{opt}</div>)}</div></div>; };",
"output": "const CustomSelect = ({ options, onSelect }) => { const [isOpen, setIsOpen] = React.useState(false); const [activeIndex, setActiveIndex] = React.useState(0); const selectRef = React.useRef(null); const handleKeyDown = (e) => { if (e.key === 'ArrowDown') { setActiveIndex((prev) => (prev + 1) % options.length); } else if (e.key === 'ArrowUp') { setActiveIndex((prev) => (prev - 1 + options.length) % options.length); } else if (e.key === 'Enter') { onSelect(options[activeIndex]); setIsOpen(false); } }; return <div className=\"relative\" ref={selectRef}><button aria-haspopup=\"listbox\" aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)} onKeyDown={handleKeyDown} className=\"w-full border p-2 text-left rounded focus:ring-2 focus:ring-blue-500\">{options[activeIndex]}</button>{isOpen && <ul role=\"listbox\" className=\"absolute w-full border bg-white mt-1 shadow-lg max-h-60 overflow-auto\" aria-label=\"Select option\"><li role=\"option\" aria-selected={activeIndex === 0} className=\"p-2 hover:bg-blue-100 cursor-pointer\" onClick={() => { onSelect(options[0]); setIsOpen(false); }}>{options[0]}</li></ul></div></div>; };",
"metadata": {"category": "a11y", "framework": "react", "complexity": "high"}
},
{
"instruction": "Add a 'Skip to Main Content' link to improve navigation for keyboard users.",
"input": "const Layout = ({ children }) => (<><nav className=\"p-4 bg-gray-800 text-white\">Navigation</nav><main>{children}</main></>);",
"output": "const Layout = ({ children }) => (<><a href=\"#main-content\" className=\"sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-white p-2 shadow-md z-50\">Skip to main content</a><nav className=\"p-4 bg-gray-800 text-white\">Navigation</nav><main id=\"main-content\" tabIndex={-1}>{children}</main></>);",
"metadata": {"category": "a11y", "framework": "react", "complexity": "medium"}
},
{
"instruction": "Adjust the Tailwind CSS classes to ensure the text meets WCAG AA color contrast requirements against its background.",
"input": "const LowContrastText = () => <p className=\"text-gray-400 bg-white\">Low contrast text</p>;",
"output": "const HighContrastText = () => <p className=\"text-gray-700 bg-white\">High contrast text</p>;",
"metadata": {"category": "a11y", "framework": "tailwind", "complexity": "low"}
},
{
"instruction": "Implement a fully accessible tabs component using the WAI-ARIA design pattern, including keyboard navigation (arrow keys) and appropriate roles.",
"input": "const SimpleTabs = ({ tabs, activeTab, setActiveTab }) => (<div className=\"flex border-b\"><div onClick={() => setActiveTab(0)} className=\"p-2\">Tab 1</div><div onClick={() => setActiveTab(1)} className=\"p-2\">Tab 2</div></div><div className=\"p-4\">{tabs[activeTab]}</div>);",
"output": "const AccessibleTabs = ({ tabs, activeTab, setActiveTab }) => { const handleKeyDown = (e, index) => { if (e.key === 'ArrowRight') setActiveTab((index + 1) % tabs.length); else if (e.key === 'ArrowLeft') setActiveTab((index - 1 + tabs.length) % tabs.length); }; return (<div><div role=\"tablist\" className=\"flex border-b\"><{tabs.map((_, i) => <button key={i} role=\"tab\" aria-selected={activeTab === i} aria-controls={`panel-${i}`} tabIndex={activeTab === i ? 0 : -1} onClick={() => setActiveTab(i)} onKeyDown={(e) => handleKeyDown(e, i)} className={`p-2 ${activeTab === i ? 'border-b-2 border-blue-500' : ''}`}>Tab {i + 1}</button>)}</div><div role=\"tabpanel\" id={`panel-${activeTab}`} tabIndex={0} className=\"p-4\">{tabs[activeTab]}</div></div>); };",
"metadata": {"category": "a11y", "framework": "react", "complexity": "high"}
}
]
file_path = os.path.expanduser('~/projects/web-dev-swarm/datasets/frontend/raw/frontend_gold_standard.jsonl')
with open(file_path, 'a') as f:
for entry in data:
f.write(json.dumps(entry) + '\\n')
print(f'Successfully appended {len(data)} entries to {file_path}')