Dim Filter Tab-Filtered Logos Block for React

Edit CUSTOMERS and TOPICS at the top of the file. A show has an icon, a name, a style (an index into STYLES) and one or two tags; a topic is built with topic(value, label), and its count is worked out from the shows' tags, so it never drifts. Keep the number of shows at a multiple of four, so the wall's rows are full.

A show stays lit when it carries any of the picked topics, so more chips show more of the wall. With nothing picked every show is lit. The line beside the chips says how many are lit, in a polite live region, so a screen reader hears "Showing 6 of 16 shows" after each press; Clear puts every pick back and returns focus to the first chip.

Removing logos re-lays the wall and moves everything under it. Dimming keeps every cell where it was, so the page never shifts and the visitor sees where the matches sit in the whole. A dimmed show is inert, so it is out of the keyboard's way and out of the accessibility tree too: a screen reader hears only the shows that match. Its colour is not checked against the contrast rules because it is deliberately inactive.

The chips are toggle buttons in a group named "Topics", and each one reports whether it is pressed. Tab moves to the group and arrow keys move between chips; Space or Enter presses one. The group takes one Tab stop and the arrow keys move between chips.

The five chips sit in a row you scroll sideways, with the status line and Clear under it, so nothing wraps and the page doesn't scroll sideways at 320 pixels. The wall is two across and eight rows tall; every show is there, and the chips dim the same way.

The header and the frame fade up once when the page loads, and a show's opacity eases when the picks change. With reduced motion the entrance and the fade are off: the wall changes at once.