fix(adobe#244): [Masonry][Accessibility] add aria-multiselectable to …

…parent element with role="grid"
majornista · Oct 6, 2022 · 7db2e6f · 7db2e6f
1 parent 6e967c1
commit 7db2e6f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -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) {