Create inline content guidance markup with alt text component design

[EWashb]

Description

After the completion of #10766, we are ready to start the specific markup for the designed alt text guidance component found in this figma file. The desire is that this format could be used in other areas in the CMS where extended help text (aka inline content guidance) can be beneficial

Design Screenshots

These are approved design mockups, for style, layout, placement of elements etc. The important pieces to note are:

• The trigger is inline with the short help text. We do not want the trigger on a new line after the help text.
• The trigger has a dotted line underneath, not a solid line - this is to differentiate it from standard links.
• The Full expanded guidance has a light blue/teal border on the left. This border should extend the length of the full guidance - I think I may have messed this up slightly when editing the content and it looks cut off at the bottom

Default component with Placeholder text: Alt text specific component:

Functionality

1. This will be a reusable component, able to be used not only for alt text guidance but for inline guidance on other fields in the future as well
2. All the the inline guidance/content will be developer managed. Meaning, when we add this to future fields, or want to change existing guidance, updating that text will be a developer task.
3. The expanded guidance - the section visible after the trigger is activated - will be full HTML and will be able to contain bullets, links, bold, etc.
4. This component will only be added upon request. Editors (us) will not be able to add this ourselves which will therefore eliminate the chance of having a trigger available that leads to an empty section.
5. NOTE: there currently is not a character count limit on the alt text field, we will not be adding that at this time. That piece of the Figma design can be ignored for now.

Acceptance Criteria

• [ ] twig template is created for alt text inline content guidance
• [ ] all annotated behavior is implemented as per the figma file
• [ ] Accessibility lead review
• [ ] Requires review by Sitewide CMS PM
• [ ] KB article updated as necessary for launch

CMS Team

Please check the team(s) that will do this work.

• [ ] Program
• [ ] Platform CMS Team
• [ ] Sitewide Crew
• [x] ⭐️ Sitewide CMS
• [ ] ⭐️ Public Websites
• [ ] ⭐️ Facilities
• [ ] ⭐️ User support

[EWashb]

@laflannery can you look over the specifics of this ticket before the work begins? I would love another set of eyes to make sure I'm not missing anything.

[laflannery]

@EWashb I added a questions/assumptions section, I wasn't positive if the intention of this is to be reusable right away, or if we are just doing a one-off for now but if so I want to confirm functionality.

[EWashb]

Good questions @laflannery. Let's use our meeting today to dive into these

[laflannery]

I updated the Figma file with new text and I updated the screenshots above. NOTE: this is starting text! I haven't reviewed this with anyone but myself so I will probably update this later on next sprint but this should get you started.

For ease of copy/paste, the content I have added is:

Short help text: Adding a clear and meaningful description of the image is important for accessibility. Trigger: Tips for alternative text (But as we discussed this should be dynamic based on field name) Full guidance: Best practices

• Be accurate and descriptive, clearly identifying the main purpose of the image.
• Be as concise as possible, ideally no more that 150 characters.
• Do not use words such as “image of”, “photo of”, “graphic of”, etc.
• Do not include the file name of the image.
• Learn more about guidelines and writing quality alt text (This links to a page on the VA design system site that doesn't exist yet. If we are done before they publish it I will either pull the link or link to our KB article...I haven't decided)

[swirtSJW]

@laflannery and @EWashb Is this also going to be used in cases of groups of related fields where the guidance may cover how to use multiple fields? Example: operating status, status more_info, status supplemental Those fields need guidance that describes how they work together.

[laflannery]

Aria for Button trigger:

• aria-controls: must point to ID of the expanded content section
• aria-expanded: should toggle between true/false depending on if the expanded section is open or closed

[EWashb]

@swirtSJW sorry I missed this. That's the hope...lots of reuse.

[laflannery]

@swirtSJW and @EWashb I spoke with the UX team and they suggested that we do use this new inline guidance pattern to eventually replace the current hover tooltips we have. The overall purpose is the same - to provide additional information and possible KB links to the editor - so this pattern would make sense. Let me know if either of you have questions on this or need more information

[EWashb]

@laflannery thanks for the update! When we do change this pattern it will require some change management (even if small communication) since it will change an existing pattern that editors have become accustomed to.

[laflannery]

@edmund-dunn Updated guidance:

Short help text: Adding a clear and meaningful description of the image is important for accessibility.

Full guidance: Best practices

Be accurate and descriptive, clearly identify the main purpose of the image. Be concise, ideally no more that 150 characters. Avoid phrases like “image of”, “photo of”, “graphic of”, etc. Leave the file name of the image out of the alt text. Learn more about alt text guidelines