fix: react-doctor 71→73 (skeleton td aria-hidden, AdminToggle aria-label)

This commit is contained in:
Nora
2026-06-26 04:57:11 -06:00
parent df7b65531a
commit a78b0ab630
5 changed files with 31 additions and 30 deletions
@@ -413,7 +413,7 @@ export default function BillingClientPage({ overview }: Props) {
); );
})} })}
<tr className="border-t-2 border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]"> <tr className="border-t-2 border-[var(--admin-border)] bg-[var(--admin-bg-subtle)]">
<td className="pt-4 pr-6" /> <td className="pt-4 pr-6" aria-hidden="true" />
{(["starter", "farm", "enterprise"] as const).map((tier) => { {(["starter", "farm", "enterprise"] as const).map((tier) => {
const isCurrent = tier === planTier; const isCurrent = tier === planTier;
return ( return (
+12 -12
View File
@@ -100,23 +100,23 @@ function ContactSkeleton() {
<> <>
{[1, 2, 3, 4, 5].map((i) => ( {[1, 2, 3, 4, 5].map((i) => (
<tr key={i} className="border-b border-[var(--admin-border)]" aria-hidden="true"> <tr key={i} className="border-b border-[var(--admin-border)]" aria-hidden="true">
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-4 w-24 bg-stone-200 rounded animate-pulse" /> <div className="h-4 w-24 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-4 w-32 bg-stone-200 rounded animate-pulse" /> <div className="h-4 w-32 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-4 w-20 bg-stone-200 rounded animate-pulse" /> <div className="h-4 w-20 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-16 bg-stone-200 rounded-full animate-pulse" /> <div className="h-5 w-16 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-4 w-16 bg-stone-200 rounded animate-pulse" /> <div className="h-4 w-16 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-4 w-12 bg-stone-200 rounded animate-pulse" /> <div className="h-4 w-12 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
</tr> </tr>
))} ))}
+12 -12
View File
@@ -130,23 +130,23 @@ function LogSkeleton() {
<> <>
{[1, 2, 3, 4, 5].map((i) => ( {[1, 2, 3, 4, 5].map((i) => (
<tr key={i} className="border-b border-[var(--admin-border)]" aria-hidden="true"> <tr key={i} className="border-b border-[var(--admin-border)]" aria-hidden="true">
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-20 bg-stone-200 rounded animate-pulse" /> <div className="h-3 w-20 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-32 bg-stone-200 rounded animate-pulse" /> <div className="h-3 w-32 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-14 bg-stone-200 rounded-full animate-pulse" /> <div className="h-5 w-14 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-3 w-40 bg-stone-200 rounded animate-pulse" /> <div className="h-3 w-40 bg-stone-200 rounded animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-20 bg-stone-200 rounded-full animate-pulse" /> <div className="h-5 w-20 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3" aria-hidden="true">
<div className="h-5 w-24 bg-stone-200 rounded-full animate-pulse" /> <div className="h-5 w-24 bg-stone-200 rounded-full animate-pulse" aria-hidden="true" />
</td> </td>
</tr> </tr>
))} ))}
@@ -84,6 +84,7 @@ export function AdminToggleCompact({
<button <button
type="button" type="button"
role="switch" role="switch"
aria-label={label ?? "Toggle"}
aria-checked={checked} aria-checked={checked}
disabled={disabled} disabled={disabled}
onClick={() => !disabled && onChange(!checked)} onClick={() => !disabled && onChange(!checked)}
+5 -5
View File
@@ -733,11 +733,11 @@ export default function WaterAdminClient() {
{initialLoading ? ( {initialLoading ? (
Array.from({ length: 8 }).map((_, i) => ( Array.from({ length: 8 }).map((_, i) => (
<tr key={i} aria-hidden="true"> <tr key={i} aria-hidden="true">
<td className="py-3"><div className="h-3 w-20 bg-stone-100 rounded animate-pulse" /></td> <td className="py-3" aria-hidden="true"><div className="h-3 w-20 bg-stone-100 rounded animate-pulse" aria-hidden="true" /></td>
<td className="py-3"><div className="h-3 w-16 bg-stone-100 rounded animate-pulse hidden sm:table-cell" /></td> <td className="py-3" aria-hidden="true"><div className="h-3 w-16 bg-stone-100 rounded animate-pulse hidden sm:table-cell" aria-hidden="true" /></td>
<td className="py-3"><div className="h-3 w-14 bg-stone-100 rounded animate-pulse" /></td> <td className="py-3" aria-hidden="true"><div className="h-3 w-14 bg-stone-100 rounded animate-pulse" aria-hidden="true" /></td>
<td className="py-3"><div className="h-3 w-10 bg-stone-100 rounded animate-pulse ml-auto" /></td> <td className="py-3" aria-hidden="true"><div className="h-3 w-10 bg-stone-100 rounded animate-pulse ml-auto" aria-hidden="true" /></td>
<td className="py-3"><div className="h-5 w-8 bg-stone-100 rounded animate-pulse ml-auto" /></td> <td className="py-3" aria-hidden="true"><div className="h-5 w-8 bg-stone-100 rounded animate-pulse ml-auto" aria-hidden="true" /></td>
</tr> </tr>
)) ))
) : filteredEntries.length === 0 ? ( ) : filteredEntries.length === 0 ? (