Update README and enhance UpdateDialog accessibility

- Updated the README to use a higher resolution icon for better visibility.
- Improved the UpdateDialog component by adding a backdrop button for dismissing the dialog and enhancing accessibility with ARIA attributes.
This commit is contained in:
matt 2026-02-11 21:30:19 +09:00
parent 540aefc3d3
commit 6522b39ce8
3 changed files with 16 additions and 8 deletions

View file

@ -1,5 +1,5 @@
<p align="center"> <p align="center">
<img src="resources/icons/png/128x128.png" alt="Claude Code Context" width="120" /> <img src="resources/icons/png/512x512.png" alt="Claude Code Context" width="120" />
</p> </p>
<h1 align="center">Claude Code Context</h1> <h1 align="center">Claude Code Context</h1>

View file

@ -17,18 +17,24 @@ export const UpdateDialog = (): React.JSX.Element | null => {
if (!showUpdateDialog) return null; if (!showUpdateDialog) return null;
return ( return (
<div <div className="fixed inset-0 z-50 flex items-center justify-center">
className="fixed inset-0 z-50 flex items-center justify-center" {/* Backdrop */}
style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }} <button
onClick={dismissUpdateDialog} className="absolute inset-0 cursor-default"
> style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}
onClick={dismissUpdateDialog}
aria-label="Close dialog"
tabIndex={-1}
/>
<div <div
className="relative mx-4 w-full max-w-md rounded-lg border p-6 shadow-xl" className="relative mx-4 w-full max-w-md rounded-lg border p-6 shadow-xl"
role="dialog"
aria-modal="true"
aria-label="Update available"
style={{ style={{
backgroundColor: 'var(--color-surface-overlay)', backgroundColor: 'var(--color-surface-overlay)',
borderColor: 'var(--color-border-emphasis)', borderColor: 'var(--color-border-emphasis)',
}} }}
onClick={(e) => e.stopPropagation()}
> >
{/* Close button */} {/* Close button */}
<button <button

View file

@ -72,7 +72,9 @@ export const AdvancedSection = ({
return ( return (
<> <>
<Download className="size-3.5" /> <Download className="size-3.5" />
{updateStatus === 'downloaded' ? 'Update ready' : `v${availableVersion} available`} {updateStatus === 'downloaded'
? 'Update ready'
: `v${availableVersion ?? 'unknown'} available`}
</> </>
); );
default: default: