improved accessibility by adding search semantic element, hiding decorative icon and adding a label for screen readers

Author: ania221B

src/SearchBar.jsx

@@ -24,42 +24,48 @@ function SearchBar () {
     searchBarClasses.splice(indexOfError - 1, 1)
   }
   return (
-    <form
-      onSubmit={e => {
-        submitSearch(e)
-      }}
-    >
-      <div
-        className={`search-bar br-medium` + ' ' + searchBarClasses.join(' ')}
+    <search>
+      <form
+        onSubmit={e => {
+          submitSearch(e)
+        }}
       >
-        <div className='icon'>
-          <svg height='24' width='25' xmlns='http://www.w3.org/2000/svg'>
-            <path
-              d='M10.609 0c5.85 0 10.608 4.746 10.608 10.58 0 2.609-.952 5-2.527 6.847l5.112 5.087a.87.87 0 01-1.227 1.233l-5.118-5.093a10.58 10.58 0 01-6.848 2.505C4.759 21.16 0 16.413 0 10.58 0 4.747 4.76 0 10.609 0zm0 1.74c-4.891 0-8.87 3.965-8.87 8.84 0 4.874 3.979 8.84 8.87 8.84a8.855 8.855 0 006.213-2.537l.04-.047a.881.881 0 01.058-.053 8.786 8.786 0 002.558-6.203c0-4.875-3.979-8.84-8.87-8.84z'
-              fill='#0079ff'
-            />
-          </svg>
+        <div
+          className={`search-bar br-medium` + ' ' + searchBarClasses.join(' ')}
+        >
+          <div className='icon' aria-hidden='true'>
+            <svg height='24' width='25' xmlns='http://www.w3.org/2000/svg'>
+              <path
+                d='M10.609 0c5.85 0 10.608 4.746 10.608 10.58 0 2.609-.952 5-2.527 6.847l5.112 5.087a.87.87 0 01-1.227 1.233l-5.118-5.093a10.58 10.58 0 01-6.848 2.505C4.759 21.16 0 16.413 0 10.58 0 4.747 4.76 0 10.609 0zm0 1.74c-4.891 0-8.87 3.965-8.87 8.84 0 4.874 3.979 8.84 8.87 8.84a8.855 8.855 0 006.213-2.537l.04-.047a.881.881 0 01.058-.053 8.786 8.786 0 002.558-6.203c0-4.875-3.979-8.84-8.87-8.84z'
+                fill='#0079ff'
+              />
+            </svg>
+          </div>
+          <label htmlFor='username' className='sr-only'>
+            Enter GitHub username to find
+          </label>
+          <input
+            id='username'
+            type='text'
+            value={searchedUser}
+            placeholder='Search GitHub username...'
+            onChange={e => setSearchedUser(e.target.value)}
+            onInput={e => {
+              setSearchedUser(e.target.value)
+              getUserSuggestions(e.target.value)
+            }}
+            onBlur={() => setStartId(0)}
+            ref={inputValueRef}
+          />
+          {isError && <div className='info'>{errorMessage}</div>}
+          {isIssue && <div className='info'>{errorMessage}</div>}
+          <button type='submit' className='button search-button'>
+            Search
+          </button>
+          <SuggestionList suggestions={suggestionList}></SuggestionList>
         </div>
-        <input
-          type='text'
-          value={searchedUser}
-          placeholder='Search GitHub username...'
-          onChange={e => setSearchedUser(e.target.value)}
-          onInput={e => {
-            setSearchedUser(e.target.value)
-            getUserSuggestions(e.target.value)
-          }}
-          onBlur={() => setStartId(0)}
-          ref={inputValueRef}
-        />
-        {isError && <div className='info'>{errorMessage}</div>}
-        {isIssue && <div className='info'>{errorMessage}</div>}
-        <button type='submit' className='button search-button'>
-          Search
-        </button>
-        <SuggestionList suggestions={suggestionList}></SuggestionList>
-      </div>
-    </form>
+      </form>
+    </search>
   )
 }
 export default SearchBar

src/sass/utilities/_index.scss

@@ -10,5 +10,6 @@
 @forward './letter-spacing';
 @forward './main-title';
 @forward './spacing';
+@forward './sr-only';
 @forward './text-center';
 @forward './uppercase';

src/sass/utilities/_sr-only.scss

@@ -0,0 +1,13 @@
+@use '../abstracts/' as *;
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}