Skip to content

Commit 59456c4

Browse files
lpintesclaude
andcommitted
feat(a11y): add screen reader labels to CustomTitlebar window control buttons
Add sr-only spans to macOS-style traffic light buttons: - Close button: "Close window" - Minimize button: "Minimize window" - Maximize button: "Maximize window" These native window controls now announce their function to screen reader users, completing accessibility coverage for all window operations. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ae8b2e5 commit 59456c4

1 file changed

Lines changed: 3 additions & 0 deletions

File tree

src/components/CustomTitlebar.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
9595
{isHovered && (
9696
<X size={8} className="text-red-900 opacity-60 group-hover:opacity-100" />
9797
)}
98+
<span className="sr-only">Close window</span>
9899
</button>
99100

100101
{/* Minimize button */}
@@ -109,6 +110,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
109110
{isHovered && (
110111
<Minus size={8} className="text-yellow-900 opacity-60 group-hover:opacity-100" />
111112
)}
113+
<span className="sr-only">Minimize window</span>
112114
</button>
113115

114116
{/* Maximize button */}
@@ -123,6 +125,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
123125
{isHovered && (
124126
<Square size={6} className="text-green-900 opacity-60 group-hover:opacity-100" />
125127
)}
128+
<span className="sr-only">Maximize window</span>
126129
</button>
127130
</div>
128131
</div>

0 commit comments

Comments
 (0)