fix: accessibility-related warnings (#1012)

leic-pt · Mar 20, 2024 · 6d8eb76 · 6d8eb76
1 parent a814225
commit 6d8eb76
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 5 deletions.
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -24,7 +24,7 @@ const Navbar = ({ toggleSidebar }) => {
   return (
     <header className='navbar'>
       {toggleSidebar && (
-        <button className='sidebar-button' onClick={toggleSidebar}>
+        <button className='sidebar-button' onClick={toggleSidebar} aria-label='toggle sidebar'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
             aria-hidden='true'

diff --git a/src/components/SidePanel/SidePanel.js b/src/components/SidePanel/SidePanel.js
@@ -33,6 +33,7 @@ const Dialog = ({ open, onClose, className, children }) => {
         className='sidepanel-backdrop'
         ref={containerRef}
         role='button'
+        aria-label='close sidepanel'
         tabIndex={0}
         onMouseDown={(event) => {
           if (event.target === event.currentTarget) {

diff --git a/src/components/ThemeSettings/DropdownSelect/DropdownSelect.js b/src/components/ThemeSettings/DropdownSelect/DropdownSelect.js
@@ -38,6 +38,7 @@ const DropdownSelect = ({ id = 'unknown', value, onChange, children }) => {
   return (
     <div
       className='dropdown-select'
+      role='none'
       onBlur={(e) => !e.relatedTarget?.classList?.contains(`keep-focus-${id}`) && close()}
     >
       <button onClick={toggleOpen} className={`keep-focus-${id}`}>
@@ -48,7 +49,7 @@ const DropdownSelect = ({ id = 'unknown', value, onChange, children }) => {
         <div className={`options-container${open ? ' options-container--open' : ''}`}>
           <div
             className='options-container-backdrop'
-            role='button'
+            role='none'
             onMouseDown={(event) => {
               if (event.target === event.currentTarget) {
                 toggleOpen();

diff --git a/src/components/ThemeSettings/ThemeSettings.js b/src/components/ThemeSettings/ThemeSettings.js
@@ -33,13 +33,18 @@ const ThemeSettings = () => {
 
   return (
     <>
-      <button className='icon-btn' onClick={togglePanel} style={{ alignSelf: 'center' }}>
+      <button
+        className='icon-btn'
+        onClick={togglePanel}
+        style={{ alignSelf: 'center' }}
+        aria-label='theme settings'
+      >
         <Theme />
       </button>
       <SidePanel open={panelOpen} onClose={closePanel} className='theme-settings'>
         <div className='theme-settings-header'>
           <p>Reading Options</p>
-          <button className='icon-btn' onClick={closePanel}>
+          <button className='icon-btn' onClick={closePanel} aria-label='close'>
             <Close />
           </button>
         </div>

diff --git a/src/hooks/theme-hooks.js b/src/hooks/theme-hooks.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import '../styles/themes/black.css';
 import '../styles/themes/gruvbox.css';
 import '../styles/themes/nord.css';