Implement accessibility features

My page needs to meet basic accessibility requirements before the sprint demo. Add keyboard focus order to the form on the checkout page, ensure ARIA labels read the product name and price for the screen reader, and make the modal dismissible with Escape and by clicking outside. Test with VoiceOver on macOS and Tab navigation and report any remaining failures by Thursday.

Before I hand this to QA, make the accessibility fixes obvious to a reviewer: put the product name and price into visible text and into aria-labels, surface the current focusable element in a high-contrast outline, add a short note at the top explaining the escape/overlay dismiss behavior, and list any interactive bits that still need semantics (e.g., custom sliders).

I just got a bug from Sam in QA: keyboard users can’t reach the promo code field in the checkout flow. The page has custom widgets and a floating sticky header. I’m worried we added tabindex="-1" somewhere or the sticky header is stealing focus. I cannot reproduce reliably on my machine and don’t know which widget intercepts Tab. What's the most likely cause and the fastest fix to restore keyboard order?

Across three releases we keep getting accessibility regressions in checkout and product pages: invisible focus states, missing ARIA on dynamic widgets, and modals that trap focus. We spend hours late in the sprint fixing them. Which two habits should we adopt to stop this bleed — what checks to add to PRs and what small developer workflow change will catch regressions early?