Capability Tabs About Block for React

The capabilities are SKILLS at the top of the file. Each has a short label for the tab, a title, a summary, a score from 0 to 100, a measure that says what the score counts, certs, a quote, a speaker, a role and an outcome. The bar and the "n of 100" line both read score. A new row becomes a new tab and a new panel. The first one, incoming, starts open.

The list is a vertical tab list: the Up and Down arrow keys move between the capabilities, Home and End jump to the first and last, and Tab moves into the open panel. The open one is marked by a bar at the start of its row and by the row's selected state. On a phone the same tabs are chips in a sideways row, and the open chip is filled with your foreground colour.

The panels differ in length. An unseen, inert copy of every panel sits in the same grid cell as the open one, so the cell keeps the height of the tallest. The copies are hidden from assistive technology and from the keyboard. The open panel is the one in the tab.

The capability's title is an h3. The score is written as text ("94 of 100") and repeated by a progress bar that is hidden from assistive technology, so the number is announced once. Certifications are a list of badges. The quote is a blockquote and the speaker, role and outcome are its caption.

The list becomes a single row of chips that scrolls sideways inside its own band, with the open chip filled in your foreground colour. The score moves out of the chips and stays in the panel. The panel sits under the chips. Nothing else scrolls sideways at 320 pixels.

The header and the tabs fade up once when the page loads, and the open panel's text fades in when you choose another. With reduced motion the entrances are off and the panel swaps at once. Nothing loops.