v6: Give the tab close button hover and focus states (#4420)

## Summary

The tab close button (`.graphiql-tab-close`) only changed text color on
hover: no background, no rounded corners, no transition, and no
`:focus-visible` outline. It's a keyboard-focusable button, so tabbing
to it left no visible focus indicator at all. That's an accessibility
gap, and it was the one icon button in the app that didn't match the
hover/focus pattern used everywhere else: the activity rail, toolbar
buttons, and the dialog close button. It now follows that same pattern.

## Test plan

- [x] Open several editor tabs, keyboard-Tab to a tab's close (✕)
button, and confirm it shows a clear blue focus ring.
- [x] Hover the close button and confirm a subtle background appears
behind it with rounded corners.
- [x] Click the close button and confirm the tab still closes as before.
- [x] Check both Dark and Light themes. The hover background and focus
ring should be legible in each.

Refs: #4219

Author: trevor-scheer

packages/graphiql-react/src/components/tabs/index.css

@@ -89,6 +89,10 @@
     padding: var(--px-4);
     color: oklch(var(--fg-muted));
     line-height: 0;
+    border-radius: var(--radius-sm);
+    transition:
+      color 120ms ease,
+      background 120ms ease;
 
     & > svg {
       height: var(--icon-size-sm);
@@ -97,6 +101,12 @@
 
     &:hover {
       color: oklch(var(--fg-default));
+      background: oklch(var(--bg-overlay));
+    }
+
+    &:focus-visible {
+      outline: 2px solid oklch(var(--accent-blue));
+      outline-offset: 2px;
     }
   }