Downgrade Confirmation Billing Block for React

Constants at the top of the file hold the data. ACCOUNT has the plan you're leaving (from), the plan you're moving to (to, with its limitGb) and the effective date as an ISO string, normally the end of the paid period. LIMITS lists each limit as a label with its before and after text, and FOLDERS lists what's stored: name, size in GB, when it was opened, and fixed for anything that can't be archived. The total, the archived size and what's over are all worked out from these.

Each checkbox marks a folder to archive. The meter and the line under it add up the storage left after archiving against the new plan's limit: with nothing checked it says how far over you are, and once enough is archived it says how many gigabytes are to spare. Nothing is blocked either way; what stays over the limit becomes read-only, and the dialog says how many folders will be archived. Wire the archive choices into your downgrade request in confirm.

The button opens an alert dialog, and focus lands in its field, labelled "Type downgrade to confirm". The Downgrade action stays disabled until the field reads the word, in any capitals. Escape or "Keep Pro" closes the dialog, focus returns to the button, and the field is empty the next time it opens. Confirming closes the dialog and the main button keeps focus, now reading "Downgrade scheduled" while it's dimmed and aria-disabled; "Cancel downgrade" appears beside it, and using it hands focus back to the main button.

The section starts with an h2. Each limit is a list item whose before and after are joined by a hidden "becomes", and the arrows are decorative. The folders are a group named "Folders to archive", and each checkbox is named by its folder and size and described by when it was last opened, so a keyboard user can tick them with Space. The meter's numbers are in text under it, and the bar itself is hidden from assistive technology. A polite live region announces when the downgrade is scheduled.

The bands stack in one column: the plan change, what you lose, then the folders, with the two buttons at the bottom. The folder cards are compact, and the note about members is left out, so the main button is reached within about a screen and a half. In the dialog the two buttons stack.