Add Focus State for Tabbable Elements #1963
Conversation
|
@cameron-eyds just some context here. The requirement was to apply styling only when tabbing into the fields or buttons. The pseudo class :focus-visible is built specifically for it, and I was able to use it for buttons. However, for text input fields, it does not work - the :focus and :focus-visible are applied at the same time, so there is no way to differentiate it. To solve this, I created a plugin that would add tab event listeners to all v-text-fields and style the fields on tab only. It could also be achieved via directive, but then we need to add it to all v-text-fields, which is more work. Let me know if you have questions/comments. Thanks! |
|
/gcbrun |
|
Temporary Url for review: https://bcregistry-assets-dev--pr-1963-xvx3zta2.web.app |
|
Code looks fine but some styling on the Registration Table Tabs is gone. The inactive tab would shrink slightly lower than the active tab. Maybe it's ok, would confirm with @LizGovier |
There was a problem hiding this comment.
Code looks good but pending approval from @LizGovier with regards to the removal of the tab styling.
Edit* FWIW it's a very small thing and the tab designs for our MHR history don't include shrink/grow styling, so hopefully all good with design.
|
@cameron-eyds thanks, tabs were tricky and bunch of styles needed to be updated in order for focus outline to show. I left some comments for Liz in the ticket, so we'll see. |
dimak1
force-pushed
the
feat/a11y-active-focus
branch
from
a3e4ba4
to
2c049d6
Compare
|
/gcbrun |
|
Temporary Url for review: https://bcregistry-assets-dev--pr-1963-xvx3zta2.web.app |
|
/gcbrun |
|
Temporary Url for review: https://bcregistry-assets-dev--pr-1963-xvx3zta2.web.app |
|
/gcbrun |
|
Temporary Url for review: https://bcregistry-assets-dev--pr-1963-xvx3zta2.web.app |
Issue #:
Description of changes:
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the PPR license (Apache 2.0).