Eslint issues fixed: (npm#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 <[email protected]>
timscharfenort8 · Mar 2, 2023 · cba21ff · cba21ff
1 parent c0408b7
commit cba21ff
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/theme/src/components/code.js b/theme/src/components/code.js
@@ -28,8 +28,7 @@ function Code({className, children, live, noinline}) {
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <BorderBox as="pre" className={className} mt={0} mb={3} p={3} border={0} style={{...style, overflow: 'auto'}}>
             {/* This is the scroll handle, it is supposed to be focused with keyboard and scroll a wide codebox horizontally */}
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-            <div aria-hidden="true" tabIndex={0} style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>
+            <div aria-hidden="true" style={scrollHandleStyle} ref={scrollHandleRef} aria-label={code}>
               &nbsp;
             </div>
             {tokens.map((line, i) => (

diff --git a/theme/src/components/drawer.js b/theme/src/components/drawer.js
@@ -7,11 +7,11 @@ function Drawer({isOpen, onDismiss, children}) {
   return (
     <AnimatePresence>
       {isOpen ? (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        <div
+        <button
           // These event handlers fix a bug that caused links below the fold
           // to be unclickable in macOS Safari.
           // Reference: https://github.com/theKashey/react-focus-lock/issues/79
+          style={{ textAlign: 'start', fontSize: '1rem', lineHeight: '1.5rem' }}
           onMouseDown={event => event.preventDefault()}
           onClick={event => event.target.focus()}
         >
@@ -30,7 +30,6 @@ function Drawer({isOpen, onDismiss, children}) {
               bg="rgba(0, 0, 0, 0.5)"
               onClick={() => onDismiss()}
             />
-
             <Fixed
               key="drawer"
               as={motion.div}
@@ -48,7 +47,7 @@ function Drawer({isOpen, onDismiss, children}) {
               {children}
             </Fixed>
           </FocusOn>
-        </div>
+        </button>
       ) : null}
     </AnimatePresence>
   )