test(accordion-web): update focus handling in tests

Author: samuelreichert

packages/pluggableWidgets/accordion-web/src/components/__tests__/Accordion.spec.tsx

@@ -55,8 +55,8 @@ describe("Accordion", () => {
 
             const accordion = renderAccordion({ groups });
             const buttons = accordion.getAllByRole("button");
-            buttons[0].focus();
 
+            await user.tab();
             await user.keyboard("{ArrowDown}");
 
             expect(buttons[1]).toHaveFocus();
@@ -69,8 +69,9 @@ describe("Accordion", () => {
             const accordion = renderAccordion({ groups });
 
             const buttons = accordion.getAllByRole("button");
-            buttons[buttons.length - 1].focus();
 
+            await user.tab();
+            await user.tab();
             await user.keyboard("{ArrowUp}");
 
             expect(buttons[0]).toHaveFocus();
@@ -86,8 +87,10 @@ describe("Accordion", () => {
             const accordion = renderAccordion({ groups });
 
             const buttons = accordion.getAllByRole("button");
-            buttons[buttons.length - 1].focus();
 
+            await user.tab();
+            await user.tab();
+            await user.tab();
             await user.keyboard("{Home}");
 
             expect(buttons[0]).toHaveFocus();
@@ -102,8 +105,10 @@ describe("Accordion", () => {
 
             const accordion = renderAccordion({ groups });
             const buttons = accordion.getAllByRole("button");
-            buttons[buttons.length - 1].focus();
 
+            await user.tab();
+            await user.tab();
+            await user.tab();
             await user.keyboard("{End}");
 
             expect(buttons[buttons.length - 1]).toHaveFocus();
@@ -118,8 +123,10 @@ describe("Accordion", () => {
 
             const accordion = renderAccordion({ groups });
             const buttons = accordion.getAllByRole("button");
-            buttons[buttons.length - 1].focus();
 
+            await user.tab();
+            await user.tab();
+            await user.tab();
             await user.keyboard("{ArrowDown}");
 
             expect(buttons[buttons.length - 1]).toHaveFocus();

packages/pluggableWidgets/accordion-web/src/components/__tests__/AccordionGroup.spec.tsx

@@ -303,7 +303,7 @@ describe("AccordionGroup", () => {
             expect(accordionGroup.asFragment()).toMatchSnapshot();
         });
 
-        it("renders the content when the group becomes visible dinamically", () => {
+        it("renders the content when the group becomes visible dynamically", () => {
             const accordionGroup = renderAccordionGroup({
                 collapsed: false,
                 visible: false

packages/pluggableWidgets/accordion-web/src/components/__tests__/__snapshots__/AccordionGroup.spec.tsx.snap

@@ -358,7 +358,7 @@ exports[`AccordionGroup loadContent behaviour renders widgets when 'loadContent'
 </DocumentFragment>
 `;
 
-exports[`AccordionGroup not collapsible renders the content when the group becomes visible dinamically 1`] = `
+exports[`AccordionGroup not collapsible renders the content when the group becomes visible dynamically 1`] = `
 <DocumentFragment>
   <section
     class="widget-accordion-group class-name"