Veterinarian Services by Species Profile Block for React

Edit SERVICES and SPECIES. Each service has a name and a prices map from a species to the price from; a species that is missing from the map is not offered the service, so the Offered words, the count and the cheapest price are all worked out from it. NIGHTS holds the emergency line's hours on weekdays, weekends are all day, and AS_OF is the day the page treats as today, so the first line of the emergency cell is worked out from its weekday and never from the clock.

So the table never changes height and a visitor can compare: a service that a species is not offered stays in its row, quietly, with a dash and the words Not offered. Picking another species only changes the words, the prices and the three figures above, never the layout. A row that is not offered has no price, and its price cell reads No price to a screen reader.

No. Picking a species only changes what the page shows, and the polite status line says what it came to, such as Rabbits: 7 of 10 services. The clinic, the vet, the prices and the hours are invented. To make it real, load the services from your own price list, and link the emergency cell to a number your staff answer.

The group is one tab stop. Arrow keys move between the species and choose as they go, Home and End jump to the first and last, and the chosen species is always one of the five, so the table is never left without an answer. In a right-to-left layout the arrow keys follow the reading direction.

It is a native table with a hidden caption, column heads, and the service as each row's header, wrapped in a labelled region that scrolls if it must. Offered is a check and the word, Not offered is a dash and the words, and a price is read as a figure with a dollar sign. In a right-to-left layout the prices keep their order. The emergency dot is decorative: the hours are written out.

The three figures sit two over one, the species chips scroll sideways with the next chip peeking, and the table drops its price column: each service's price from is written under its name instead. Every species has the same ten rows, so the page keeps its height when you switch.