Eslint issues fixed: (#458)
* Eslint issues fixed: - jsx-a11y/no-noninteractive-tabindex - jsx-a11y/click-events-have-key-events - jsx-a11y/no-static-element-interactions * Fix for font aligns * drawer button font sizes updated --------- Co-authored-by: Makhmudjon Inadullaev <makhmudjon-inadullaev@gmail.com>
Makhmudjon Inadullaev committed
Mar 2, 2023 at 13:18 UTC
cba21ffd81e83b3953cc57bf2e73fbb51676cc7a
2 files changed
+4
-6
theme/src/components/code.js
+1
-2
@@ -28,8 +28,7 @@ function Code({className, children, live, noinline}) {
28
{({className, style, tokens, getLineProps, getTokenProps}) => (
29
<BorderBox as="pre" className={className} mt={0} mb={3} p={3} border={0} style={{...style, overflow: 'auto'}}>
30
{/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}
31
- {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
32
- <div aria-hidden="true" tabIndex={0} style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>
31
+ <div aria-hidden="true" style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>
32
33
</div>
34
{tokens.map((line, i) => (
theme/src/components/drawer.js
+3
-4
@@ -7,11 +7,11 @@ function Drawer({isOpen, onDismiss, children}) {
7
return (
8
<AnimatePresence>
9
{isOpen ? (
10
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
11
- <div
10
+ <button
11
// These event handlers fix a bug that caused links below the fold
12
// to be unclickable in macOS Safari.
13
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
14
+ style={{ textAlign: 'start', fontSize: '1rem', lineHeight: '1.5rem' }}
15
onMouseDown={event => event.preventDefault()}
16
onClick={event => event.target.focus()}
17
>
@@ -30,7 +30,6 @@ function Drawer({isOpen, onDismiss, children}) {
30
bg="rgba(0, 0, 0, 0.5)"
31
onClick={() => onDismiss()}
32
/>
33
-
33
<Fixed
34
key="drawer"
35
as={motion.div}
@@ -48,7 +47,7 @@ function Drawer({isOpen, onDismiss, children}) {
47
{children}
48
</Fixed>
49
</FocusOn>
51
- </div>
50
+ </button>
51
) : null}
52
</AnimatePresence>
53
)