Stats Sidebar Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Continue with Google shows where a real one would send you, with a way back. The figures are example values for a fictional product, typed in FIGURES with one number for each period and an AS_OF day shown beside them. For real, read them from your own statistics service, say when they were measured, and don't show a figure you can't back up: a made-up uptime or user count on a sign-in page is a claim.

Each figure holds its 30-day and 12-month numbers and the switch picks which one shows. The Sliding Number rolls only the digits that changed, and with reduced motion the digits change in place. The cells are the same size in both periods, so nothing moves, and a polite status message says which period is showing. It is a single-choice group: arrow keys move between the two chips and one is always on.

Each cell is a term and its value in a description list, so a reader hears "Platform uptime, 99.98%". The rolling digits are drawn from a hidden column of numbers marked aria-hidden, and the real value is written once in text for assistive technology, so the digits never read as a jumble and the number is right in every period.

Because the page's job on a small screen is to get you signed in: the form fills the width and Sign in ends on the first screen. The aside is decoration around that job, so below 1024 pixels it is dropped rather than stacked under the form. If you want the numbers on phones, put one line of them under the heading.

Yes. Tab runs through the provider row, the email, the password, its show and hide toggle, Forgot password, Sign in, the quiet link and the period switch, where the arrow keys move between chips. Enter in either field signs in. Each problem is tied to its field, focus goes to the first, and after signing in it moves to the result's heading while a polite status message says what happened.

A brand's logo comes with its own usage rules, so the block ships a neutral tile with two letters (Go) and says the provider's name in the button. Drop in the official mark under the provider's brand guidelines where the code marks the icon slot.