Missing visible focus on Autofill button for keyboard navigation (accessibility)

As the title says: I would like to be able to use my keyboard to navigate through the 1Password extension. Today was my first attempt, and everything worked pretty fine except for a lack of visual indication when the "Autofill" button has focus.

It's also unclear when the current site has focus, as it seems to be at the top of the keyboard focus order (indicated by a blue background when the extension widget is opened) but then there is an invisible focus element before the Autofill button. After further testing, it seems to me that the current site gets the blue background color when the search bar has focus. That doesn't seem very obvious to me, but perhaps that could be alleviated by continuing the :focus outline you guys use on gray buttons to indicate focus. Additionally, I believe there is an invisible focus element at the very end of the focus order as I need to press Tab twice in order to get from the favorite button back to the current site.

See the A11Y Project for more information about keyboard accessibility, useful for your developers. They have:

I have a screen recording of this, if it would be helpful, but as it contains personal information I'd rather not share it publically. I imagine you guys will ask me to send it as an email to support?

This isn't a huge issue for me, I just want to be able to use my keyboard to navigate as a poweruser. But I hope accessibility is important to AgileBits?


1Password Version: 7.6.1.BETA-0 (70601000)
Extension Version: 1.21.0.beta (build #20116)
OS Version: macOS Catalina 10.15.5 (19F101)
Sync Type: Not Provided

Comments

  • ag_yaronag_yaron

    Team Member

    Hey @roastchicken ,
    Thanks for the information here.

    I asked one of our devs to take a look at this. I hope to hear back soon and will keep you posted when I do.
    I appreciate the time and effort you put into this.

  • oliverdunkoliverdunk

    Team Member

    Hi @roastchicken,

    Yaron asked if I could take a look over your post.

    You're absolutely right about the Autofill button. There's no indication whatsoever when that's focused, and there should be. I've made a note of that and I hope we can look at it soon. At first glance, it seems like something we could quickly fix to great effect.

    With selected items and the search bar, I think that one deserves a little more thought. There may be more fundamental changes to make so I think it's worth saving for further down the line.

    Finally, after focus leaves the favourite button, I think it's going on the window as a whole. We should definitely look at that one.

    I really appreciate you holding us to account with these. Accessibility is something that comes up a lot internally, during both design and development work. It's something we try to get right before shipping a change, and we do a lot of testing with screen readers to check that things sound right. In this case, it's a shame you beat us to it - but good for 1Password overall.

  • oliverdunkoliverdunk

    Team Member

    @roastchicken We've just published a new beta, and as a first step, it includes a focus ring around the Autofill button! If you're on the beta, do take a look and let me know what you think. If you're running stable, the change will hopefully be with you in the near future ☺️

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Emoji
Image
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file