Fix visibile outline in /community section headers (#3127)

* replace clickable div with button inside Community/Section
iterative · Dec 23, 2021 · 1438b9d · 1438b9d
1 parent 3fab9cd
commit 1438b9d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/src/components/Community/Section/index.tsx b/src/components/Community/Section/index.tsx
@@ -4,7 +4,6 @@ import { useLocation } from '@reach/router'
 import { Collapse } from 'react-collapse'
 import { useWindowSize } from 'react-use'
 
-import { isTriggeredFromKB } from '../../../utils/front/keyboard'
 import { screens } from '../../../../config/postcss/media'
 
 import * as styles from './styles.module.css'
@@ -38,14 +37,6 @@ const Section: React.FC<ICommunitySection> = ({
     () => setIsContentVisible(!isContentVisible),
     [isContentVisible]
   )
-  const toggleFromKeyboard = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (isTriggeredFromKB(e)) {
-        toggleVisibility()
-      }
-    },
-    [toggleVisibility]
-  )
   const { width } = useWindowSize()
   const location = useLocation()
 
@@ -62,13 +53,10 @@ const Section: React.FC<ICommunitySection> = ({
       className={cn(styles.container, background && styles.hasBg)}
       id={anchor}
     >
-      <div
+      <button
         className={styles.header}
         style={{ color }}
         onClick={toggleVisibility}
-        onKeyDown={toggleFromKeyboard}
-        role="button"
-        tabIndex={0}
       >
         <img className={styles.icon} src={icon} alt="" />
         <div>
@@ -85,7 +73,7 @@ const Section: React.FC<ICommunitySection> = ({
             {mobileDescription}
           </div>
         </div>
-      </div>
+      </button>
       {background && <img className={styles.picture} src={background} alt="" />}
 
       {isTablet ? (

diff --git a/src/components/Community/Section/styles.module.css b/src/components/Community/Section/styles.module.css
@@ -35,10 +35,14 @@
 
 .header {
   display: flex;
+  text-align: left;
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  font-family: var(--font-brandon);
 }
 
 .title {
-  font-family: var(--font-brandon);
   font-size: 40px;
   font-weight: 500;
   line-height: 60px;