Update Accordion example code and behavior

[smhigley]

Resolves #1819 with the following changes:

Preview link

General cleanup:

• Updates JS file to a class syntax
• Update classnames to be lowercase
• Fix some border-radius issues in focus styling
• Updated example page wrapper id attributes to match other example pages

Behavior changes:

• Removed arrow key and force-one-open functionality
• Updated tests to reflect behavior change
• Removed section that talked about focus styling for "enhanced keyboard interaction"
• Removed arrow key/home/end rows in example page keyboard table
• Removed aria-disabled row in example page attributes table

Review checklist

• Editorial review by @mcking65
• Functional review by @mcking65
• Accessibility review by @jongund
• Accessibility review on iOS/iPadOS by @jongund
• Code review by @jongund
• Test review by @jongund

[carmacleod]

10-second review: this is so much nicer than what was there before! Arrow keys are not needed when any section can be collapsed.
Thanks, @smhigley !

I guess we need the whole review checklist thing.

[smhigley]

Thanks for the review and adding the preview link @carmacleod! Somehow I always forget that 😅

[shirsha]

Thanks @smhigley for the changes.
Following are few suggestion. These were existing from previous code

• Move the "+" and "-" before the accordion name so that users with screen magnifiers can see state easily.
• Place the accordions in an unorder list so that it improves the experience for screen reader users.
• Can we add note saying having the content under each accordion inside a labelled region is a best practice? Having too many landmarks will not help screen reader users. I recommend removing the markup related to region landmark.

[jongund]

@smhigley
Same problem as the other accordion examples for VO on macOS/Safari, when navigating using VO next/prev item, the h3 is announced, but not the button element information.

[jongund]

@smhigley
Works fine for VO/safari for iOS 14.4.

[a11ydoer]

@mcking65 @shirsha @jesdaigle

Can we have update on review so that we can see whether it can be merged? If not, we can add this PR to next week meeting agenda since we will review another accordion PR 1834

[mcking65]

Editorial review done; looks good!