feat: add definition toggletips

[greatislander]

This PR adds definitions in toggletips to each step in the service blueprint. Steps to test:

1. Navigate to any step in the service blueprint.
2. Find the (?) icon next to a term in one of the sections.
3. Display the definition for the term by clicking the icon or focusing and activating it with the keyboard.
4. Verify that the definition is focusable.
5. Verify that the definition is dismissable with the esc key or by clicking anywhere outside it.

[cherylhjli]

I just realized I tried to click the label instead of the icon - could we make the label clickable too?

[greatislander]

I just realized I tried to click the label instead of the icon - could we make the label clickable too?

In the research I've done, that's not a common pattern. Typically the associated word or phrase isn't underlined either… I'm kind of wondering if after all this we shouldn't just implement these as footnotes? E.g. https://www.sitepoint.com/accessible-footnotes-css/

[cherylhjli]

hmm, the footnotes are an option. From what I see in that demo, you click on the number and then it takes you down the page. Is there a way to link it back up to where you were? I'm hoping users don't have to do the searching and navigating back to their original spot - that could be a hassle, especially for AT users.

I think the goal of the underline is to make it clear that the toggle tip is associated with that specific term. Maybe we can play with the spacing and move the icon closer to the term to make that clearer?

[greatislander]

hmm, the footnotes are an option. From what I see in that demo, you click on the number and then it takes you down the page. Is there a way to link it back up to where you were? I'm hoping users don't have to do the searching and navigating back to their original spot - that could be a hassle, especially for AT users.

I think the goal of the underline is to make it clear that the toggle tip is associated with that specific term. Maybe we can play with the spacing and move the icon closer to the term to make that clearer?

If you follow that tutorial through to the end it does indeed provide links back to the place in the text where the footnote was referenced. I could certainly move the icon closer.

[cherylhjli]

ohhh I see them now! Sure, let's do footnotes then. Let's also make that icon link that takes up you back up less tiny, and with a label :)