Put the edit avatar back in the middle, and make the tip cards usable from the keyboard
The keyboard and screen-reader pass turned the edit avatar into a <button>, and a button is inline-block, so `margin: auto` stopped centring it. It is a block again without the button's own chrome. Its focus ring is drawn outside the circle: the placeholder avatar covers all of it and hid the ring, which is drawn inside the edge. The stories viewer put focus on its first button when it opened - Close - so Space, the pause key, closed it. Focus now lands on the dialog itself. The empty-column tip cards: - The segmented rows (System/Dark/Light, the suggestion modes, the chat filters) were divs no key could reach. They are toggle buttons with aria-pressed and one tab stop per row: Tab enters on the chosen one, the arrows move, Enter or Space picks. Picking needs Enter or Space: were an arrow to pick, every press on System/Dark/Light would switch the theme. - The two cards that are not showing are only faded, so they are now inert and leave the tab order and the accessibility tree. Each card is a group named by its title, and Next/Previous say which card came up. - The corner button is named and says whether the deck is open. - The trending packs are buttons, named by the pack title. The theme strip (tips, General Settings, the QR popup) could not be used from the keyboard at all. It is a toolbar: one tab stop on the chosen theme, the arrows between tiles, Enter or Space to apply. Its focus ring sits on top of the wallpaper, because the ring drawn under it was never seen and the one outside looked exactly like the selection. Every tile also held a hidden "Chat background" tab stop, because the wallpaper preview had become a button for the background grid; only the grid tile is a button now. attachPickerGrid grew what the rows need: native buttons keep their own names, the tab stop starts on the pressed item and follows the choice when it is picked with the pointer, and a grid that already has its items no longer gets a second tab stop. It stopped adding `navigable-list`, which painted every `.active` grey, including the selected theme tile. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
E
Eduard Kuzmenko committed
5a87c445e85387208ca25611c28ee52b65c47ccf
Parent: b2b794a