added aria label to help screen reader

PriDebnath · PriDebnath · commit 7b61ac255a60 · 2026-03-23T16:46:16.000+05:30
diff --git a/frontend/src/components/common/table-select.tsx b/frontend/src/components/common/table-select.tsx
@@ -84,7 +84,11 @@ const TableSelect = ({ editor }: TableSelectProps) => {
     >
       <DropdownMenuTrigger asChild>
 
-        <Button variant="ghost" className="text-primary-text" type="button">
+        <Button 
+          aria-label='table-select'
+        variant="ghost"
+         className="text-primary-text"
+          type="button">
           <Table /> Table
           <ChevronDown />
         </Button>
diff --git a/frontend/src/components/common/tiptap-toolbar-button.tsx b/frontend/src/components/common/tiptap-toolbar-button.tsx
@@ -18,6 +18,7 @@ export function ToolbarButton({
   return (
     <Button
       title={title}
+      aria-label={title}
       disabled={disabled}
       data-active-state={active ? 'on' : 'off'}
       onClick={onClick}
diff --git a/frontend/src/components/ui/button-loader.tsx b/frontend/src/components/ui/button-loader.tsx
@@ -6,6 +6,8 @@ function ButtonLoader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <Button
       variant="outline"
+      aria-label='button-loader'
+      title='button-loader'
       disabled
       className="gap-2 opacity-70"
     >
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
@@ -105,6 +105,7 @@ function InputGroupButton({
   VariantProps<typeof inputGroupButtonVariants>) {
   return (
     <Button
+      aria-label="input-group"
       type={type}
       data-size={size}
       variant={variant}
diff --git a/frontend/src/feature/quote/dialog/component/copy-image-button.tsx b/frontend/src/feature/quote/dialog/component/copy-image-button.tsx
@@ -40,6 +40,7 @@ export const CopyImageButton = (props: Props) => {
             <Button
                 variant="outline"
                 size="sm"
+                aria-label="image-copy"
                 onClick={async (e) => {
                     e.preventDefault()
                     handleImageCopy()
diff --git a/frontend/src/feature/quote/dialog/component/copy-text-button.tsx b/frontend/src/feature/quote/dialog/component/copy-text-button.tsx
@@ -31,6 +31,7 @@ export const CopyTextButton = (props: Props) => {
     <div className="flex flex-col gap-2 items-center">
       <Button
         variant="outline"
+        aria-label="copy-text"
         size="sm"
         className={buttonClassName}
         onClick={(e) => {
diff --git a/frontend/src/feature/quote/dialog/component/share-button.tsx b/frontend/src/feature/quote/dialog/component/share-button.tsx
@@ -81,6 +81,7 @@ export const ShareButton = (props: Props) => {
             <Button
                 variant="outline"
                 size="sm"
+                aria-label="share"
                 onClick={async (e) => {
                     e.preventDefault()
                     handleShare()
diff --git a/frontend/src/feature/quote/dialog/delete.dialog.tsx b/frontend/src/feature/quote/dialog/delete.dialog.tsx
@@ -53,13 +53,13 @@ function DeleteQuoteDialog(props: Props) {
             {/* <DialogClose asChild>
               <Button variant="outline">Close</Button>
             </DialogClose> */}
-            <Button 
-            type="submit"
-             onClick={handleFormSubmit}
-             aria-label="delete"
-              variant={'destructive'} 
+            <Button
+              type="submit"
+              onClick={handleFormSubmit}
+              aria-label="delete"
+              variant={'destructive'}
               className="">
-              Delete Quote
+              Delete
             </Button>
           </DialogFooter>
         </DialogContent>
diff --git a/frontend/src/feature/quote/dialog/setting.dialog.tsx b/frontend/src/feature/quote/dialog/setting.dialog.tsx
@@ -47,10 +47,10 @@ function SettingComponent(props: Props) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}
-    
+
     >
       <DialogTrigger asChild
-      aria-label="settings-button">
+        aria-label="settings-button">
         <Button
           variant="outline"
           size="icon"
@@ -60,10 +60,10 @@ function SettingComponent(props: Props) {
         </Button>
       </DialogTrigger>
 
-      <DialogContent 
-      className="p-4 gap-2  max-h-[90vh] overflow-auto"
-       aria-describedby="Settings"
-       aria-label="settings">
+      <DialogContent
+        className="p-4 gap-2  max-h-[90vh] overflow-auto"
+        aria-describedby="Settings"
+        aria-label="settings">
         <DialogHeader>
           <DialogTitle>Settings</DialogTitle>
           <DialogDescription>
@@ -230,5 +230,5 @@ function SettingComponent(props: Props) {
   );
 }
 
-export  default memo(SettingComponent)
+export default memo(SettingComponent)
 
diff --git a/frontend/src/feature/quote/dialog/share.dialog.tsx b/frontend/src/feature/quote/dialog/share.dialog.tsx
@@ -62,7 +62,10 @@ export function ShareBackground(props: Props) {
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
-        <Button variant="outline" size="icon"
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="share"
           className={
             cn(
               open ? "text-primary" : ""
diff --git a/frontend/src/feature/quote/drawer/choose-background.drawer.tsx b/frontend/src/feature/quote/drawer/choose-background.drawer.tsx
@@ -42,6 +42,7 @@ export default function ChooseBackground(props: Props) {
     >
       <DrawerTrigger asChild>
         <Button variant="outline" size="icon"
+        aria-label="change-background"
           className={
             cn(
               open ? "text-primary" : ""
@@ -94,6 +95,7 @@ export default function ChooseBackground(props: Props) {
                 const [key, value] = textureObj
                 return (
                   <button
+                  aria-label={key}
                     key={key}
                     onClick={() => handleTextureClick(key as TextureKey)}
                     className={`w-28 h-20 rounded-lg shrink-0  focus:outline-none ${selectedTexture === key ? "ring-2 ring-primary" : "border"
diff --git a/frontend/src/feature/quote/dropdown/choose-tag.tsx b/frontend/src/feature/quote/dropdown/choose-tag.tsx
@@ -89,7 +89,7 @@ export function ChooseTagDropdown(props: Props) {
                 aria-label="add-tag"
             >
                 <Button
-
+aria-label="choose-tag"
                     variant="outline"
                     size="icon"
                     className={
diff --git a/frontend/src/feature/quote/popover/filter.popover.tsx b/frontend/src/feature/quote/popover/filter.popover.tsx
@@ -29,7 +29,9 @@ export default function  TagFilter({ tags, value, onChange }: TagFilterProps) {
   return (
     <Popover  open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild  aria-label="open-filter">
-        <Button variant="outline" className={
+        <Button variant="outline" 
+        aria-label="filter"
+        className={
           cn(
             "gap-2 relative",
           )}
diff --git a/frontend/src/feature/quote/sheet/chat-setting.tsx b/frontend/src/feature/quote/sheet/chat-setting.tsx
@@ -26,7 +26,7 @@ const ChatSetting = (props: Props) => {
             <form aria-label="delete-note-form">
 
                 <DialogTrigger asChild>
-                    <Button variant="outline" size={'sm'}>
+                    <Button variant="outline" aria-label="chat-setting" size={'sm'}>
                         <Settings />
                     </Button>
                 </DialogTrigger>
@@ -54,7 +54,7 @@ const ChatSetting = (props: Props) => {
                                 setKey(event.target.value)
                             }}
                         />
-                          <Button onClick={()=>setIsInputType((pre)=>!pre)}>
+                          <Button aria-label="show-hide-key" onClick={()=>setIsInputType((pre)=>!pre)}>
                                     {isInputType? <Eye />: <EyeClosed />}
                                 </Button>
                         </Field>
diff --git a/frontend/src/feature/quote/sheet/chat.sheet.tsx b/frontend/src/feature/quote/sheet/chat.sheet.tsx
@@ -19,7 +19,7 @@ import { BotMessageSquare, Send, X } from "lucide-react"
 import ChatMessage from "@/feature/quote/sheet/chat-message"
 import type { ContentChatMessage } from "@/model/index.model"
 import { useEffect, useRef, useState, type ChangeEvent } from "react"
-import {  useAiContentStream } from "@/api-hook/ai-content-stream.hook"
+import { useAiContentStream } from "@/api-hook/ai-content-stream.hook"
 import ChatSetting from "./chat-setting"
 
 interface Props {
@@ -87,6 +87,7 @@ export function ChatSheet(props: Props) {
             <Sheet key={'right'} open={open} onOpenChange={setOpen} >
                 <SheetTrigger asChild>
                     <Button
+                        aria-label="chat-button"
                         variant="outline"
                         size="icon"
                         className={
@@ -98,26 +99,26 @@ export function ChatSheet(props: Props) {
                     </Button>
                 </SheetTrigger>
                 <SheetContent
-                showCloseButton={false}
+                    showCloseButton={false}
                     side={'right'}
                     className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
                 >
                     <SheetHeader>
                         <SheetTitle className="flex  items-center">
                             <div className="flex justify-between items-center w-full ">
-                                <div  className="flex items-center gap-2">   
-                                      <BotMessageSquare
-                                    className={
-                                        cn(
-                                            open ? "text-primary" : ""
-                                        )} />
+                                <div className="flex items-center gap-2">
+                                    <BotMessageSquare
+                                        className={
+                                            cn(
+                                                open ? "text-primary" : ""
+                                            )} />
                                     <span className="">Chat</span>
                                 </div>
                                 <div className="flex items-center gap-2">
-                                                                    <ChatSetting />
- <SheetClose asChild>
-                             <Button variant="outline" size={'sm'}><X/></Button> 
-                        </SheetClose> 
+                                    <ChatSetting />
+                                    <SheetClose asChild>
+                                        <Button variant="outline" size={'sm'}><X /></Button>
+                                    </SheetClose>
                                 </div>
 
                             </div>
@@ -150,18 +151,18 @@ export function ChatSheet(props: Props) {
 
                     </div>
                     <SheetFooter>
-                        <form 
-                        onSubmit={(e) => {
-                            e.preventDefault()
-                            handleSummrise()
-                        }
-                        } 
-                        className="" >
+                        <form
+                            onSubmit={(e) => {
+                                e.preventDefault()
+                                handleSummrise()
+                            }
+                            }
+                            className="" >
                             <Field orientation="horizontal">
                                 <Input
-                                autoFocus
-                                 type="text" 
-                                placeholder="Summrize the conent..."
+                                    autoFocus
+                                    type="text"
+                                    placeholder="Summrize the conent..."
                                     value={userQuery}
                                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
                                         setUserQuery(event.target.value)
diff --git a/frontend/src/page/quote/quote-list/quote-list.page.tsx b/frontend/src/page/quote/quote-list/quote-list.page.tsx
@@ -160,6 +160,8 @@ export function QuoteListPage() {
         <Link to="/new" title='new' aria-label="new" >
           <Button
             size="icon-lg"
+            aria-label='add-note'
+            title='add-note'
             className="fixed bottom-8  -translate-x-8 rounded-full aspect-square scale-150"
           >
             <PlusIcon />
diff --git a/frontend/src/page/quote/quote/quote.page.tsx b/frontend/src/page/quote/quote/quote.page.tsx
@@ -194,7 +194,9 @@ export function QuotePage(props: Props) {
               aria-label="link-to-home"
               className='flex items-center gap-2'
             >
-              <Button variant="outline" size="icon">
+              <Button variant="outline" size="icon"
+                aria-label='go-to-home'
+                title='go-to-home'>
                 <ArrowLeftIcon />
               </Button>
             </Link>
@@ -213,7 +215,7 @@ export function QuotePage(props: Props) {
             </div>
           </div>
 
-          {isLoading && <div aria-label="loading" ><EditorSkeleton/></div>}
+          {isLoading && <div aria-label="loading" ><EditorSkeleton /></div>}
 
           {error && <div aria-label="error" className="text-destructive">Error: {error}</div>}
 
@@ -229,7 +231,7 @@ export function QuotePage(props: Props) {
                     {/*
                     <Label htmlFor="name-1">Quote</Label>
                     */}
-                    <Suspense fallback={<EditorSkeleton/>}>
+                    <Suspense fallback={<EditorSkeleton />}>
                       <div aria-label="editor" >
                         <Tiptap
                           key={quoteData?.id ?? "new"}

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,8 @@ function ButtonLoader({ className, ...props }: React.ComponentProps<"div">) {`
`6`	`6`	`return (`
`7`	`7`	`<Button`
`8`	`8`	`variant="outline"`
	`9`	`+ aria-label='button-loader'`
	`10`	`+ title='button-loader'`
`9`	`11`	`disabled`
`10`	`12`	`className="gap-2 opacity-70"`
`11`	`13`	`>`