Benefits Enrollment Cost Success Block for React

Nobody was enrolled. The three plans, the people and their prices are typed sample data, and the download is a small sample file, named so, with a polite status line to say it was saved. To wire it, build PLANS from the elections your benefits system returns (each with its yearly premium in cents and the employer's share in basis points), set AS_OF, CLOSES and STARTS from the plan year and send the summary from your own export.

From the premium and the share. Each plan's yearly premium is split by the employer's share in basis points (8,000 is 80%), then divided by the 24 pay periods a year and rounded to a whole cent, and the totals are sums of those rows, so the table, the heading's sentence and the downloaded file always say the same amounts. Everything is in integer cents until it is written out.

It is an ordered list of twelve cells, one per week, in left-to-right order whatever the page's direction. Each starts on a Monday counted from the week of the typed AS_OF, and the cell holding the deadline and the cell holding the start day carry the words "Closes" and "Starts"; a screen reader hears the same after each date. Shading only repeats the words: the weeks in which changes are still allowed are shaded and the deadline's cell has a heavier edge, and the first day of cover is a solid cell.

It's a native table on every base with a caption for assistive technology, column headings and each plan's name as a row heading, inside a scrollable named region. The people a plan covers are initials in a list with their full names hidden for sighted readers.

Yes, both use what the browser offers. The Copy Button writes the confirmation code to the clipboard and a screen reader hears "Confirmation code copied" (or that the clipboard refused, which happens on a page not served over HTTPS); the Download Trigger builds a small text file from the typed plans and saves it.

The cells stack in reading order: the message first, with the primary and the download beside it (the download shrinks to an icon button named Download summary), so the primary is on the first screen, then the ledger, then the weeks in two rows of six. The ledger drops its employer column and its visible column headings (both stay for screen readers), and each plan's employer share moves beside who it covers.