diff --git a/src/CONST.ts b/src/CONST.ts index 8e240ac43ca1..e448a323ef7a 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -4239,6 +4239,7 @@ const CONST = { // The attribute used in the SelectionScraper.js helper to query all the DOM elements // that should be removed from the copied contents in the getHTMLOfSelection() method SELECTION_SCRAPER_HIDDEN_ELEMENT: 'selection-scrapper-hidden-element', + INNER_BOX_SHADOW_ELEMENT: 'inner-box-shadow-element', MODERATION: { MODERATOR_DECISION_PENDING: 'pending', MODERATOR_DECISION_PENDING_HIDE: 'pendingHide', diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index f4140f602f40..da04bd351216 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -93,7 +93,7 @@ function BaseListItem({ role={CONST.ROLE.BUTTON} hoverDimmingValue={1} hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, hoverStyle]} - dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} + dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: true}} onMouseDown={(e) => e.preventDefault()} id={keyForList ?? ''} style={pressableStyle} diff --git a/web/index.html b/web/index.html index 25a650c4412d..934a77134193 100644 --- a/web/index.html +++ b/web/index.html @@ -58,6 +58,20 @@ outline: 0; box-shadow: inset 0px 0px 0px 1px #5AB0FF; } + :focus-visible[data-inner-box-shadow-element]{ + overflow: hidden; + } + :focus-visible[data-inner-box-shadow-element]::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + box-shadow: inset 0px 0px 0px 1px #5AB0FF; + pointer-events: none; + z-index: 1000; + } :focus[data-focusvisible-polyfill] { outline: 0; box-shadow: inset 0px 0px 0px 1px #5AB0FF;