accordion: a11y; collapsed accordion takes screen reader focus

[gusnaughton]

Describe the bug

The flight search microsite contains an auro-accordion that contains an iframe element in its slot.

During our a11y auditing, we noticed that certain checkboxes from within the iframe are being focused on by the screen reader on OS X.

https://alaskaair-my.sharepoint.com/personal/phoebe_larner_alaskaair_com/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fphoebe%5Flarner%5Falaskaair%5Fcom%2FDocuments%2FRecordings%2FScreen%20Recording%5FChangeYourFlightAccessibilityIssue%2Emov&parent=%2Fpersonal%2Fphoebe%5Flarner%5Falaskaair%5Fcom%2FDocuments%2FRecordings&originalPath=aHR0cHM6Ly9hbGFza2FhaXItbXkuc2hhcmVwb2ludC5jb20vOnY6L3AvcGhvZWJlX2xhcm5lci9FVTZyYVZ0Nmp1ZEZpZjRYX0xEVXdVMEJtZlJXVUx2a1VZdUNoMm5BV0xLUHZRP3J0aW1lPUxrR1JSeVE3MlVn

To Reproduce

https://www.alaskaair.com/search/sea/ewr/29jul Use a screen reader starting above the accordion and try to go straight to the sorting/filtering dropdowns

Expected behavior

All collapsed slotted content is skipped

[gusnaughton]

@blackfalcon do you have a recommendation for triage here? Should we just capture focusin events to accordion and manually divert focus away to the next element in the dom tree at the level of the light dom?

[blackfalcon]

Looking into where the issue is stemming from. I am unable to repro this issue using the component and traditional content in that accordion.

The case of the iFrame is different and we are looking into this.

[blackfalcon]

This is not an issue with the accordion itself, but the content within.

The accordion CE uses visibility: hidden; to keep accordion content hidden from users when collapsed. When researching this issue, it was noticed that only two of all the inputs were accessible when the accordion was collapsed. Zooming in on those checkboxes, it was noticed that they not only have a CSS class that sets visibility: visible;, but it is also hard-coded on the DOM node as well. Please see the following screenshot.

It is believed that this issue is being caused by the content within the accordion and thus not the responsibility of auro-accordion.