Merge 1f2567e into a13be74

Workday · Aug 5, 2024 · b95b05c · b95b05c
2 parents a13be74 + 1f2567e
commit b95b05c
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v10.3.50](https://github.com/Workday/canvas-kit/releases/tag/v10.3.50) (2024-08-05)
+
+### Components
+
+- fix(combobox): Use correct state for aria-selected ([#2849](https://github.com/Workday/canvas-kit/pull/2849)) ([@NicholasBoll](https://github.com/NicholasBoll))
+  This change fixes `aria-selected` in `Combobox.Menu.Item` components, but this does change the visuals of what is considered "selected". If you have any visual tests that have a screenshot of a selected state, the visual regression will have to be updated. The same is true for DOM-based snapshot tests. `aria-selected="true"` will now be added when an item is selected and not just when the virtual cursor is on the item. If your snapshot captures this DOM state, the snapshot will have to be updated.
 ## [v11.0.24](https://github.com/Workday/canvas-kit/releases/tag/v11.0.24) (2024-08-05)
 
 ### Components

diff --git a/cypress/integration/Autocomplete.spec.ts b/cypress/integration/Autocomplete.spec.ts
@@ -67,6 +67,10 @@ describe('Autocomplete', () => {
         cy.findByRole('combobox').should('not.have.attr', 'aria-activedescendant');
       });
 
+      it('should not have visual focus on any element', () => {
+        cy.get('[role="option"].focus').should('not.exist');
+      });
+
       it('should not have aria-selected=true on any elements', () => {
         cy.get('[aria-selected=true]').should('not.exist');
       });
@@ -81,12 +85,16 @@ describe('Autocomplete', () => {
           cy.findAllByRole('combobox').should('not.have.attr', 'aria-activedescendant');
         });
 
+        it('should not have visual focus on the first item', () => {
+          cy.findAllByRole('option').eq(0).should('not.have.class', 'focus');
+        });
+
         it('should not set aria-selected to the first option', () => {
           cy.findAllByRole('option').eq(0).should('have.not.attr', 'aria-selected');
         });
       });
 
-      context('when a value is entered', () => {
+      context('when "Red" is typed', () => {
         beforeEach(() => {
           cy.findByRole('combobox').type('Red', {delay: 1});
           waitForAutocompleteReady();
@@ -139,8 +147,8 @@ describe('Autocomplete', () => {
             );
           });
 
-          it('should set aria-selected to the first option', () => {
-            cy.findAllByRole('option').eq(0).should('have.attr', 'aria-selected', 'true');
+          it('should set visual focus to the first option', () => {
+            cy.findAllByRole('option').eq(0).should('have.class', 'focus');
           });
 
           context('when the user presses the enter key', () => {
@@ -156,7 +164,7 @@ describe('Autocomplete', () => {
               cy.findByRole('listbox').should('not.exist');
             });
 
-            context('when the use hits the "2" key', () => {
+            context('when the user hits the "2" key', () => {
               beforeEach(() => {
                 cy.findAllByRole('combobox').type('2');
                 waitForAutocompleteReady();
@@ -173,6 +181,10 @@ describe('Autocomplete', () => {
               it.skip('should change the filtered results', () => {
                 cy.findByRole('option', {name: 'Red Apple 121'}).should('be.visible');
               });
+
+              it('should set aria-selected to the first option', () => {
+                cy.findAllByRole('option').eq(0).should('have.attr', 'aria-selected', 'true');
+              });
             });
           });
 
@@ -230,8 +242,12 @@ describe('Autocomplete', () => {
             );
           });
 
-          it('should set aria-selected to the second option', () => {
-            cy.findAllByRole('option').eq(1).should('have.attr', 'aria-selected', 'true');
+          it('should set visual focus on the second option', () => {
+            cy.findAllByRole('option').eq(1).should('have.class', 'focus');
+          });
+
+          it('should not have aria-selected=true on any elements', () => {
+            cy.get('[aria-selected=true]').should('not.exist');
           });
         });
 
@@ -253,8 +269,12 @@ describe('Autocomplete', () => {
               );
             });
 
-            it('should set aria-selected to the first option', () => {
-              cy.findAllByRole('option').eq(0).should('have.attr', 'aria-selected', 'true');
+            it('should set visual focus on the first option', () => {
+              cy.findAllByRole('option').eq(0).should('have.class', 'focus');
+            });
+
+            it('should not have aria-selected=true on any elements', () => {
+              cy.get('[aria-selected=true]').should('not.exist');
             });
           });
 
@@ -269,8 +289,12 @@ describe('Autocomplete', () => {
               );
             });
 
-            it('should set aria-selected to the last option', () => {
-              cy.findAllByRole('option').eq(3).should('have.attr', 'aria-selected', 'true');
+            it('should set visual focus on the last option', () => {
+              cy.findAllByRole('option').eq(3).should('have.class', 'focus');
+            });
+
+            it('should not have aria-selected=true on any elements', () => {
+              cy.get('[aria-selected=true]').should('not.exist');
             });
           });
 
@@ -285,8 +309,12 @@ describe('Autocomplete', () => {
               );
             });
 
-            it('should set aria-selected to the third option', () => {
-              cy.findAllByRole('option').eq(2).should('have.attr', 'aria-selected', 'true');
+            it('should set visual focus on the third option', () => {
+              cy.findAllByRole('option').eq(2).should('have.class', 'focus');
+            });
+
+            it('should not have aria-selected=true on any elements', () => {
+              cy.get('[aria-selected=true]').should('not.exist');
             });
           });
 
@@ -300,8 +328,12 @@ describe('Autocomplete', () => {
               );
             });
 
-            it('should set aria-selected to the first option', () => {
-              cy.findAllByRole('option').eq(0).should('have.attr', 'aria-selected', 'true');
+            it('should set visual focus on the first option', () => {
+              cy.findAllByRole('option').eq(0).should('have.class', 'focus');
+            });
+
+            it('should not have aria-selected=true on any elements', () => {
+              cy.get('[aria-selected=true]').should('not.exist');
             });
           });
         });