chore: fix focus assertions in tests (#34129)

Author: layershifter

packages/react-components/react-list/library/src/components/List/List.cy.tsx

@@ -24,10 +24,10 @@ const mount = (element: JSX.Element) => {
  */
 const testSequence = (sequence: Array<string>) => {
   cy.get('#outside-button').click();
-  cy.get('#outside-button').focused();
+  cy.get('#outside-button').should('be.focused');
 
   cy.get('[data-test^=list-item-]').first().focus();
-  cy.get('[data-test^=list-item-]').focused();
+  cy.get('[data-test^=list-item-]').should('be.focused');
 
   for (const command of sequence) {
     if (command.startsWith('focused:')) {

packages/react-components/react-tabster/src/hooks/useFocusedElementChange.cy.tsx

@@ -25,10 +25,10 @@ describe('useFocusedElementChange', () => {
     mount(<Example callback={callback} />);
 
     cy.get('#anchor').click();
-    cy.get('#anchor').focused();
+    cy.get('#anchor').should('be.focused');
 
     cy.get('#button').focus();
-    cy.get('#button').focused();
+    cy.get('#button').should('be.focused');
 
     cy.get('@callback').should('have.been.calledWith', Cypress.sinon.match.instanceOf(HTMLButtonElement), {
       relatedTarget: Cypress.sinon.match.instanceOf(HTMLAnchorElement),
@@ -41,10 +41,10 @@ describe('useFocusedElementChange', () => {
     mount(<Example callback={callback} />);
 
     cy.get('#anchor').click();
-    cy.get('#anchor').focused();
+    cy.get('#anchor').should('be.focused');
 
     cy.get('#button').invoke('focus');
-    cy.get('#button').focused();
+    cy.get('#button').should('be.focused');
 
     cy.get('@callback').should('have.been.calledWith', Cypress.sinon.match.instanceOf(HTMLButtonElement), {
       relatedTarget: Cypress.sinon.match.instanceOf(HTMLAnchorElement),

packages/react-components/react-toolbar/library/src/components/Toolbar/Toolbar.cy.tsx

@@ -31,19 +31,19 @@ describe('Toolbar', () => {
       );
 
       cy.get(button).eq(0).click();
-      cy.get(button).eq(0).focused();
+      cy.get(button).eq(0).should('be.focused');
 
       cy.get(button).eq(0).type('{rightArrow}');
-      cy.get(button).eq(1).focused();
+      cy.get(button).eq(1).should('be.focused');
 
       cy.get(button).eq(1).type('{downArrow}');
-      cy.get(button).eq(2).focused();
+      cy.get(button).eq(2).should('be.focused');
 
       cy.get(button).eq(2).type('{upArrow}');
-      cy.get(button).eq(1).focused();
+      cy.get(button).eq(1).should('be.focused');
 
       cy.get(button).eq(1).type('{leftArrow}');
-      cy.get(button).eq(0).focused();
+      cy.get(button).eq(0).should('be.focused');
     });
 
     it('should have circular navigation', () => {
@@ -57,13 +57,13 @@ describe('Toolbar', () => {
       );
 
       cy.get(button).eq(3).click();
-      cy.get(button).eq(3).focused();
+      cy.get(button).eq(3).should('be.focused');
 
       cy.get(button).eq(3).type('{rightArrow}');
-      cy.get(button).eq(0).focused();
+      cy.get(button).eq(0).should('be.focused');
 
       cy.get(button).eq(0).type('{leftArrow}');
-      cy.get(button).eq(3).focused();
+      cy.get(button).eq(3).should('be.focused');
     });
   });
 
@@ -174,7 +174,8 @@ describe('ToolbarDivider', () => {
       </Toolbar>,
     );
 
-    cy.get('html').type('Tab').type('{rightarrow}').get(button).eq(0).focused();
+    cy.get('html').type('Tab').type('{rightarrow}');
+    cy.get(button).eq(0).should('be.focused');
   });
 
   it('should navigate with arrow key', () => {
@@ -190,7 +191,7 @@ describe('ToolbarDivider', () => {
     cy.get(button).eq(0).click();
 
     cy.get(button).eq(0).type('{rightarrow}');
-    cy.get(button).eq(1).focused();
+    cy.get(button).eq(1).should('be.focused');
   });
 
   it('should have circular navigation', () => {
@@ -206,6 +207,6 @@ describe('ToolbarDivider', () => {
     cy.get(button).eq(0).click();
 
     cy.get(button).eq(0).type('{leftarrow}');
-    cy.get(button).eq(2).focused();
+    cy.get(button).eq(2).should('be.focused');
   });
 });