Build Accessible Data-Loading Popovers for Multiple Buttons

A page displays three numbered buttons. Selecting a button opens its corresponding floating panel, fetches data for that item, renders loading, success, empty, and error states, and allows the panel to close. Explain the component design and the details needed to match a supplied visual specification accessibly. ### Constraints & Assumptions - Each button maps to a distinct item ID. - Requests may finish out of order or after a panel is closed. - Keyboard and screen-reader interaction must work, not only pointer clicks. - The layout should adapt when there is not enough space around the trigger. ### Clarifying Questions to Ask - May more than one panel be open at a time? - Should fetched data be cached when a panel is reopened? - Does clicking outside or pressing Escape close the panel? ### What a Strong Answer Covers - A small data model for active panel, per-item request state, and cached results. - Request cancellation or stale-response guards. - Popover positioning, focus management, ARIA relationships, keyboard behavior, and close semantics. - Reusable button and panel components with visual states driven by tokens rather than duplicated markup. - Tests for interaction, race conditions, accessibility, responsive placement, and failed requests. ### Follow-up Questions - How would you keep the panel aligned while the page scrolls or resizes? - How would you prefetch without loading all three items unnecessarily? - What test catches a late response overwriting the data for a newly selected button?