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">
<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>
<h1 align="center">Claude Code Context</h1>

View file

@ -17,18 +17,24 @@ export const UpdateDialog = (): React.JSX.Element | null => {
if (!showUpdateDialog) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}
onClick={dismissUpdateDialog}
>
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<button
className="absolute inset-0 cursor-default"
style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}
onClick={dismissUpdateDialog}
aria-label="Close dialog"
tabIndex={-1}
/>
<div
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={{
backgroundColor: 'var(--color-surface-overlay)',
borderColor: 'var(--color-border-emphasis)',
}}
onClick={(e) => e.stopPropagation()}
>
{/* Close button */}
<button

View file

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