Accordion controls missing expanded hover/focus styles

[BlueSlug]

Describe the bug

The accordion controls used for the root page categories and for Article Contents do not have a focus/hover style defined for their expanded state. While this is less of an issue when no contrast themes are applied, since the browser-specific :focus-visible styles can be seen, once a contrast theme is active there is no way to distinguish where user focus is when it is on one of these controls.

There is, at the time of filing, no design provided for these states, so one will have to be created before proceeding any development work. The designs for each control should be as close to each other as is practical in order to provide a predictable and consistent user experience. The primary difference between the two is that the section drop-down contents are outside of the section bar proper, while the Article Contents list is enclosed within the box created by the control.

To reproduce

Steps to reproduce the behavior:

1. Go to the Approaches page
2. Click on "+ show preferences" to open the UIO panel
3. Scroll right and activate a Contrast theme
4. Navigate to and then activate the "Good Practices" section/bar
5. After the section is expanded, note that there is no indication of whether the bar is focused or hovered
6. Click on "Follow Accessibility Principles" to open that article
7. After the page has loaded, navigate to and then activate the "Article Contents" bar
8. Once again, after it has expanded, note that there is no focus or hover indicator for the bar

Expected behavior

These two controls should have an indication of when they have focus or the user is hovering on them.

Screenshots

• Section collapsed:
  

• Section focused:
  

• Section expanded, hover and focus look identical:
  

• Article Contents collapsed:
  

• Article Contents hovered:
  

• Article Contents expanded, hover looks identical
  

Technical details

Desktop

• OS: Windows 10 Pro v21H2
• Browser & version: Chrome 102, Firefox 101

Mobile device

• Device: Google Pixel 5
• OS: Android 12
• Browser & version: Chrome 102, Firefox Focus 101

Assistive technology used

N/A

Additional context or notes

This issue was identified during the review process for pull request #87, but was left out of the release due to time constraints.