Fix keyboard navigation (#375)

closes #371 --------- Co-authored-by: chrisruk <chrisruk@users.noreply.github.com>
RaspberryPiFoundation · Mar 3, 2023 · cc445b0 · cc445b0
1 parent 89b7bf3
commit cc445b0
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix keyboard navigation (#375)
+
 ## [0.13.0] - 2023-03-02
 
 ### Added

diff --git a/src/components/Editor/FontSizeSelector/FontSizeSelector.js b/src/components/Editor/FontSizeSelector/FontSizeSelector.js
@@ -23,21 +23,21 @@ const FontSizeSelector = () => {
   return (
     <div className='font-size-selector'>
       <div className='font-btn font-btn--small' onClick={() => setFontSize('small')}>
-        <div className={`font-btn__icon font-btn__icon--small ${fontSize==='small' ? 'font-btn__icon--active' : ''}`}>
+        <button className={`font-btn__icon font-btn__icon--small ${fontSize==='small' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={15}/>
-        </div>
+        </button>
         <p>{t('header.settingsMenu.textSizeOptions.small')}</p>
       </div>
       <div className='font-btn font-btn--medium' onClick={() => setFontSize('medium')}>
-      <div className={`font-btn__icon font-btn__icon--medium ${fontSize==='medium' ? 'font-btn__icon--active' : ''}`}>
+        <button className={`font-btn__icon font-btn__icon--medium ${fontSize==='medium' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={23}/>
-        </div>
+        </button>
         <p>{t('header.settingsMenu.textSizeOptions.medium')}</p>
       </div>
       <div className='font-btn font-btn--large' onClick={() => setFontSize('large')}>
-      <div className={`font-btn__icon font-btn__icon--large ${fontSize==='large' ? 'font-btn__icon--active' : ''}`}>
+        <button className={`font-btn__icon font-btn__icon--large ${fontSize==='large' ? 'font-btn__icon--active' : ''}`}>
           <FontIcon size={36}/>
-        </div>
+        </button>
         <p>{t('header.settingsMenu.textSizeOptions.large')}</p>
       </div>
     </div>

diff --git a/src/components/Menus/Dropdown/Dropdown.js b/src/components/Menus/Dropdown/Dropdown.js
@@ -25,8 +25,14 @@ const Dropdown = (props) => {
     };
   }, [dropdown]);
 
+  const handleKeyDown = (event) => {
+    if (event.key === 'Escape'){
+      setOpen(false);
+    }
+  }
+
   return (
-    <div className='dropdown' ref={dropdown}>
+    <div className='dropdown' ref={dropdown} onKeyDown={handleKeyDown}>
       <Button
         className={`btn--tertiary dropdown-button${isOpen ? ' dropdown-button--active' : ''}`}
         onClickHandler={() => setOpen(!isOpen)}

diff --git a/src/components/Menus/SettingsMenu/SettingsMenu.js b/src/components/Menus/SettingsMenu/SettingsMenu.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import FontSizeSelector from "../../Editor/FontSizeSelector/FontSizeSelector";
 import ThemeToggle from "../../ThemeToggle/ThemeToggle";
 import './SettingsMenu.scss'
@@ -7,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 const SettingsMenu = () => {
 
   const {t} = useTranslation()
-  
+
   return (
     <div className='dropdown-container dropdown-container--bottom settings-menu'>
       <h2>{t('header.settingsMenu.heading')}</h2>

diff --git a/src/components/ThemeToggle/ThemeToggle.js b/src/components/ThemeToggle/ThemeToggle.js
@@ -24,15 +24,15 @@ const ThemeToggle = () => {
   return (
     <div className='theme-toggle'>
       <div className='theme-btn theme-btn--light' onClick={() => setTheme('light')}>
-        <div className={`theme-btn__icon theme-btn__icon--light ${!isDarkMode ? 'theme-btn__icon--active' : null}`}>
+        <button className={`theme-btn__icon theme-btn__icon--light ${!isDarkMode ? 'theme-btn__icon--active' : null}`}>
           <SunIcon />
-        </div>
+        </button>
         <p>{t('header.settingsMenu.themeOptions.light')}</p>
       </div>
       <div className='theme-btn theme-btn--dark' onClick={() => setTheme('dark')}>
-        <div className={`theme-btn__icon theme-btn__icon--dark ${isDarkMode ? 'theme-btn__icon--active' : null}`}>
+        <button className={`theme-btn__icon theme-btn__icon--dark ${isDarkMode ? 'theme-btn__icon--active' : null}`}>
           <MoonIcon />
-        </div>
+        </button>
         <p>{t('header.settingsMenu.themeOptions.dark')}</p>
       </div>
     </div>