Location Verification Login Block for React

Everything. The places, the distance, the time and the network address (an address from a range reserved for documentation) are typed text; the answers wait 600 milliseconds and change the page's state, and nothing is stored or sent. This block never asks the browser for your location. In a product the check runs on your server, from the network address of the request, so nobody is asked for permission: look the address up in a coarse location database, compare it with the places the account usually signs in from, and ask this question only when the distance is large.

This is me says Roamfern would remember the place for 30 days, and Not me says it would block the sign-in and email a password reset; in this demo nothing is remembered or sent, and the result says so. Both take the decision's place in the same space, move focus to the result heading, and leave a Start over button that returns focus to This is me.

No, it's a fictional drawing, labelled as not to scale; the places and the distance are typed. It's hidden below the large breakpoint because a phone's first screen belongs to the question, and the list of facts says the same things in words, so nothing is lost.

Because reading order should follow importance. The question and its buttons come first in the markup, so keyboard and screen reader users meet them before the picture; on wide screens the map is placed at the start of the band with grid placement only.

It's a typed figure, About 2,590 mi, roughly the great-circle distance between the two city centres, written as a constant so the page never changes. In a product, compute it on the server from the two coarse locations and round it, so you never imply precision your location data does not have.

Yes. Both answers are real buttons, the facts are a description list, the map is hidden from assistive technology with its meaning given in text, and every state is said through the page's one status line.