code.pyret.org
code.pyret.org copied to clipboard
brownplt
Rename dialog box should have sensible focus/key defaults
When the rename modal pops up, the filename field should have focus (if not already be selected!). ESC and Enter should have the effect of canceling-and-closing or saving-and-closing, respectively.
Adding myself to this issue as I plan to address modal content/styling and focus/keyboard stuff.
FYI - I've recently learned that screenreaders expect the title of any modal to receive focus first.
It's a bit tricky! Focus should move into the modal and the title should be readable immediately, but that can be done in other ways than receiving focus. Focus is also supposed to stay "trapped" in the modal, so you can't tab to anything else.
Blind users rely on the screenreader, and the screenreader relies on focus. The convention, apparently, is to set aria-hidden=true on the body element to make it inaccessible to screenreaders, but then false on the modal. But focusing on the title seems to be a requirement - and it's only one Tab away from the file name.
Hmm, reading the WAI-ARIA example from the spec, linked above, I think that's not quite right. The title isn't a focusable element, but it should be given ARIA attributes such that it is read out when the modal becomes available, and the first focusable element should be focusable to be read after that.
On Thu, May 20, 2021 at 9:15 AM Emmanuel Schanzer @.***> wrote:
Blind users rely on the screenreader, and the screenreader relies on focus. The convention, apparently, is to set aria-hidden=true on the body element to make it inaccessible to screenreaders, but then false on the modal. But focusing on the title seems to be a requirement - and it's only one Tab away from the file name.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/brownplt/code.pyret.org/issues/284#issuecomment-844606991, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAACCL72IDPW3S5R5FQWRTTTORPEHANCNFSM4FOC7K3A .