fix(ASSETS-6863): Files: Asset information - IPTC tab - Certain ARIA …

…roles must contain particular children (#239)
adobe · Sep 15, 2022 · 9bb6f17 · 9bb6f17
1 parent 419eb65
commit 9bb6f17
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/coral-component-multifield/src/scripts/Multifield.js b/coral-component-multifield/src/scripts/Multifield.js
@@ -568,6 +568,9 @@ const Multifield = Decorator(class extends BaseComponent(HTMLElement) {
     if(self.items.length === self.min + 1) {
       self._validateMinItems();
     }
+
+    // a11y
+    self._handleRoleList();
   }
 
   /** @private */
@@ -579,6 +582,22 @@ const Multifield = Decorator(class extends BaseComponent(HTMLElement) {
     if(self.items.length <= self.min) {
       self._validateMinItems();
     }
+
+    // a11y
+    self._handleRoleList();
+  }
+
+  /**
+   * handle role list of the multifield based on number of items
+   * @private
+   */
+  _handleRoleList() {
+    const self = this;
+    if (self.items.length > 0 && self.getAttribute('role') !== 'list') {
+      self.setAttribute('role', 'list');
+    } else if (self.items.length === 0 && self.getAttribute('role') === 'list') {
+      self.removeAttribute('role');
+    }
   }
 
   /**
@@ -641,7 +660,7 @@ const Multifield = Decorator(class extends BaseComponent(HTMLElement) {
     this.classList.add(CLASSNAME, 'coral-Well');
 
     // a11y
-    this.setAttribute('role', 'list');
+    this._handleRoleList();
 
     // Assign the content zones, moving them into place in the process
     this.template = this._elements.template;

diff --git a/coral-component-multifield/src/tests/test.Multifield.js b/coral-component-multifield/src/tests/test.Multifield.js
@@ -586,6 +586,38 @@ describe('Multifield', function () {
       });
     });
 
+    it('should not have role list attribute set initially', function () {
+      const el = helpers.build(window.__html__['Multifield.base.html']);
+      expect(el.items.getAll().length).to.equal(0);
+      expect(el.getAttribute('role')).to.be.null;
+    });
+
+    it('should have role list attribute set after adding item', function (done) {
+      const el = helpers.build(window.__html__['Multifield.base.html']);
+      el.items.add({});
+      helpers.next(() => {
+        expect(el.items.getAll().length).to.equal(1);
+        expect(el.getAttribute('role')).to.equal('list');
+        done();
+      });
+    });
+
+    it('should not have role list attribute set after removing all items', function (done) {
+      const el = helpers.build(window.__html__['Multifield.base.html']);
+      el.items.add({});
+      el.items.add({});
+      helpers.next(() => {
+        expect(el.items.getAll().length).to.equal(2);
+        expect(el.getAttribute('role')).to.equal('list');
+        el.items.clear();
+        helpers.next(() => {
+          expect(el.items.getAll().length).to.equal(0);
+          expect(el.getAttribute('role')).to.be.null;
+          done();
+        });
+      });
+    });
+
     describe('keyboard reordering', function () {
       it('should toggle aria-grabbed and force forms mode when move button is clicked', function () {
         const el = helpers.build(window.__html__['Multifield.base.html']);