Security Checkup Settings Block for React

Edit CHECKS at the top: each has an id, a name, the reason it shows while it fails and the reason it shows while it passes, and START lists the ones that pass when the page opens. The score, the meter, the count of checks to go and the line under the button are worked out from that list, so nothing is typed twice. In your app each pass or fail would come from the setting itself, and the button would link to the page that changes it.

It doesn't change anything itself: it moves focus to the button of the first check that fails and says which one it is, so Enter or Space then turns it on. When every check passes the button stays in place, quiet, and says so; pressing it then just says all eight pass. Keeping the one primary in the score block keeps it on the first screen on a phone, with no pinned bar.

Everything. Turn on and Turn off flip a typed list in this page and say so in the line under the score; nothing is enforced and no settings page is opened. Turn off is there so you can see the score fall again. To make it real, derive each pass from your own configuration, make each button open the right settings page or call the change directly, and keep a way to dismiss a check that doesn't apply.

Each state is a word as well as a mark (a solid dot for Pass, a ring for Needs attention), every button is named for its check ("Turn on: MFA required"), the rows are a real list and the line under the score is a polite live region present from the start. On a phone the score, the button and the meter stack, and each row keeps its two lines of text and its button at a fixed height, so turning a check on never moves the page.

Yes. The layout uses logical sides, so the marks, the text and the buttons swap ends; the score and each reason are wrapped so a number or a full stop never breaks away from its words.