Community Manager Moderator Rota Profile Block for React

Edit the constants at the top. MODERATORS lists the people by initials, SHIFTS the three shifts with their hours, DAYS the seven dates, and ROTA holds one string per shift with seven entries, each the initials on that shift split by spaces, or an empty string for nobody. MANAGER is the initials that get the solid weight. The covered count and the manager's shift count are worked out from ROTA, never typed.

It changes state in the page and nothing else: the cell shows the manager's initials with the line Taken in this demo, the header count goes up, and the status line says which shift was taken. Reset rota puts the table back as it started. To make it real, call your scheduling API from the button's handler and only update the cell when it answers.

Yes: a native table with a caption, column headings for the days, a row heading for each shift and a cell per shift and day, so a screen reader can read a cell with its day and shift. The initials are decorative; the names of the moderators are read out in text and an uncovered cell is read as Uncovered, with a button named for its shift and day.

The button is replaced by the manager's initials, so focus moves to that cell, which is a focus target with no tab stop of its own. The status line also announces the change, so nothing is lost for a keyboard or screen reader user.

The table keeps seven day columns and scrolls sideways inside a region that can be focused and scrolled with the arrow keys; the first column, the shift names, stays pinned at the start so you always know which row you are in. The header's button drops under the sentence.

Yes. The pinned column sits at the start of the row, so it moves to the right, the hours stay in reading order, and dates and counts are isolated so the digits do not flip.