Add aria-describedby and aria-labeledby

src/js/step.js

@@ -184,9 +184,15 @@ export class Step extends Evented {
    *
    * @private
    * @param {HTMLElement} content The content to append the text to
+   * @param {string} descriptionId The id to set on the shepherd-text element
+   * for the parent element to use for aria-describedby
    */
-  _addContent(content) {
-    const text = createFromHTML('<div class="shepherd-text"></div>');
+  _addContent(content, descriptionId) {
+    const text = createFromHTML(
+      `<div class="shepherd-text"
+       id="${descriptionId}"
+       ></div>`
+    );
     let paragraphs = this.options.text;
 
     if (isFunction(paragraphs)) {
@@ -271,9 +277,11 @@ export class Step extends Evented {
   _createTooltipContent() {
     const content = document.createElement('div');
     const classes = this.options.classes || '';
+    const descriptionId = `${this.id}-description`;
+    const labelId = `${this.id}-label`;
     const element = createFromHTML(
-      `<div class="${classes}" 
-       data-shepherd-step-id="${this.id}" 
+      `<div class="${classes}"
+       data-shepherd-step-id="${this.id}"
        role="dialog"
        tabindex="0">`
     );
@@ -283,6 +291,8 @@ export class Step extends Evented {
       const title = document.createElement('h3');
       title.classList.add('shepherd-title');
       title.innerHTML = `${this.options.title}`;
+      title.id = labelId;
+      element.setAttribute('aria-labeledby', labelId);
       header.appendChild(title);
       element.classList.add('shepherd-has-title');
     }
@@ -293,7 +303,8 @@ export class Step extends Evented {
     content.appendChild(header);
 
     if (!isUndefined(this.options.text)) {
-      this._addContent(content);
+      this._addContent(content, descriptionId);
+      element.setAttribute('aria-describedby', descriptionId);
     }
 
     this._addButtons(content);

test/unit/step.spec.js

@@ -597,4 +597,22 @@ describe('Tour | Step', () => {
       cancelLinkStub.restore();
     });
   });
+
+  describe('_createTooltipContent', () => {
+    it('ARIA attributes set', () => {
+      const step = new Step(null, {
+        id: 'test-step',
+        text: 'Lorem Ipsum',
+        title: 'Test'
+      });
+
+      const element = step._createTooltipContent();
+
+      expect(element.getAttribute('aria-labeledby')).toBe('test-step-label');
+      expect(element.querySelector('.shepherd-title').id).toBe('test-step-label');
+
+      expect(element.getAttribute('aria-describedby')).toBe('test-step-description');
+      expect(element.querySelector('.shepherd-text').id).toBe('test-step-description');
+    });
+  });
 });