404 With Ranked Results Error Block for React

The address and each article's path and title are cut into words (letters and digits, in lower case). A word of the address scores 3 when an article has the same word and 2 when it has one that is a single letter away, as "componets" is from "components"; words under five letters never match loosely, so short words don't pair up by chance. The scores add up, the highest comes first, and equal scores keep the order of ARTICLES. When even the best scores nothing, the Closest match badge goes and the button offers to browse all articles instead.

Each chip is a word read from the address, up to five, with a mark that says how it meets the closest article: a check when the article has it, an equals sign when it is a letter off, a minus when it is not there. Screen readers hear the same in words, and a count covers any extra words. The marks in the list use a tint and an underline, so nothing relies on color.

Everything. The ranking runs in the browser over ARTICLES, the field is plain state, and nothing is fetched. A row says where it would open in a polite status message instead of navigating, and the main button is a link to #. For a real site, replace rankOf with a call to your search index using the words of the failed address as the query, and point the rows and the button at the articles' real paths.

The block draws the page; the status comes from your server. Answer with a real 404, even though the page suggests articles, or crawlers will index the dead address as if it worked. Suggesting results never changes that.

The two halves stack, with the field, the chips and the button first, so the main button is on the first screen. The list below shows the top four of the eight (it says so), and the divider becomes a rule across the page. The long paths truncate inside their rows.

The field has a label; Tab runs from it to the main button, Reset and then each article in rank order, and the links show a focus ring inside their rows. After an edit a polite status message names the closest article, or says nothing is close. The rank number and the Closest match badge are read with each row.