fix(action-group): use the correct role for buttons when not selects

adobe · May 17, 2021 · 0aae8ed · 0aae8ed
1 parent 7fe85e9
commit 0aae8ed
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
@@ -295,7 +295,7 @@ export class ActionGroup extends SpectrumElement {
             }
             default:
                 this.buttons.forEach((option) => {
-                    option.removeAttribute('role');
+                    option.setAttribute('role', 'button');
                     option.tabIndex = 0;
                 });
                 this.removeAttribute('role');

diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
@@ -62,6 +62,9 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
+        expect(el.getAttribute('aria-label')).to.equal('Default Group');
+        expect(el.hasAttribute('role')).to.be.false;
+        expect(el.children[0].getAttribute('role')).to.equal('button');
     });
     it('loads [selects="single"] action-group accessibly', async () => {
         const el = await fixture<ActionGroup>(
@@ -77,6 +80,9 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
+        expect(el.getAttribute('aria-label')).to.equal('Selects Single Group');
+        expect(el.getAttribute('role')).to.equal('radiogroup');
+        expect(el.children[0].getAttribute('role')).to.equal('radio');
     });
     it('loads [selects="single"] action-group w/ selection accessibly', async () => {
         const el = await fixture<ActionGroup>(
@@ -110,6 +116,11 @@ describe('ActionGroup', () => {
         await elementUpdated(el);
 
         await expect(el).to.be.accessible();
+        expect(el.getAttribute('aria-label')).to.equal(
+            'Selects Multiple Group'
+        );
+        expect(el.getAttribute('role')).to.equal('group');
+        expect(el.children[0].getAttribute('role')).to.equal('checkbox');
     });
     it('loads [selects="multiple"] action-group w/ selection accessibly', async () => {
         const el = await fixture<ActionGroup>(