fix(ASSETS-17274): Visual list is not marked up as list. #275
Conversation
|
HTML with the current code changes: |
|
Ready for review but cannot add reviewers so tagging @majornista & @Pareesh, whoever has the chance to take a look. |
|
Changed apps list from container with |
There was a problem hiding this comment.
SelectList already implements the WAI-ARIA Listbox design pattern and changing the roles for it to behave as a static list would be a breaking change for the Select and ComboBox controls.
| @@ -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'); | |||
There was a problem hiding this comment.
This change should not be made to the SelectList control. The WAI-ARIA listbox role is a widget role, that will force a screen reader into forms mode, allowing the user to navigate using the arrow keys. A list is a static role defining content structure. Think about this as the difference between a <select> element and a ul or ol in HTML.
| @@ -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'); | |||
There was a problem hiding this comment.
This change should not be made to the SelectListItem control. The WAI-ARIA option role is a widget role, that will keep a screen reader in forms mode, allowing the user to navigate using the arrow keys. A listitem is a static role defining content structure. Think about this as the difference between an <option> element and a li in HTML.
| @@ -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'); | |||
There was a problem hiding this comment.
Test for option is correct.
| @@ -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'); | |||
There was a problem hiding this comment.
Test for listbox is correct.
https://jira.corp.adobe.com/browse/ASSETS-17274
Change help menu from
to
Description
Related Issue
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes
Checklist: