fix: add titles to buttons for better accessibility

Author: atharvaSharma17

src/components/ReportButton.tsx

@@ -10,10 +10,12 @@ export default function ReportButton(){
   const { paperId, subject, exam, slot, year } = usePaper();
   const [open, setOpen] = useState(false);
   return (
-    <>
+    <> 
       <Button
+    
         onClick={() => setOpen(true)}
         className="h-10 w-10 rounded p-0 text-white transition hover:bg-red-600 bg-red-500"
+        title="Report this paper"
       >
         <FaFlag className="text-sm" />
       </Button>

src/components/ShareButton.tsx

@@ -30,7 +30,7 @@ export default function ShareButton() {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]">
+        <Button className="aspect-square h-10 w-10 p-0 rounded text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]" title="Share this paper">
           <FaShare />
         </Button>
       </DialogTrigger>
@@ -47,6 +47,7 @@ export default function ShareButton() {
             type="submit"
             size="sm"
             className="flex w-fit items-center justify-between gap-5 px-3"
+            title="Copy link to clipboard"
             onClick={async () => {
               await toast.promise(
                 navigator.clipboard.writeText(paperPath), // This is a promise

src/components/newPdfViewer.tsx

@@ -114,13 +114,15 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
       <Button
       onClick={toggleFullscreen}
       className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
+      title={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
       {isFullscreen ? <Minimize2 size={24} /> : <Maximize2 size={24} />}
       </Button>
 
       <Button
         onClick={onDownload}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7]"
+        title="Download PDF"
       >
         <Download size={24} />
       </Button>
@@ -131,6 +133,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
         onClick={zoomOut}
         disabled={typeof zoomLevel === "number" && zoomLevel <= 0.25}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7] disabled:bg-gray-400"
+        title="Zoom out"
       >
         <ZoomOut size={24} />
       </Button>
@@ -143,6 +146,7 @@ const Controls = memo(function Controls({documentId, toggleFullscreen, isFullscr
         onClick={zoomIn}
         disabled={typeof zoomLevel === "number" && zoomLevel >= 3}
         className="h-10 w-10 rounded p-0 text-white bg-[#6536c1] transition hover:bg-[#7d4fc7] disabled:bg-gray-400"
+        title="Zoom in"
       >
         <ZoomIn size={24} />
       </Button>