Radial Dial Wheel Selector Features Block for React

Edit SKILLS at the top of the file: each has a name, a one-line description, the model it routes to and a score from 0 to 100. The wedges are laid out from the array's length, each taking an equal share of the circle, in order from the top and clockwise; six reads best, and fewer or more only changes the angle.

It keeps a running angle and moves to the chosen wedge by the shortest turn, so going from Audio to Reasoning steps one wedge forward instead of sweeping back across the dial. It is a CSS transition on rotate, and with reduced motion the needle jumps and the hub's digits change in place.

The wedges are one group of radio buttons: Tab puts focus on the chosen wedge and the arrow keys move to the next or previous one, choosing it as they go. The focused wedge gets a heavier outline. Each wedge's description points at its row in the list, so a screen reader hears the score and the model.

No. The list beside it has every skill's score and model as text, in order, so nothing is only in the drawing. The hub and the rim are hidden from assistive technology.

The dial shrinks to fit the width and its names step down a size; the wedge is the touch target, so each is far larger than 44 pixels. The list sits under it as full-width rows.

No: a dial keeps its direction, so the dial is dir="ltr". The header and the list follow the page's direction.