Feature Matrix Pricing Block for React

Edit the two arrays at the top of the file. PLANS holds each plan's name, tagline, call to action and href, its monthly price per user (0 shows "Free", null shows "Custom") and popular for the tinted, badged column. GROUPS holds the sections, each with its features: a feature has a name and a value per plan id in values, true for a check, false for a dash, or text for a limit such as "Up to 50". Add a plan and TypeScript points at every feature that still needs a value for it. The counts, the differences filter and the group numbers all read from those arrays.

Both narrow the same list. narrow keeps a feature when it matches the search and, with the switch on, when its values aren't identical on every plan; groups left with no rows disappear. The search is a case-insensitive substring match on the feature's name and its group's name, so "security" shows the whole Security group. Escape clears the field and keeps focus in it. To search the values too, add String(value) checks to the filter in narrow.

Yes, a moment after typing stops: a polite live region says "12 of 28 features" or "No features match", so a screen reader user hears the result of a search without being interrupted on every key. The count in the table's corner is for sighted users and is hidden from assistive technology, so it isn't read twice. The switch is named for what it does ("Show only differences, hiding rows that are the same on every plan").

Each call to action is already a link: point its plan's href at your checkout with the plan in the address (/checkout?plan=plus), and Enterprise's at your sales form, then let your server map the plan to your payment provider's price. The link is render={<a href={plan.href} />} on ShineButton, with nativeButton={false}.

Plan names are column headers, feature names are row headers and each group's name heads the rows under it, so a screen reader reads "Plus, SAML single sign-on, included" rather than an icon: every check and dash carries hidden text. The table is named by the section's heading and each call to action says which plan it's for. The search field has a label, the clear button is named, and every control is reachable in reading order.

The search field takes the full width and the switch sits under it, then a plan switch (a radio group) picks one plan with the popular one selected, and the table shows the feature names beside that plan's column. The call to action is in the first screen, nothing scrolls sideways, and filtering works exactly as on a desktop. The full table and the one-plan table are rendered from the same data, and the one not in use is display: none, so assistive technology meets only one.