Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve accessibility on website #50

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: improve accessibility on website #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/action-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ export function ActionButton({
}}
disabled={disabled}
className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
tabIndex={0}
>
<Icon className="h-6 w-6" />
<Icon className="h-6 w-6" role="img" aria-label={text || tooltipText}/>
{text && <span className="text-sm">{text}</span>}
</Button>
</TooltipTrigger>
Expand Down
5 changes: 3 additions & 2 deletions src/components/copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,16 @@ export function CopyButton({ onClick }: CopyButtonProps) {
<Button
onClick={handleClick}
className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
tabIndex={0}
>
{copied ? (
<>
<Check className="h-6 w-6" />
<Check className="h-6 w-6" role="img" aria-label="Copied!"/>
<span className="text-sm">Copied!</span>
</>
) : (
<>
<FileText className="h-6 w-6" />
<FileText className="h-6 w-6" role="img" aria-label="Copy Mermaid.js Code"/>
<span className="text-sm">Copy Mermaid.js Code</span>
</>
)}
Expand Down
13 changes: 12 additions & 1 deletion src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,12 @@ export function Header() {
<nav className="flex items-center gap-3 sm:gap-6">
<span
onClick={() => setIsApiKeyDialogOpen(true)}
onKeyDown={(e) => {
if (e.key === "Enter")
setIsApiKeyDialogOpen(true);
}}
className="cursor-pointer text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"
tabIndex={0}
>
<span className="flex items-center sm:hidden">
<span>API Key</span>
Expand All @@ -63,16 +68,22 @@ export function Header() {
</span>
<span
onClick={() => setIsPrivateReposDialogOpen(true)}
onKeyDown={(e) => {
if (e.key === "Enter")
setIsPrivateReposDialogOpen(true);
}}
className="cursor-pointer text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600"
tabIndex={0}
>
<span className="sm:hidden">Private Repos</span>
<span className="hidden sm:inline">Private Repos</span>
</span>
<Link
href="https://github.com/ahmedkhaleel2004/gitdiagram"
className="flex items-center gap-1 text-sm font-medium text-black transition-transform hover:translate-y-[-2px] hover:text-purple-600 sm:gap-2"
tabIndex={0}
>
<FaGithub className="h-5 w-5" />
<FaGithub className="h-5 w-5" aria-label="Github" role="img"/>
<span className="hidden sm:inline">GitHub</span>
</Link>
<span className="flex items-center gap-1 text-sm font-medium text-black">
Expand Down
4 changes: 4 additions & 0 deletions src/components/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ const Hero = () => {
viewBox="0 0 91 98"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-hidden
>
<path
d="m35.878 14.162 1.333-5.369 1.933 5.183c4.47 11.982 14.036 21.085 25.828 24.467l5.42 1.555-5.209 2.16c-11.332 4.697-19.806 14.826-22.888 27.237l-1.333 5.369-1.933-5.183C34.56 57.599 24.993 48.496 13.201 45.114l-5.42-1.555 5.21-2.16c11.331-4.697 19.805-14.826 22.887-27.237Z"
Expand All @@ -31,6 +33,8 @@ const Hero = () => {
viewBox="0 0 92 80"
fill="none"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-hidden
>
<path
d="m35.213 16.953.595-5.261 2.644 4.587a35.056 35.056 0 0 0 26.432 17.33l5.261.594-4.587 2.644A35.056 35.056 0 0 0 48.23 63.28l-.595 5.26-2.644-4.587a35.056 35.056 0 0 0-26.432-17.328l-5.261-.595 4.587-2.644a35.056 35.056 0 0 0 17.329-26.433Z"
Expand Down
17 changes: 12 additions & 5 deletions src/components/main-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export default function MainCard({
required
/>
<Button
tabIndex={0}
type="submit"
className="border-[3px] border-black bg-purple-400 p-4 px-4 text-base text-black shadow-[4px_4px_0_0_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:transform hover:bg-purple-400 sm:p-6 sm:px-6 sm:text-lg"
>
Expand Down Expand Up @@ -136,12 +137,13 @@ export default function MainCard({
? "bg-purple-400"
: "bg-purple-300 hover:bg-purple-400"
}`}
tabIndex={0}
>
<span>Customize Diagram</span>
{activeDropdown === "customize" ? (
<ChevronUp size={20} />
<ChevronUp size={20} role="img" aria-label="Customize Diagram"/>
) : (
<ChevronDown size={20} />
<ChevronDown size={20} role="img" aria-label="Customize Diagram"/>
)}
</button>
)}
Expand All @@ -158,22 +160,24 @@ export default function MainCard({
? "bg-purple-400"
: "bg-purple-300 hover:bg-purple-400"
}`}
tabIndex={0}
>
<span>Export Diagram</span>
{activeDropdown === "export" ? (
<ChevronUp size={20} />
<ChevronUp size={20} role="img" aria-label="Export Diagram"/>
) : (
<ChevronDown size={20} />
<ChevronDown size={20} role="img" aria-label="Export Diagram"/>
)}
</button>
</div>
)}
{lastGenerated && (
<>
<label className="font-medium text-black">
<label className="font-medium text-black" htmlFor="zoom-toggle">
Enable Zoom
</label>
<Switch
id="zoom-toggle"
checked={zoomingEnabled}
onCheckedChange={onZoomToggle}
/>
Expand Down Expand Up @@ -224,6 +228,7 @@ export default function MainCard({
variant="outline"
className="border-2 border-black bg-purple-400 text-sm text-black transition-transform hover:-translate-y-0.5 hover:transform hover:bg-purple-300 sm:text-base"
onClick={(e) => handleExampleClick(path, e)}
tabIndex={0}
>
{name}
</Button>
Expand All @@ -239,6 +244,8 @@ export default function MainCard({
className="h-20 w-20 fill-sky-400 text-black"
strokeWidth={0.6}
style={{ transform: "rotate(-15deg)" }}
role="img"
aria-hidden
/>
</div>
</Card>
Expand Down