Filter Sidebar Gallery Block for React

Categories are a union (tick two and you see both kinds), and the price range and the lowest rating then narrow what those kinds show. Each category's count is how many lights it would show under the price and rating now chosen, so it changes as you move the slider. Active filters repeat as chips; removing one moves focus to the status line.

The sidebar is hidden and a "Filters (2)" button, with the number of active filters, opens a Sheet from the bottom with the same three controls, the same state and a "Show 6 lights" button that closes it. Closing it returns focus to the button. The Sheet and the sidebar are two copies of one component, so the ids are scoped.

Its two thumbs read as the lowest and the highest price with their values ("Lowest price: $60"). The visible count updates as you drag, but the polite status line speaks only when you let go, so a screen reader isn't flooded.

An unseen copy of all twelve pictures (hidden from assistive technology and from the keyboard) sits in the same grid cell as the live set, so the block is always as tall as the full gallery and the shown pictures stay at the top. Nothing below the block moves.

The rating is read-only and part of a caption, so a drawn star next to its number (with "out of 5" for screen readers) is enough, and avoids a read-only Rating's extra tab stop.

Each picture is typed data with a description (its alt text), a scene and a ratio. Add your image's address to it, then replace the Scene in its tile with <img alt="" className="size-full object-cover" src={…} />: the caption already names the picture, and the role="img" wrapper's label can move to the alt. The comment above Scene says where. Tiles crop to a fixed shape, so keep object-cover.