From 0198e4aaf9c2be8de5f022b7f75031e6406f2b3c Mon Sep 17 00:00:00 2001 From: Katie Bobbe Date: Wed, 19 Feb 2025 14:50:37 -0700 Subject: [PATCH 1/2] fix(list): address accessibility console error --- .../src/components/stable/gux-list/gux-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx index 8423565d99..ebc6da609b 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx @@ -85,7 +85,7 @@ export class GuxList { } private renderFocusTarget(): JSX.Element { - return () as JSX.Element; + return () as JSX.Element; } render(): JSX.Element { From c5365aba74489f8ac36a3cf3906172d64351901f Mon Sep 17 00:00:00 2001 From: Katie Bobbe Date: Fri, 21 Feb 2025 13:26:29 -0700 Subject: [PATCH 2/2] fix(list): remove invalid focus target descendant from list --- .../gux-action-button.spec.ts.snap | 3 +-- .../gux-context-menu.spec.ts.snap | 3 +-- .../gux-list/gux-list-item/gux-list-item.tsx | 25 +------------------ .../components/stable/gux-list/gux-list.tsx | 9 ++----- .../tests/__snapshots__/gux-list.e2e.ts.snap | 2 +- .../tests/__snapshots__/gux-list.spec.ts.snap | 3 +-- .../tests/__snapshots__/gux-popup.e2e.ts.snap | 8 +++--- .../tests/__snapshots__/gux-table.e2e.ts.snap | 4 +-- 8 files changed, 13 insertions(+), 44 deletions(-) diff --git a/packages/genesys-spark-components/src/components/stable/gux-action-button/tests/__snapshots__/gux-action-button.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-action-button/tests/__snapshots__/gux-action-button.spec.ts.snap index 85897abe44..2c4b3368da 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-action-button/tests/__snapshots__/gux-action-button.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-action-button/tests/__snapshots__/gux-action-button.spec.ts.snap @@ -18,9 +18,8 @@ exports[`gux-action-button renders 1`] = `
- + diff --git a/packages/genesys-spark-components/src/components/stable/gux-context-menu/tests/__snapshots__/gux-context-menu.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-context-menu/tests/__snapshots__/gux-context-menu.spec.ts.snap index 9a66d39d2c..656e644ad4 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-context-menu/tests/__snapshots__/gux-context-menu.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-context-menu/tests/__snapshots__/gux-context-menu.spec.ts.snap @@ -12,9 +12,8 @@ exports[`gux-context-menu renders 1`] = `
- + diff --git a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list-item/gux-list-item.tsx b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list-item/gux-list-item.tsx index ff041f3161..c5a4401e3c 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list-item/gux-list-item.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list-item/gux-list-item.tsx @@ -1,6 +1,4 @@ -import { Component, Element, h, Host, JSX, Listen, Prop } from '@stencil/core'; - -import { getClosestElement } from '@utils/dom/get-closest-element'; +import { Component, Element, h, Host, JSX, Prop } from '@stencil/core'; /** * @slot - text @@ -18,27 +16,6 @@ export class GuxListItem { @Prop() disabled: boolean = false; - @Listen('mouseup') - onMouseup(): void { - this.focusParentList(); - } - - @Listen('mouseover') - onMouseover(): void { - this.focusParentList(); - } - - private focusParentList(): void { - const parentList = getClosestElement('gux-list', this.root) as HTMLElement; - - if (parentList && parentList.shadowRoot.activeElement === null) { - this.root.blur(); - parentList.focus({ - preventScroll: true - }); - } - } - render(): JSX.Element { return ( diff --git a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx index ebc6da609b..63236c1ccc 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx +++ b/packages/genesys-spark-components/src/components/stable/gux-list/gux-list.tsx @@ -28,7 +28,7 @@ const validFocusableItems = ['gux-list-item']; @Component({ styleUrl: 'gux-list.scss', tag: 'gux-list', - shadow: { delegatesFocus: true } + shadow: true }) export class GuxList { @Element() @@ -84,14 +84,9 @@ export class GuxList { last(this.root, validFocusableItems); } - private renderFocusTarget(): JSX.Element { - return () as JSX.Element; - } - render(): JSX.Element { return ( - - {this.renderFocusTarget()} + ) as JSX.Element; diff --git a/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.e2e.ts.snap index 8a07e87df0..a1f7162a99 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.e2e.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.e2e.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gux-list #render should render component as expected 1`] = `" Test1 Test2 Test3 Test4 "`; +exports[`gux-list #render should render component as expected 1`] = `" Test1 Test2 Test3 Test4 "`; diff --git a/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.spec.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.spec.ts.snap index a2ba01ff8e..b4c28ed814 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.spec.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-list/tests/__snapshots__/gux-list.spec.ts.snap @@ -1,9 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`gux-list #render should render component as expected 1`] = ` - + diff --git a/packages/genesys-spark-components/src/components/stable/gux-popup/tests/__snapshots__/gux-popup.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-popup/tests/__snapshots__/gux-popup.e2e.ts.snap index 7d8c3d0925..5e2e8dbfd1 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-popup/tests/__snapshots__/gux-popup.e2e.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-popup/tests/__snapshots__/gux-popup.e2e.ts.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`gux-popup should display component as expected (1) 1`] = `" Target Item 1 Item 2 Item 3 "`; +exports[`gux-popup should display component as expected (1) 1`] = `" Target Item 1 Item 2 Item 3 "`; -exports[`gux-popup should display component as expected (2) 1`] = `" Target Item 1 Item 2 Item 3 "`; +exports[`gux-popup should display component as expected (2) 1`] = `" Target Item 1 Item 2 Item 3 "`; -exports[`gux-popup should display component as expected (3) 1`] = `" Target Item 1 Item 2 Item 3 "`; +exports[`gux-popup should display component as expected (3) 1`] = `" Target Item 1 Item 2 Item 3 "`; -exports[`gux-popup should display component as expected (4) 1`] = `" Target Item 1 Item 2 Item 3 "`; +exports[`gux-popup should display component as expected (4) 1`] = `" Target Item 1 Item 2 Item 3 "`; diff --git a/packages/genesys-spark-components/src/components/stable/gux-table/tests/__snapshots__/gux-table.e2e.ts.snap b/packages/genesys-spark-components/src/components/stable/gux-table/tests/__snapshots__/gux-table.e2e.ts.snap index ea24b27f3e..e71ac1590b 100644 --- a/packages/genesys-spark-components/src/components/stable/gux-table/tests/__snapshots__/gux-table.e2e.ts.snap +++ b/packages/genesys-spark-components/src/components/stable/gux-table/tests/__snapshots__/gux-table.e2e.ts.snap @@ -4,9 +4,9 @@ exports[`gux-table #render empty table 1`] = `"
First name Last name Age Action
"`; -exports[`gux-table #render should render a gux-table-select menu 1`] = `"
All on page None Bring selected to top
First name Last name Age Action
John Doe 25 Delete
Jane Doe 23 Delete
Jane Doe 21 Delete
Jane Doe 23 Delete
"`; +exports[`gux-table #render should render a gux-table-select menu 1`] = `"
All on page None Bring selected to top
First name Last name Age Action
John Doe 25 Delete
Jane Doe 23 Delete
Jane Doe 21 Delete
Jane Doe 23 Delete
"`; -exports[`gux-table #render should render a gux-table-select menu with i18n strings 1`] = `"
All on page None Bring selected to top
First name Last name Age Action
John Doe 25 Delete
Jane Doe 23 Delete
Jane Doe 21 Delete
Jane Doe 23 Delete
"`; +exports[`gux-table #render should render a gux-table-select menu with i18n strings 1`] = `"
All on page None Bring selected to top
First name Last name Age Action
John Doe 25 Delete
Jane Doe 23 Delete
Jane Doe 21 Delete
Jane Doe 23 Delete
"`; exports[`gux-table #render should render compact data table 1`] = `"
First name Last name Age Action
John Doe 25 Delete
Jane Doe 23 Delete
Jane Doe 21 Delete
Jane Doe 23 Delete
"`;