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:
parent
540aefc3d3
commit
6522b39ce8
3 changed files with 16 additions and 8 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in a new issue