[Masonry][Accessibility] Files: Main Navigation (Card View) - Selected state of the folder is not announced to the screen reader

[majornista]

Expected Behavior

A screen reader should accurately announces the selected/unselected state of Masonry items, which in AEM will contain Card View items and folders.

Actual Behavior

A screen reader does not accurately announce the selected/unselected state of Masonry items, which in AEM will contain Card View items and folders.

Reproduce Scenario (including but not limited to)

https://opensource.adobe.com/coral-spectrum/examples/#masonry or any AEM UI using coral-masonry.

Steps to Reproduce

Described in ASSETS-6844

Browser name/version/os (ie Chrome Version 62.0.3202.94 (Official Build) (64-bit) MacOS)

Chrome Version 105.0.5195.125 (Official Build) (arm64) MacOS

Coral Spectrum version

v4.15.2

Possible solution

1. Incorporate fix(#244): [Masonry][Accessibility] add aria-multiselectable to parent element with role="grid" #245 to ensure that the coral-masonry grid is identified as supporting selection using aria-multiselectable.
2. Hide the coral-checkbox component using aria-hidden="true", so that while it provides a visual affordance for the selected state, the selected state for the item will be communicated to assistive technology using aria-selected on each of the cells.
3. Ensure that aria-selected attribute is included on each masonry item, when selectionMode !== 'none'
4. Ensure that the accessibilityState status message is not hidden on mac-like devices when the item is selected. This should ensure that the "Checked" state of an item is communicated by VoiceOver.

[github-actions]

🎉 This issue has been resolved in version 4.15.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀