UI Design System & A11y Auditor

I have audited DashboardCard.tsx. I replaced 4 arbitrary spacing values with standard Tailwind tokens, updated the badge colors to meet 4.5:1 contrast requirements, and refactored the delete action from a div to a semantic button with proper focus states.

Design System & A11y Audit Report

import React from 'react';

export const DashboardCard = ({ title, status, onDelete }) => {
  return (
    <div className="p-5 bg-white border border-slate-200 rounded-xl shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
        <span className="px-2.5 py-0.5 text-xs font-medium rounded-full bg-emerald-100 text-emerald-900">
          {status}
        </span>
      </div>
      
      <div className="flex justify-end gap-3">
        <button
          type="button"
          onClick={onDelete}
          aria-label={`Delete ${title}`}
          className="inline-flex items-center justify-center p-2 text-slate-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2 disabled:opacity-50"
        >
          <TrashIcon className="w-5 h-5" aria-hidden="true" />
        </button>
      </div>
    </div>
  );
};

Next steps

• Verify the emerald-900 text color aligns with your brand's specific green token.
• Run a keyboard tab-through test to ensure the focus ring contrast is visible against your site background.
• Confirm if the delete action requires an aria-haspopup for a confirmation modal.