From d091bd3b8f939d554f357fc176a74eeed467b867 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Thu, 20 Jan 2022 05:36:22 +0100 Subject: [PATCH] fix: make sure a11y help widget is not obscured (#44822) --- client/src/templates/Challenges/classic/editor.css | 5 +++++ client/src/templates/Challenges/classic/editor.tsx | 13 +------------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/client/src/templates/Challenges/classic/editor.css b/client/src/templates/Challenges/classic/editor.css index cec9e85d7c..2bf56652dd 100644 --- a/client/src/templates/Challenges/classic/editor.css +++ b/client/src/templates/Challenges/classic/editor.css @@ -86,3 +86,8 @@ background-color: var(--primary-background); z-index: -1; } + +/* Unless we increase the z-index the help widget gets obscured by the jaws */ +.accessibilityHelpWidget { + z-index: 1; +} diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 293a6ada84..820984df5f 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -489,13 +489,8 @@ const Editor = (props: EditorProps): JSX.Element => { descContainer.appendChild(desc); desc.innerHTML = description; highlightAllUnder(desc); - // TODO: the solution is probably just to use an overlay that's forced to - // follow the decorations. - // TODO: this is enough for Firefox, but Chrome needs more before the - // user can select text by clicking and dragging. + domNode.style.userSelect = 'text'; - // The z-index needs increasing as ViewZones default to below the lines. - domNode.style.zIndex = '10'; domNode.style.left = `${editor.getLayoutInfo().contentLeft}px`; domNode.style.width = `${editor.getLayoutInfo().contentWidth}px`; @@ -528,17 +523,11 @@ const Editor = (props: EditorProps): JSX.Element => { executeChallenge(); }; - // TODO: does it? - // The z-index needs increasing as ViewZones default to below the lines. - outputNode.style.zIndex = '10'; - outputNode.style.left = `${editor.getLayoutInfo().contentLeft}px`; outputNode.style.width = `${editor.getLayoutInfo().contentWidth}px`; - outputNode.style.top = getOutputZoneTop(); dataRef.current.outputNode = outputNode; - return outputNode; }