gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: make sure a11y help widget is not obscured (#44822)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2022-01-20 05:36:22 +01:00
committed by GitHub
parent d050da3203
commit d091bd3b8f
2 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/templates/Challenges/classic/editor.css
View File

@ -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;
}

13
client/src/templates/Challenges/classic/editor.tsx
View File

@ -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;
}