Federated Identity Login Block for React

All of it. The five providers, their protocols, their health words and the 09:40 UTC check are typed, Connect says where a real sign-in would go and nothing opens, and Remember my provider only changes a word in the row and the status line; nothing is stored. In a product, read each provider's health from your own monitor (a failed discovery document or metadata fetch, a slow token endpoint, a maintenance window an admin set), stamp the check time you measured, redirect on Connect with a SAML request or an OpenID Connect or OAuth authorization request, and set a first-party cookie when the box is ticked.

By a dot and a word together: a filled dot with Operational, a half dot with Slow to respond, a hollow dot with the maintenance window. The dots are foreground tones and are hidden from screen readers, which read the word, and the row's radio is described by it. The two providers that are not up are the company's own, so no real service is shown as down.

It is in maintenance until 11:00 UTC, so its radio is disabled and the reason is in the row, in words and not only in a hover. The rest of the table works as normal; a provider that is slow stays choosable, since slow is not down. In a product you might also offer an email link or a recovery route for people whose only provider is down.

Pressing it with nothing chosen can't connect to anything, so it is a quiet button that still answers: it says "Choose a provider first." and moves focus to the first provider that can be chosen. It is never disabled, so keyboard and screen reader users can reach it and hear why.

Yes. It is a native table with a caption, column headings and a row heading holding each radio, inside a labelled scroll region that can take focus. Below the medium breakpoint the heads are hidden, the last-check column goes, and each row folds to a name line and a line with the protocol and the health, still the same table and the same radios.

Real providers are named in text with a neutral tile of two typed letters (Ok, En, Gw), never a logo or a brand color. Drop in an official mark where the code marks the icon slot if you have the right to use it.