[Masonry][Accessibility] aria-multiselectable incorrectly appears on coral-masonry element with role="row"

[majornista]

Expected Behavior

With ariaGrid="on", when the selectionMode for coral-masonry is set to "single" or "multiple", aria-multiselectable should be added to the parentElement of the coral-masonry element, which has role="grid", rather than the coral-masonry element itself, which has role="row".

Actual Behavior

With ariaGrid="on", when the selectionMode for coral-masonry is set to "single" or "multiple", aria-multiselectable gets added to the coral-masonry element itself, which has role="row", instead of the appropriate parent element with role="grid". This will be identified by automated accessibility testing tools as an invalid use of WAI-ARIA. See https://www.w3.org/TR/wai-aria-1.1/#aria-multiselectable.

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

1. Open https://opensource.adobe.com/coral-spectrum/examples/#masonry example.
2. Click either of the Selection mode links labelled "single" or "multiple" to set the selection mode.
3. Use aXe DevTools Chrome extension to scan page.
4. aXe reports following error:

Elements must only use allowed ARIA attributes
Element Location

#example-preview #masonry

Element Source

<coral-masonry orderable="" id="masonry" layout="fixed-centered" columnwidth="250" aria-label="Masonry" ariagrid="on" role="row" class="_coral-Masonry is-loaded is-selectable" selectionmode="multiple" style="height: 600px;" aria-multiselectable="true">

To solve this problem, you need to...

Fix the following:
ARIA attribute is not allowed: aria-multiselectable="true"

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

Sample Code that illustrates the problem (use the Playground if possible)

In the code below, one can see that aria-multiselectable attribute is being added directly to the coral-masonry element rather than its parent with role="grid":

coral-spectrum/coral-component-masonry/src/scripts/Masonry.js

Lines 224 to 239 in 6e967c1

	set selectionMode(value) {
	value = transform.string(value).toLowerCase();
	this._selectionMode = validate.enumeration(selectionMode)(value) && value || selectionMode.NONE;
	this._reflectAttribute('selectionmode', this._selectionMode);
	if (this._selectionMode === selectionMode.NONE) {
	this.classList.remove('is-selectable');
	this.removeAttribute('aria-multiselectable');
	} else {
	this.classList.add('is-selectable');
	this.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE);
	}
	this._validateSelection();
	}

Screenshots (if applicable)

[majornista]

This is included in #250, so I will close this one.

[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 📦🚀