expect(element).toHaveFocus() Expected element with focus: <button aria-controls="uid--55-accordion-section-content" aria-disabled="false" aria-expanded="false" class="" id="uid--55-accordion-section-header" style="margin: 0px; padding: 0px; width: 100%; overflow: hidden; background: transparent; text-decoration: none; box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; display: flex; flex-direction: row; align-items: center; min-width: auto; border-start-start-radius: 11px; border-start-end-radius: 11px;" type="button"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 16px 0px 16px 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; flex-grow: 1; text-align: start;"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; padding-inline-end: 12px; padding-inline-start: 16px;">Section 1</div></div><span class="" style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-image: url(caret-down-bold.svg); mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; margin-inline-end: 16px;" /></button> Received element with focus: <button aria-controls="uid--56-accordion-section-content" aria-disabled="false" aria-expanded="false" class="" data-test-id="section-2-header" id="uid--56-accordion-section-header" style="margin: 0px; padding: 0px; width: 100%; overflow: hidden; background: transparent; text-decoration: none; box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; display: flex; flex-direction: row; align-items: center; min-width: auto;" type="button"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 16px 0px 16px 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; flex-grow: 1; text-align: start;"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; padding-inline-end: 12px; padding-inline-start: 16px;">Section 2</div></div><span class="" data-test-id="section-2-caret-icon" style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-image: url(caret-down-bold.svg); mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; margin-inline-end: 16px;" /></button> at Object.toHaveFocus (packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx:720:29)

expect(element).toHaveFocus() Expected element with focus: <button aria-controls="uid--58-accordion-section-content" aria-disabled="false" aria-expanded="false" class="" id="uid--58-accordion-section-header" style="margin: 0px; padding: 0px; width: 100%; overflow: hidden; background: transparent; text-decoration: none; box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; display: flex; flex-direction: row; align-items: center; min-width: auto; border-start-start-radius: 11px; border-start-end-radius: 11px;" type="button"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 16px 0px 16px 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; flex-grow: 1; text-align: start;"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; padding-inline-end: 12px; padding-inline-start: 16px;">Section 1</div></div><span class="" style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-image: url(caret-down-bold.svg); mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; margin-inline-end: 16px;" /></button> Received element with focus: <button aria-controls="uid--59-accordion-section-content" aria-disabled="false" aria-expanded="false" class="" id="uid--59-accordion-section-header" style="margin: 0px; padding: 0px; width: 100%; overflow: hidden; background: transparent; text-decoration: none; box-sizing: border-box; user-select: none; outline: none; line-height: normal; cursor: pointer; display: flex; flex-direction: row; align-items: center; min-width: auto; border-end-start-radius: 11px; border-end-end-radius: 11px;" type="button"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 16px 0px 16px 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; flex-grow: 1; text-align: start;"><div class="" style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: relative; z-index: 0; min-height: 0; min-width: 0; padding-inline-end: 12px; padding-inline-start: 16px;">Section 2</div></div><span class="" style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-image: url(caret-down-bold.svg); mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.64); width: 16px; height: 16px; margin-inline-end: 16px;" /></button> at Object.toHaveFocus (packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx:746:29)

Process completed with exit code 1.