From edd5b4284904092dba66e01b61cf3bd9c282f398 Mon Sep 17 00:00:00 2001
From: ionelc <ionelc@ensemble.com>
Date: Fri, 20 Jan 2023 11:07:18 +0200
Subject: [PATCH 1/2] change help menu markdown to ul with li

---
 coral-component-shell/src/scripts/ShellHelp.js   | 4 +++-
 coral-component-shell/src/styles/help/index.styl | 1 +
 coral-component-shell/src/templates/help.html    | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

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 @@
 <div handle="contentWrapper">
   <label class="u-coral-screenReaderOnly" id="{{labelId}}">{{data.i18n.get('Search for Help')}}</label>
   <coral-search class="_coral-Shell-help-search" handle="search" placeholder="{{data.i18n.get('Search for Help')}}" labelledby="{{labelId}}"></coral-search>
-  <div class="_coral-Shell-help-items" handle="items"></div>
+  <ul class="_coral-Shell-help-items" handle="items"></ul>
   <coral-anchorlist class="_coral-Shell-help-results" handle="results" hidden></coral-anchorlist>
   <div class="_coral-Shell-help-resultMessage" handle="resultMessage" role="status" hidden></div>
   <div class="_coral-Shell-help-loading" handle="loading" role="status" hidden>

From 5d5cd49fd01885c73ed46a00373a3562e7a6c9f1 Mon Sep 17 00:00:00 2001
From: ionelc <ionelc@ensemble.com>
Date: Mon, 23 Jan 2023 16:15:20 +0200
Subject: [PATCH 2/2] change apps list role=listbox to role=list and items
 role=option to role=listitem

---
 coral-component-list/src/scripts/SelectList.js         | 2 +-
 coral-component-list/src/scripts/SelectListItem.js     | 2 +-
 coral-component-list/src/tests/test.SelectList.Item.js | 2 +-
 coral-component-list/src/tests/test.SelectList.js      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

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 () {