fix: accessibility issues + tooltip

package.json

@@ -14,7 +14,7 @@
     "@eartharoid/i18n": "1.2.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@floating-ui/react-dom": "^2.0.1",
+    "@floating-ui/react-dom": "1.3.0",
     "@fontsource/lexend-deca": "5.0.5",
     "@fontsource/montserrat": "5.0.5",
     "@muetab/react-color-gradient-picker": "0.1.2",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@eartharoid/i18n':
     specifier: 1.2.1
@@ -15,8 +11,8 @@ dependencies:
     specifier: ^11.11.0
     version: 11.11.0(@emotion/react@11.11.1)(react@18.2.0)
   '@floating-ui/react-dom':
-    specifier: ^2.0.1
-    version: 2.0.1(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^1.3.0
+    version: 1.3.0(react-dom@18.2.0)(react@18.2.0)
   '@fontsource/lexend-deca':
     specifier: 5.0.5
     version: 5.0.5
@@ -2172,8 +2168,8 @@ packages:
       '@floating-ui/core': 1.3.1
     dev: false
 
-  /@floating-ui/react-dom@2.0.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==}
+  /@floating-ui/react-dom@1.3.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -6274,3 +6270,7 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/components/widgets/background/Maximise.jsx

@@ -76,7 +76,7 @@ class Maximise extends PureComponent {
       <Tooltip
         title={variables.getMessage('modals.main.settings.sections.background.buttons.view')}
       >
-        <button style={{ fontSize: this.props.fontSize }} onClick={this.maximise}>
+        <button style={{ fontSize: this.props.fontSize }} onClick={this.maximise} aria-label={variables.getMessage('modals.main.settings.sections.background.buttons.view')}>
           <MdCropFree className="topicons" />
         </button>
       </Tooltip>

src/components/widgets/navbar/Navbar.jsx

@@ -115,7 +115,11 @@ class Navbar extends PureComponent {
               title={variables.getMessage('widgets.navbar.tooltips.refresh')}
               subtitle={this.state.refreshText}
             >
-              <button onClick={() => this.refresh()} style={{ fontSize: this.state.zoomFontSize }}>
+              <button
+                onClick={() => this.refresh()}
+                style={{ fontSize: this.state.zoomFontSize }}
+                aria-label={variables.getMessage('widgets.navbar.tooltips.refresh')}
+              >
                 <MdRefresh className="refreshicon topicons" />
               </button>
             </Tooltip>
@@ -130,6 +134,11 @@ class Navbar extends PureComponent {
             <button
               onClick={() => this.props.openModal('mainModal')}
               style={{ fontSize: this.state.zoomFontSize }}
+              aria-label={variables.getMessage('modals.main.navbar.settings', {
+                type: variables.getMessage(
+                  'modals.main.navbar.tooltips.refresh_' + this.refreshValue,
+                ),
+              })}
             >
               <MdSettings className="settings-icon topicons" />
             </button>

src/components/widgets/navbar/Notes.jsx

@@ -97,6 +97,7 @@ class Notes extends PureComponent {
           onBlur={() => this.hideNotes()}
           ref={this.props.notesRef}
           style={{ fontSize: this.state.zoomFontSize }}
+          aria-label={variables.getMessage('widgets.navbar.notes.title')}
         >
           <MdAssignment className="topicons" />
         </button>

src/components/widgets/quote/Quote.jsx

@@ -25,28 +25,28 @@ export default class Quote extends PureComponent {
   buttons = {
     share: (
       <Tooltip title={variables.getMessage('widgets.quote.share')}>
-        <button onClick={() => this.setState({ shareModal: true })}>
+        <button onClick={() => this.setState({ shareModal: true })} aria-label={variables.getMessage('widgets.quote.share')}>
           <MdIosShare className="copyButton" />
         </button>
       </Tooltip>
     ),
     copy: (
       <Tooltip title={variables.getMessage('widgets.quote.copy')}>
-        <button onClick={() => this.copyQuote()}>
+        <button onClick={() => this.copyQuote()} aria-label={variables.getMessage('widgets.quote.copy')}>
           <MdContentCopy className="copyButton" />
         </button>
       </Tooltip>
     ),
     unfavourited: (
       <Tooltip title={variables.getMessage('widgets.quote.favourite')}>
-        <button onClick={() => this.favourite()}>
+        <button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.favourite')}>
           <MdStarBorder className="copyButton" />
         </button>
       </Tooltip>
     ),
     favourited: (
       <Tooltip title={variables.getMessage('widgets.quote.unfavourite')}>
-        <button onClick={() => this.favourite()}>
+        <button onClick={() => this.favourite()} aria-label={variables.getMessage('widgets.quote.unfavourite')}>
           <MdStar className="copyButton" />
         </button>
       </Tooltip>
@@ -436,6 +436,7 @@ export default class Quote extends PureComponent {
                   className="quoteAuthorLink"
                   target="_blank"
                   rel="noopener noreferrer"
+                  aria-label="Learn about the author of the quote."
                 >
                   {this.state.author}
                 </a>
@@ -481,6 +482,7 @@ export default class Quote extends PureComponent {
                       className="quoteAuthorLink"
                       target="_blank"
                       rel="noopener noreferrer"
+                      aria-label="Learn about the author of the quote."
                     >
                       <MdOpenInNew />
                     </a>{' '}

src/components/widgets/search/Search.jsx

@@ -100,7 +100,7 @@ export default class Search extends PureComponent {
 
     if (localStorage.getItem('voiceSearch') === 'true') {
       microphone = (
-        <button onClick={this.startSpeechRecognition} ref={this.micIcon}>
+        <button onClick={this.startSpeechRecognition} ref={this.micIcon} aria-label="Microphone Search">
           <MdMic className="micIcon" />
         </button>
       );
@@ -211,6 +211,7 @@ export default class Search extends PureComponent {
                 title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
               >
                 <button
+                  aria-label="Search Engine"
                   onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })}
                 >
                   {this.getSearchDropdownicon(this.state.currentSearch)}
@@ -228,7 +229,7 @@ export default class Search extends PureComponent {
           <form onSubmit={this.searchButton} className="searchBar">
             <div className={this.state.classList}>
               <Tooltip title={variables.getMessage('widgets.search')}>
-                <button onClick={this.searchButton}>
+                <button onClick={this.searchButton} aria-label="Search">
                   <MdSearch />
                 </button>
               </Tooltip>