Disclosure examples for FAQ and image description: Update accessibility features documentation and implement coding practices in latest code guide

[jongund]

The javascript for the discsloure button examples had some poor documentation, so I update the two examples to:

1. Udated JS code to use APG practices
2. Updated JS documentation
3. Added accessibility documentation in the examples related to SVG and high contrast support
4. Updated references in APG document and other examples

Preview Link: FAQ
Preview Link: Image Description

Review checklist

• Editorial review by @mcking65
• Visual design review by @a11ydoer
• Accessibility review @a11ydoer (HCM check)
• Code review by @jesdaigle
• Test review by @jesdaigle

---

Preview | Diff

[charmarkk]

Functions appropriately with Firefox/Chrome and NVDA/JAWS latest. HCM Black and White look appropriate.

[jesdaigle]

Code and test review are good.

[mcking65]

@richnoah,

I see @jesdaigle provided approving code review. But, I see an unresolved comment by Sarah and Simon about a switch statement with an unnecessary case for the enter key. That case is still in the Javascript.

Can we please have a ffresh look at the latest code?

@a11ydoer,

I added this to November 2, 2021 Agenda · w3c/aria-practices Wiki so we can check visuals. If anyone has the chance to look at visuals, including in high contrast, before the meeting, that would certainly help.

[mcking65]

Editorial review complete. Approve.

[jongund]

@mcking65
I removed the event handler for the keyboard

[zcorpan]

@mcking65, @jongund has now resolved the enter key comment.

[a11ydoer]

Visual review -for future update

1. FAQ design commonly has distinguishing border lines, which distinguish each question from others. In addition, there can be a visual indicator which item the user is about to open.
   
2. Image description example. - we can make " Data Table for Minard's Chart" button be distinguishable from the rest of contents and foundable easily. As the user, I had a difficult time to see "Data Table for Minard's Chart" button. Once it has focus, it is findable/distinguishable due to focus background color, blue.

[a11ydoer]

High contrast check is complete and two examples look good.
Test with High contrast white/black in PC and Inverted color in Mac.

[a11ydoer]

I see the room for visual design improvement but this is not the deal breaker.
I checked with High contrast mode for two examples both PC and Mac. They looked good.