docs: update tag docs on a11y tab

[laurenmrice]

Closes #3914

Updates the Accessibility tab docs on the website for the Tag component with the content template and new interactive tag variants.

Changelog

New

• Added images and content for interactive tags.

Changed

• Changed the content structure of the page.

---

Testing

• Dev or Gower: I need help writing information in the section called "Development considerations"
• I have information to add about overflow content, but will need to update this page with that in a later PR once that enhancement is actually in code.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2024 3:00pm

[guidari]

Also other the thing we came across while developing the interactive tag is the problem of nesting buttons. For example when we start to code the Oprational Tag using a ToggleTip, both are buttons and shouldn't be nested.

  <ToggletipButton label="Tag content" tabIndex={-1} as="div">
    <OperationalTag
      renderIcon={Asleep}
      className="some-class"
      {...args}>
      {'Tag content'}
    </OperationalTag>
  </ToggletipButton>

So we had to use PolymorphicProps to change the element tag. If a user wants to create a custom component it shouldn't nested buttons.

[laurenmrice]

Just some notes about these comments. And thanks for your review Gower! 🙏:

Yes, all variants of Tag have their own distinct visual differences before interacting with them.

---

This tag style will be updated to use the correct styling of the tag we have in code. We did not have that new variant in code when the A11y table was created.

---

I took this part out. That part was trying to say that operational tags can be triggered to open a view of tags, and it can do this through different ways by either using a popover, a toggletip, a modal, etc. I didn't want to get into the details of all of the different types of interactions and keys that could be used in these scenarios because it could be a lot of information?

[laurenmrice]

This is ready for review again!

[laurenmrice]

I am taking out the overflow section for now, until we can get that finalized. I will make a separate PR in the future to add overflow guidance to the different tabs for the component once it is finished in code.