fix(ASSETS-5617): [Screen Readers-AEM Dynamic Media-Image Set Editor]…

…: Screen readers are not narrating the descriptive information for the 'Swatches list items' which are present after 'Full Screen' button in the 'lmage Set Editor' page (#256)

coral-component-steplist/src/scripts/StepList.js

@@ -554,6 +554,13 @@ const StepList = Decorator(class extends BaseComponent(HTMLElement) {
       this.setAttribute('aria-label', i18n.get('Step List'));
     }
 
+    // the screen reader should not navigate to hidden element
+    // the element is hidden if has only one child
+    if (this.items.length === 1) {
+      this.setAttribute('aria-hidden', 'true');
+      this.interaction = StepList.interaction.OFF;
+    }
+
     // Don't trigger events once connected
     this._preventTriggeringEvents = true;
     this._validateSelection();

coral-component-steplist/src/tests/snippets/StepList.onlyonechild.html

@@ -0,0 +1,5 @@
+<coral-steplist>
+  <coral-step>
+    <coral-step-label>Tab 1</coral-step-label>
+  </coral-step>
+</coral-steplist>

coral-component-steplist/src/tests/test.StepList.js

@@ -812,4 +812,18 @@ describe('StepList', function () {
       expect(trackData).to.have.property('rootType', 'coral-steplist');
     });
   });
+
+  describe('Accessibility', function () {
+    it('should have attribute aria-hidden set to true when has only one child', function () {
+      const el = helpers.build(window.__html__['StepList.onlyonechild.html']);
+      expect(el.items.length).to.equal(1);
+      expect(el.getAttribute('aria-hidden')).to.equal('true');
+    });
+
+    it('should not have attribute aria-hidden when has more than one child', function () {
+      const el = helpers.build(window.__html__['StepList.base.html']);
+      expect(el.items.length).to.equal(5);
+      expect(el.getAttribute('aria-hidden')).to.be.null;
+    });
+  });
 });