Reading Preferences Multi-Action Banner Block for React

Only the preview in the card, not the rest of your page, so a visitor can try a setting without the layout moving. Larger text raises the preview's size from text-sm to text-lg, High contrast switches it from the muted tone to full foreground at semibold with a foreground border, and Reduce motion changes the line under it from "Pages slide in." to "Pages turn at once." To apply a setting to the page, read the on list in save and set a class or attribute on your document.

"2 of 3 enabled" is a polite live line under the toggles, so a screen reader hears it after each press without interrupting. After Save it reads "2 of 3 enabled, saved", and any change clears the "saved". The toggles themselves announce their name and pressed state.

Save marks the current choice as saved (the line says so) and leaves the card in place; wire it to your settings store. Reset turns every toggle off and clears the saved note. Not now folds the block away with a CSS height transition and leaves focus on a visually hidden line, "Reading preferences kept as they were."

Each toggle is a button with a pressed state that Space or Enter flips. The toggles form a group named "Reading preferences"; on some libraries the arrow keys move between the toggles and on others Tab does, as that comes from the library you chose, and every toggle can be reached either way.

A tooltip that only appears on hover or focus hides the name from touch users, and a toggle whose label is an icon alone is a guess. Each toggle shows its icon and its words, so the card reads the same for everyone and nothing is hidden behind a hover.

The toggles wrap to as many rows as they need and the preview sits under them under a rule, with the three buttons stacked at full width below. At 320 pixels nothing scrolls sideways, and in a right-to-left layout the divider and the order of the two parts mirror.