From 4681e4eb751b48b13558577ef2387d8d7eb9ede3 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 19 Jun 2024 15:48:50 +0200 Subject: [PATCH 1/2] fix(AnalyticalTable): improve focus border alignment --- .../AnalyticalTable/AnalyticalTable.module.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index 011377d5118..841a60b45c8 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -210,12 +210,17 @@ } &:focus { - outline-offset: calc(-1 * var(--sapContent_FocusWidth)); - outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); - - &[data-empty-row-cell] { - outline: none; - } + outline: none; + } + &:not([data-empty-row-cell]):focus::after { + content: ''; + inset-inline: 1px; + inset-block: 1px; + border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + position: absolute; + } + &[aria-selected='true']:not([data-empty-row-cell]):focus::after { + inset-block-end: 2px; } } From 4d11b4859af48dd4059f14ec6dabab53cc3b0981 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 19 Jun 2024 16:23:22 +0200 Subject: [PATCH 2/2] Update AnalyticalTable.module.css --- .../src/components/AnalyticalTable/AnalyticalTable.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css index 841a60b45c8..b0d8f69f809 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css @@ -214,6 +214,7 @@ } &:not([data-empty-row-cell]):focus::after { content: ''; + pointer-events: none; inset-inline: 1px; inset-block: 1px; border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);