fix(a11y): add aria attributes to TokenStep

Author: d3v-active

frontend/src/components/stream-creation/TokenStep.tsx

@@ -21,19 +21,26 @@ export const TokenStep: React.FC<TokenStepProps> = ({
   return (
     <div className="space-y-4">
       <div>
-        <h3 className="text-xl font-semibold mb-2">Select Token</h3>
+        <h3 id="token-group-label" className="text-xl font-semibold mb-2">Select Token</h3>
         <p className="text-sm text-slate-400 mb-4">
           Choose the token you want to stream to the recipient.
         </p>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div 
+        className="grid grid-cols-1 md:grid-cols-3 gap-4"
+        role="radiogroup"
+        aria-labelledby="token-group-label"
+        aria-describedby={error ? "token-error" : undefined}
+      >
         {TOKENS.map((token) => {
           const isSelected = value === token.id;
           return (
             <button
               key={token.id}
               type="button"
+              role="radio"
+              aria-checked={isSelected}
               onClick={() => onChange(token.id)}
               className={`p-4 rounded-lg border-2 transition-all text-left ${
                 isSelected
@@ -68,6 +75,7 @@ export const TokenStep: React.FC<TokenStepProps> = ({
 
       {error && (
         <p
+          id="token-error"
           className="mt-2 text-sm text-red-400 flex items-center gap-1"
           role="alert"
         >