dpnmw/agents
1
0
Fork 0
mirror of https://github.com/wshobson/agents.git synced 2026-03-18 17:47:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: format all files with prettier

Browse Source
This commit is contained in:
Seth Hobson
2026-01-19 17:07:03 -05:00
parent 8d37048deb
commit 56848874a2
355 changed files with 15215 additions and 10241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugins/ui-design/skills/accessibility-compliance/references/wcag-guidelines.md
View File

@@ -259,7 +259,7 @@ function Tooltip({ content, children }) {
<div
role="tooltip"
// Dismissible: user can close without moving pointer
onKeyDown={(e) => e.key === 'Escape' && setIsVisible(false)}
onKeyDown={(e) => e.key === "Escape" && setIsVisible(false)}
// Hoverable: content stays visible when pointer moves to it
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
@@ -292,7 +292,7 @@ function CustomButton({ onClick, children }) {
tabIndex={0}
onClick={onClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick();
}
@@ -331,10 +331,10 @@ function Modal({ isOpen, onClose, children }) {
// Allow Escape to close
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
if (e.key === "Escape") onClose();
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [onClose]);
return (
@@ -357,12 +357,18 @@ function Modal({ isOpen, onClose, children }) {
```tsx
// Skip links
<body>
<a href="#main" className="skip-link">Skip to main content</a>
<a href="#nav" className="skip-link">Skip to navigation</a>
<a href="#main" className="skip-link">
Skip to main content
</a>
<a href="#nav" className="skip-link">
Skip to navigation
</a>
<header>...</header>
<nav id="nav" aria-label="Main">...</nav>
<nav id="nav" aria-label="Main">
...
</nav>
<main id="main" tabIndex={-1}>
{/* Main content */}
@@ -455,8 +461,12 @@ Content and interface must be understandable.
```html
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
<head>
...
</head>
<body>
...
</body>
</html>
```
@@ -571,7 +581,7 @@ function CustomCheckbox({ checked, onChange, label }) {
aria-label={label}
onClick={() => onChange(!checked)}
>
{checked ? '✓' : '○'} {label}
{checked ? "✓" : "○"} {label}
</button>
);
}
@@ -587,8 +597,8 @@ function CustomSlider({ value, min, max, label, onChange }) {
aria-label={label}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'ArrowRight') onChange(Math.min(value + 1, max));
if (e.key === 'ArrowLeft') onChange(Math.max(value - 1, min));
if (e.key === "ArrowRight") onChange(Math.min(value + 1, max));
if (e.key === "ArrowLeft") onChange(Math.max(value - 1, min));
}}
>
<div style={{ width: `${((value - min) / (max - min)) * 100}%` }} />
@@ -601,6 +611,7 @@ function CustomSlider({ value, min, max, label, onChange }) {
```markdown
## Keyboard Testing
- [ ] All interactive elements focusable with Tab
- [ ] Focus order matches visual order
- [ ] Focus indicator always visible
@@ -609,6 +620,7 @@ function CustomSlider({ value, min, max, label, onChange }) {
- [ ] Enter/Space activates buttons and links
## Screen Reader Testing
- [ ] All images have alt text
- [ ] Form inputs have labels
- [ ] Headings in logical order
@@ -617,6 +629,7 @@ function CustomSlider({ value, min, max, label, onChange }) {
- [ ] Error messages announced
## Visual Testing
- [ ] Text contrast at least 4.5:1
- [ ] UI component contrast at least 3:1
- [ ] Works at 200% zoom