LG-9345 Maintain material consistency in IPP pages#8104
Conversation
…to a button that is effectively a link
…tons and links into what they look like
| /> | ||
| )} | ||
| <BackButton includeBorder onClick={toPreviousStep} /> | ||
| <BackButton role="link" includeBorder onClick={toPreviousStep} /> |
There was a problem hiding this comment.
Are we planning to prevent the spacebar from activating these fake links, since a link wouldn't be expected to be activated when pressing Space?
There was a problem hiding this comment.
Ideally no, and I don't think this alters the functionality of the HTML element, rather just how it is presented to AT. And I could've sworn spacebar still triggered the back button, but maybe I need to test again and in another browser.
There was a problem hiding this comment.
Ok, so I've tested the functionality of the back buttons in both Safari and Firefox and they respond to both Space and Enter/mouse click events.
There was a problem hiding this comment.
My expectation is that it wouldn't be activated when hitting Spacebar. It's a small detail, and maybe it ends up being helpful to have both options to activate, but if the idea with this is to make a link behave strictly as a link ought to behave, then I'd expect part of that to restrict interaction to the supported keypresses.
In general, I'm become a bit wary of this proposed behavior, but I see the upstream uswds/uswds#4385 has recently been approved, so that train may have already left the station.
There was a problem hiding this comment.
I mean, your point is taken. What I'm doing here isn't really material honesty either, it's a button that is masquerading as a link, but still works like a button. At least now a screen reader will match what a sighted user might assume from the element's styling.
| className="margin-top-3 margin-bottom-1" | ||
| onClick={() => | ||
| onClick={() => { | ||
| setStepName('location'); |
There was a problem hiding this comment.
i feel like this change also makes the code easier to read
| removeUnloadProtection(); | ||
| await trackEvent('IdV: prepare submitted'); | ||
| window.location.href = (event.target as HTMLAnchorElement).href; | ||
| window.location.href = inPersonURL!; |
There was a problem hiding this comment.
i like that this is more explicit/easier to read
JackRyan1989
deleted the
jryan/lg-9345-maintain-material-consistency-in-ipp
branch
* Change a few links that look like buttons into buttons add link role to a button that is effectively a link * changelog: User-Facing Improvements, In-person proofing, Make IPP buttons and links into what they look like * Remove left over comment * Fix JS errors, replace click_link with click_button
4 participants
🎫 Ticket
🛠 Summary of changes
📜 Testing Plan
👀 Screenshots
There should be no visible changes to the UI.