Composer Ring Social Platform Navbar Block for React

The ring is Circular Progress in the foreground tone, filled to the share of 280 used; it is decoration. Below 20 characters remaining the warning icon (the only coloured part, on the icon, never on text) and the number appear beside it, in a space reserved for them. A hidden status region speaks only at the thresholds: "20 characters remaining", "10 characters remaining", "Limit reached" and "Over the limit", so it never reads out every keystroke.

You can keep typing: the ring stays full, the count goes negative, and the Post button is disabled (and a submit does nothing) until the post is 280 characters or fewer. An empty or blank post can't be posted either. Change LIMIT and WARN_AT at the top of the file for other numbers; the spoken stages are in warning.

No. It clears the field and shows "Posted to Maple Court." in a polite status; typing again removes it. To send a post, call your API from post and clear the field when it answers. A draft you close the composer on is kept, and opens again with the field focused.

Enter or Space on Create post opens the popover and focuses the field; Tab moves to Post; Escape or a click outside closes it and returns focus to the button.

Below md Create post becomes an icon button that opens the same composer as a drawer from the bottom (swipe it down or press Escape to close); below sm the avatar goes; below lg a menu button opens a sheet from the top with the four links and the unread count.

Edit PAGES: the bar and the sheet read it, the page you're on takes aria-current="page", and a link with unread shows the count chip and says "3 unread" in words. Every link points at #.