Accordion Job Board Team Block for React

Edit ROLES at the top of the file: each has an id, a title, a department, a location, a type, a one-sentence summary, three needs, a pay range and who the role reportsTo. The select's options and their counts are built from the departments in that list, and OPEN_ROLE names the role that's open on load. One role is open at a time. Pay is written as one dir="ltr" span so the currency and range stay in order in a right-to-left layout.

It narrows the list to one department, or back to all of them, and the count beside it updates in a polite live region, so a screen reader hears "Showing 3 of 7 roles" without losing its place. Nothing is saved or sent: it's a view of the list on the page. A role that is filtered out leaves the list. The select takes a plain list of options.

Each role's title is a button inside its own h3 under the section's h2; Enter or Space opens and closes it, and the button says whether it's expanded. The chips are part of the button's name, so a screen reader reads the department, place and type with the title. Tab moves from role to role: this accordion does not add arrow-key movement between roles.

Yes. The Accordion takes hiddenUntilFound, so closed details stay in the markup as hidden="until-found", and the browser's find in page opens the one that holds a match.

It's a link (href="#"): point it at the role's application form or your applicant tracking system. Its accessible name includes the role ("Apply for Firmware engineer, meter radio"), so the links read apart in a list of links. The button renders the link it's given with render, with nativeButton={false}.

The select goes full width and the count sits under it. A role's chips wrap under its title, and an open role stacks: the summary and requirements first, then the pay, who it reports to and Apply. Nothing scrolls sideways at 320 pixels. When a filter leaves fewer roles, the block gets shorter: the next block moves up with it.