Improve tab navigation and VoiceOver and labels on plan selection page

[gcsecsey]

Fixes DOTCOM-13540 Improve tab navigation and VoiceOver and labels on plan selection page

Proposed Changes

This PR improves the accessibility of the plan selection page by:

1. Fixing the tab navigation order to ensure users can select storage options before proceeding to the plan selection buttons

   • Storage dropdown now has tabIndex={1}
   • Plan selection buttons now have tabIndex={2}
   • This ensures users can configure their storage preferences before making a plan selection

2. Improving VoiceOver labels for better clarity

   • Added proper ARIA labels to plan selection buttons
   • Storage dropdown now has a descriptive label: "Storage options for this plan"

Why are these changes being made?

Currently when using tab navigation, user goes from "Get Business" to "Get Commerce" and the storage selection is skipped.

Testing Instructions

• Checkout this branch or use the Calypso live link
• Add a new site and navigate to to the plans grid
• Start Voiceover
• Tab throught the page and check that the storage dropdowns are stepped onto before the plan buttons
• Tab through the plan buttons and check that for each plan VoiceOver announces "Get {plan} name" when on the button

https://github.com/user-attachments/assets/2ae8c280-2831-4eb3-8c5b-7ff28de60660

Pre-merge Checklist

• [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
• [ ] Have you written new tests for your changes?
• [ ] Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• [ ] Have you checked for TypeScript, React or other console errors?
• [ ] Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
• [ ] Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• [ ] Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • [ ] For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• [ ] For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?