From da847254d56c4198dde2fca8e49aa5c95109245c Mon Sep 17 00:00:00 2001
From: ChloeGarciaMillerand <chloe@garcia.cloud>
Date: Mon, 27 Jul 2026 14:32:41 +0200
Subject: [PATCH] fix: ESLint errors relating to accessibility (alt attribute
 and tableEditor components) (#48186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Improvements for screen readers:
- Added `alt` attributes to image components
- Added `aria-label` attributes and Tooltip to buttons

## What is the current behavior?

`aria-label`, `alt` attributes and Tooltip were missing

## What is the new behavior?

Buttons have now `aria-label` attributes and Tooltip.
Images have `alt` attributes

## Additional context

I’ve added `aria-label` attributes to the buttons in the Pagination.tsx
component, but these buttons don’t trigger any action. Shouldn’t we be
using non-interactive elements here?

No visual changes have been made.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Accessibility**
* Added a tooltip to the “date options” control when the value is
nullable.
* Improved screen-reader labeling by adding an `aria-label` to the
number editor input.
* Added explicit `aria-label` text to pagination footer buttons for
loading, error, and help/estimate states (and marked the error-state
button as disabled).
* **UI**
* Updated the pagination loading-state button to rely on the button’s
built-in loading behavior instead of a custom spinner icon.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
---
 apps/studio/compat/next/image.tsx             |  2 ++
 apps/studio/compat/next/legacy/image.tsx      |  2 ++
 .../grid/components/editor/DateTimeEditor.tsx | 23 +++++++++++++------
 .../grid/components/editor/NumberEditor.tsx   |  1 +
 .../footer/pagination/Pagination.tsx          | 11 ++++-----
 5 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/apps/studio/compat/next/image.tsx b/apps/studio/compat/next/image.tsx
index c0a931a7041..254c15d1750 100644
--- a/apps/studio/compat/next/image.tsx
+++ b/apps/studio/compat/next/image.tsx
@@ -135,6 +135,8 @@ const Image = forwardRef(function Image(
     : style
 
   return (
+    // alt is spread with rest
+    // eslint-disable-next-line jsx-a11y/alt-text
     <img
       {...rest}
       ref={(node) => {
diff --git a/apps/studio/compat/next/legacy/image.tsx b/apps/studio/compat/next/legacy/image.tsx
index da45e196ca3..e5d657cdd8e 100644
--- a/apps/studio/compat/next/legacy/image.tsx
+++ b/apps/studio/compat/next/legacy/image.tsx
@@ -140,6 +140,8 @@ const Image = forwardRef(function Image(
       : undefined
 
   return (
+    // alt is spread with rest
+    // eslint-disable-next-line jsx-a11y/alt-text
     <img
       {...rest}
       ref={(node) => {
diff --git a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
index 741bd38c464..ba286d13537 100644
--- a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
+++ b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
@@ -12,6 +12,9 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { TimestampInfo, timestampLocalFormatter } from 'ui-patterns/TimestampInfo'
@@ -149,13 +152,19 @@ function BaseEditor<TRow, TSummaryRow = unknown>({
                   Set NULL
                 </Button>
                 <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="default"
-                      icon={<ChevronDown />}
-                      className="px-1 rounded-l-none border-l-0"
-                    />
-                  </DropdownMenuTrigger>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          aria-label="Date options"
+                          variant="default"
+                          icon={<ChevronDown />}
+                          className="px-1 rounded-l-none border-l-0"
+                        />
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">Date options</TooltipContent>
+                  </Tooltip>
                   <DropdownMenuContent className="w-20" align="end">
                     <DropdownMenuItem onClick={setToNow}>Set to NOW</DropdownMenuItem>
                   </DropdownMenuContent>
diff --git a/apps/studio/components/grid/components/editor/NumberEditor.tsx b/apps/studio/components/grid/components/editor/NumberEditor.tsx
index 3d5ed3866f1..3ea19bf9b75 100644
--- a/apps/studio/components/grid/components/editor/NumberEditor.tsx
+++ b/apps/studio/components/grid/components/editor/NumberEditor.tsx
@@ -31,6 +31,7 @@ export function NumberEditor<TRow, TSummaryRow = unknown>({
       onChange={onChange}
       onBlur={onBlur}
       type="number"
+      aria-label={`${column.name} value`}
     />
   )
 }
diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
index 49933019828..cd905fdeb60 100644
--- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
+++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
@@ -1,7 +1,7 @@
 import { THRESHOLD_COUNT } from '@supabase/pg-meta'
 import { keepPreviousData } from '@tanstack/react-query'
 import { useParams } from 'common'
-import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react'
+import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
@@ -295,11 +295,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
       </div>
 
       {isLoading ? (
-        <Button
-          variant="text"
-          className="w-7"
-          icon={<Loader2 size={12} className="animate-spin" />}
-        />
+        <Button variant="text" className="w-7" loading aria-label="Get exact row count" />
       ) : isError ? (
         <Tooltip>
           <TooltipTrigger asChild>
@@ -309,6 +305,8 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
               className="w-7"
               loading={isFetching}
               icon={<AlertCircle />}
+              aria-label="Get exact row count"
+              disabled
             />
           </TooltipTrigger>
           <TooltipContent side="top">Failed to retrieve count: {error?.message}</TooltipContent>
@@ -331,6 +329,7 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
                   className="w-7"
                   loading={isFetching}
                   icon={<HelpCircle />}
+                  aria-label="Get exact row count"
                   onClick={() => {
                     // Show warning if either NOT a table entity, or table rows estimate is beyond threshold
                     if (rowsCountEstimate === null || count === -1 || count > THRESHOLD_COUNT) {