diff --git a/coral-component-masonry/src/scripts/Masonry.js b/coral-component-masonry/src/scripts/Masonry.js index 17374d9ea3..5f2f1dc51f 100644 --- a/coral-component-masonry/src/scripts/Masonry.js +++ b/coral-component-masonry/src/scripts/Masonry.js @@ -226,12 +226,18 @@ const Masonry = Decorator(class extends BaseComponent(HTMLElement) { this._selectionMode = validate.enumeration(selectionMode)(value) && value || selectionMode.NONE; this._reflectAttribute('selectionmode', this._selectionMode); + const isGrid = this.ariaGrid === ariaGrid.ON && this.parentElement; + if (this._selectionMode === selectionMode.NONE) { this.classList.remove('is-selectable'); - this.removeAttribute('aria-multiselectable'); + if (isGrid) { + this.parentElement.removeAttribute('aria-multiselectable'); + } } else { this.classList.add('is-selectable'); - this.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE); + if (isGrid) { + this.parentElement.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE); + } } this._validateSelection(); @@ -543,6 +549,12 @@ const Masonry = Decorator(class extends BaseComponent(HTMLElement) { this._preservedParentAriaLabelledby = this.parentElement.getAttribute('aria-labelledby'); this.parentElement.setAttribute('aria-labelledby', this.ariaLabelledby); } + + if (this._selectionMode === selectionMode.NONE) { + this.parentElement.removeAttribute('aria-multiselectable'); + } else { + this.parentElement.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE); + } } else { // Restore/remove role of the parent element if (this._preservedParentAriaRole) { @@ -567,6 +579,9 @@ const Masonry = Decorator(class extends BaseComponent(HTMLElement) { // Remove aria-colcount this.parentElement.removeAttribute('aria-colcount'); + + // Remove aria-multiselectable + this.parentElement.removeAttribute('aria-multiselectable'); } } diff --git a/coral-component-masonry/src/tests/test.Masonry.js b/coral-component-masonry/src/tests/test.Masonry.js index 14fb8b0611..0d67493038 100644 --- a/coral-component-masonry/src/tests/test.Masonry.js +++ b/coral-component-masonry/src/tests/test.Masonry.js @@ -484,11 +484,18 @@ describe('Masonry', function () { it('should have an aria attribute for single/multiple selection', function () { const el = helpers.build(new Masonry()); + // aria-multiselectable should only apply when ariaGrid="on". + el.ariaGrid = 'on'; + expect(el.parentElement.hasAttribute('aria-multiselectable')).to.be.false; + el.selectionMode = 'single'; - expect(el.getAttribute('aria-multiselectable')).to.equal('false'); + expect(el.parentElement.getAttribute('aria-multiselectable')).to.equal('false'); el.selectionMode = 'multiple'; - expect(el.getAttribute('aria-multiselectable')).to.equal('true'); + expect(el.parentElement.getAttribute('aria-multiselectable')).to.equal('true'); + + el.selectionMode = 'none'; + expect(el.parentElement.hasAttribute('aria-multiselectable')).to.be.false; }); it('should announce "checked" when item becomes selected', function(done) {