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">
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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:
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue