diff --git a/coral-component-list/src/scripts/SelectList.js b/coral-component-list/src/scripts/SelectList.js index e0983564b3..ee3c060b10 100644 --- a/coral-component-list/src/scripts/SelectList.js +++ b/coral-component-list/src/scripts/SelectList.js @@ -526,7 +526,7 @@ const SelectList = Decorator(class extends BaseComponent(HTMLElement) { // adds the role to support accessibility if (!this.hasAttribute('role')) { - this.setAttribute('role', 'listbox'); + this.setAttribute('role', 'list'); } if (!this.hasAttribute('aria-label')) { diff --git a/coral-component-list/src/scripts/SelectListItem.js b/coral-component-list/src/scripts/SelectListItem.js index c2f968c90d..366c042ba2 100644 --- a/coral-component-list/src/scripts/SelectListItem.js +++ b/coral-component-list/src/scripts/SelectListItem.js @@ -221,7 +221,7 @@ const SelectListItem = Decorator(class extends BaseComponent(HTMLElement) { this.classList.add(CLASSNAME); if (!this.hasAttribute('role')) { - this.setAttribute('role', 'option'); + this.setAttribute('role', 'listitem'); } // Support cloneNode diff --git a/coral-component-list/src/tests/test.SelectList.Item.js b/coral-component-list/src/tests/test.SelectList.Item.js index 8d8107f458..f7a51098c3 100644 --- a/coral-component-list/src/tests/test.SelectList.Item.js +++ b/coral-component-list/src/tests/test.SelectList.Item.js @@ -23,7 +23,7 @@ describe('SelectList.Item', function () { describe('Instantiation', function () { function testDefaultInstance(el) { expect(el.classList.contains('_coral-Menu-item')).to.be.true; - expect(el.getAttribute('role')).to.equal('option'); + expect(el.getAttribute('role')).to.equal('listitem'); } it('should be possible using new', function () { diff --git a/coral-component-list/src/tests/test.SelectList.js b/coral-component-list/src/tests/test.SelectList.js index 4875b1709b..e74f106ff1 100644 --- a/coral-component-list/src/tests/test.SelectList.js +++ b/coral-component-list/src/tests/test.SelectList.js @@ -17,7 +17,7 @@ describe('SelectList', function () { describe('Instantiation', function () { function testDefaultInstance(el) { expect(el.classList.contains('_coral-Menu')).to.be.true; - expect(el.getAttribute('role')).equal('listbox'); + expect(el.getAttribute('role')).equal('list'); } it('should be possible using new', function () { diff --git a/coral-component-shell/src/scripts/ShellHelp.js b/coral-component-shell/src/scripts/ShellHelp.js index 9e05f0e978..81edcf2b9a 100644 --- a/coral-component-shell/src/scripts/ShellHelp.js +++ b/coral-component-shell/src/scripts/ShellHelp.js @@ -90,7 +90,9 @@ class ShellHelp extends BaseComponent(HTMLElement) { const selector = `#${this.id} > a[is="coral-shell-help-item"], coral-shell-help-separator`; Array.prototype.forEach.call(this.querySelectorAll(selector), (item) => { - this._elements.items.appendChild(item); + var listItem = document.createElement('li'); + listItem.appendChild(item); + this._elements.items.appendChild(listItem); }); } diff --git a/coral-component-shell/src/styles/help/index.styl b/coral-component-shell/src/styles/help/index.styl index 688bfd3512..769cc5c767 100644 --- a/coral-component-shell/src/styles/help/index.styl +++ b/coral-component-shell/src/styles/help/index.styl @@ -38,6 +38,7 @@ $shell-loading-spacing = 16px; ._coral-Shell-help-items { padding: 3px 0; + margin: 0; } ._coral-Shell-help-result-item { diff --git a/coral-component-shell/src/templates/help.html b/coral-component-shell/src/templates/help.html index 44147ea863..9d470f967a 100644 --- a/coral-component-shell/src/templates/help.html +++ b/coral-component-shell/src/templates/help.html @@ -4,7 +4,7 @@