Skip to content

fix(a11y): resolve generic Action button ARIA labels across the application #688

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

Open
just-tanvi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(a11y): resolve generic Action button ARIA labels across the application #688

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
115 changes: 10 additions & 105 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion public/sw.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 1 addition & 6 deletions src/app/admin/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,6 @@ export default function AdminEventsPage() {
<div className="flex justify-between items-center mb-8">
<h1 className="text-3xl font-bold">Manage Events</h1>
<button
aria-label="Action button"
onClick={() => {
setEditingEvent(null);
setFormData({
Expand Down Expand Up @@ -174,14 +173,12 @@ export default function AdminEventsPage() {
</div>
<div className="flex gap-2 mt-4 pt-4 border-t border-border">
<button
aria-label="Action button"
onClick={() => handleEdit(event)}
className="flex-1 flex items-center justify-center gap-1 text-sm bg-muted hover:bg-muted/80 py-2 rounded"
>
<Edit2 size={14} /> Edit
</button>
<button
aria-label="Action button"
onClick={() => handleDelete(event.id)}
className="flex-1 flex items-center justify-center gap-1 text-sm bg-red-500/10 text-red-500 hover:bg-red-500/20 py-2 rounded"
>
Expand All @@ -202,7 +199,7 @@ export default function AdminEventsPage() {
{editingEvent ? 'Edit Event' : 'New Event'}
</h3>
<button
aria-label="Action button"
aria-label="Close modal"
onClick={() => setIsModalOpen(false)}
>
<X size={24} />
Expand Down Expand Up @@ -292,15 +289,13 @@ export default function AdminEventsPage() {
</div>
<div className="flex justify-end gap-2 pt-4">
<button
aria-label="Action button"
type="button"
onClick={() => setIsModalOpen(false)}
className="px-4 py-2 rounded-lg hover:bg-muted"
>
Cancel
</button>
<button
aria-label="Action button"
type="submit"
className="px-4 py-2 bg-primary text-primary-foreground rounded-lg"
>
Expand Down
4 changes: 0 additions & 4 deletions src/app/ap/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@ export default function SuperAdminLogin() {
You must be logged in with a Super Admin account to access this page.
</p>
<button
aria-label="Action button"
onClick={() => router.push('/')}
className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
>
Expand Down Expand Up @@ -144,15 +143,13 @@ export default function SuperAdminLogin() {
{/* Actions */}
<div className="flex flex-col sm:flex-row gap-3 justify-center">
<button
aria-label="Action button"
onClick={() => router.back()}
className="flex items-center justify-center gap-2 px-5 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm font-medium rounded-lg transition-colors"
>
<ArrowLeft size={15} />
Go Back
</button>
<button
aria-label="Action button"
onClick={() => router.push('/')}
className="flex items-center justify-center gap-2 px-5 py-2.5 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors"
>
Expand Down Expand Up @@ -210,7 +207,6 @@ export default function SuperAdminLogin() {
)}

<button
aria-label="Action button"
type="submit"
disabled={loading}
className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
Expand Down
7 changes: 1 addition & 6 deletions src/app/community/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,6 @@ export default function CommunityPage() {
<div className="flex items-center gap-3">
{activeTab === 'discussions' && (
<button
aria-label="Action button"
onClick={() => {
if (!user) {
alert('Please login to start a discussion.');
Expand All @@ -154,7 +153,6 @@ export default function CommunityPage() {
{/* Tabs */}
<div className="flex border-b border-border mb-8">
<button
aria-label="Action button"
onClick={() => setActiveTab('discussions')}
className={`flex items-center gap-2 px-6 py-3 border-b-2 transition-colors ${
activeTab === 'discussions'
Expand All @@ -165,7 +163,6 @@ export default function CommunityPage() {
<MessageSquare size={18} /> Discussions
</button>
<button
aria-label="Action button"
onClick={() => setActiveTab('showcase')}
className={`flex items-center gap-2 px-6 py-3 border-b-2 transition-colors ${
activeTab === 'showcase'
Expand All @@ -182,14 +179,12 @@ export default function CommunityPage() {
<div className="flex justify-end mb-6">
<div className="flex bg-gray-200 dark:bg-white/5 rounded-lg p-1">
<button
aria-label="Action button"
onClick={() => setSortOption('newest')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-all mr-1 ${sortOption === 'newest' ? 'bg-background shadow-sm text-foreground' : 'text-foreground hover:bg-slate-200 dark:hover:bg-white/5'}`}
>
Newest
</button>
<button
aria-label="Action button"
onClick={() => setSortOption('popular')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-all ${sortOption === 'popular' ? 'bg-background shadow-sm text-foreground' : 'text-foreground hover:bg-slate-200 dark:hover:bg-white/5'}`}
>
Expand Down Expand Up @@ -311,7 +306,7 @@ export default function CommunityPage() {
{selectedProject.title}
</h2>
<button
aria-label="Action button"
aria-label="Close modal"
onClick={() => setSelectedProject(null)}
className="p-2 hover:bg-muted rounded-full transition-colors"
>
Expand Down
10 changes: 2 additions & 8 deletions src/app/community/view/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,6 @@ export default function DiscussionViewClient() {
<div className="min-h-screen bg-background text-foreground pt-24 pb-12">
<div className="container mx-auto px-4 max-w-4xl">
<button
aria-label="Action button"
onClick={() => router.push('/community')}
className="flex items-center gap-2 text-muted-foreground hover:text-foreground mb-6 transition-colors"
>
Expand Down Expand Up @@ -312,7 +311,6 @@ export default function DiscussionViewClient() {
<div className="flex items-center gap-4">
<div className="relative">
<button
aria-label="Action button"
onClick={() => setShowReactionPicker(!showReactionPicker)}
className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-border hover:bg-muted transition-colors text-sm"
>
Expand All @@ -324,7 +322,7 @@ export default function DiscussionViewClient() {
<div className="absolute bottom-full left-0 mb-2 bg-card border border-border rounded-xl shadow-lg p-2 flex gap-2 animate-in fade-in zoom-in-95 z-10">
{REACTIONS.map((reaction) => (
<button
aria-label="Action button"
aria-label={reaction.label}
key={reaction.emoji}
onClick={() => handleReaction(reaction.emoji)}
className="p-2 hover:bg-muted rounded-lg transition-colors text-xl"
Expand All @@ -343,7 +341,7 @@ export default function DiscussionViewClient() {
const reaction = REACTIONS.find((r) => r.emoji === emoji);
return (
<button
aria-label="Action button"
aria-label={`${reaction?.label || emoji} reaction`}
key={emoji}
onClick={() => handleReaction(emoji)}
className={`flex items-center gap-1 px-2 py-1 rounded-full border text-xs transition-colors ${
Expand All @@ -367,7 +365,6 @@ export default function DiscussionViewClient() {
<span>{replies.length} replies</span>
</div>
<button
aria-label="Action button"
onClick={handleShare}
className="flex items-center gap-2 hover:text-foreground transition-colors"
>
Expand Down Expand Up @@ -425,15 +422,13 @@ export default function DiscussionViewClient() {
<h4 className="font-semibold">Leave a reply</h4>
<div className="flex bg-secondary border border-border/30 rounded-lg p-1">
<button
aria-label="Action button"
type="button"
onClick={() => setReplyTab('write')}
className={`px-3 py-1 text-xs rounded-md transition-all ${replyTab === 'write' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
>
Write
</button>
<button
aria-label="Action button"
type="button"
onClick={() => setReplyTab('preview')}
className={`px-3 py-1 text-xs rounded-md transition-all ${replyTab === 'preview' ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'}`}
Expand Down Expand Up @@ -468,7 +463,6 @@ export default function DiscussionViewClient() {
)}
<div className="flex justify-end">
<button
aria-label="Action button"
type="submit"
disabled={submitting || !newReply.trim()}
className="flex items-center gap-2 px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
Expand Down
Loading
Loading