Keyboard accessibility improvements

README.md

@@ -48,7 +48,7 @@ _**On first login, new user must change password by using the `passwd` command**
 
 - ### Using Local Setup
   - Run `install.ps1` (recommended) or `install.bat` (legacy) or `install.sh` (on linux) to get dependencies set up locally
-    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. Caution: Ensure you have commited/pushed any important changes before running this command.
+    - `install.ps1` supports performing a clean installation by using the `-CleanInstall` flag. Use this if you encounter a `npm install` failure. **Caution:** Ensure you have commited/pushed any important changes before running this command with the `-CleanInstall` flag.
     - `install.ps1` also supports skipping initializing the server or the ui, using the `-SkipServer` and `-SkipUI` flags.
   - You will need to manually install the Prettier extension on your IDE ([for VSCode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)) ([for IntelliJ](https://plugins.jetbrains.com/plugin/10456-prettier)).
 

server/server/database/test_data/page_html_dummy.sql

@@ -51,13 +51,13 @@ INSERT INTO page_html (name, html) VALUES
                              </p>
                              <br />
                              <div class="ui styled fluid accordion">
-               <div class="title">
+               <button class="title fake-div">
              <script>
              $(".ui.accordion").accordion();
              </script>
                  <i class="dropdown icon"></i>
                  How will my organization benefit from sponsoring a Senior Project?
-               </div>
+               </button>
                <div class="content">
                  <p class="transition hidden"><ul>
                                      <li>Help educate the next generation of software engineers who you might want as employees</li>
@@ -71,10 +71,10 @@ INSERT INTO page_html (name, html) VALUES
                                      </li>
                                  </ul></p>
                </div>
-               <div class="title">
+               <button class="title fake-div">
                  <i class="dropdown icon"></i>
                  What is the size, scope and duration of these projects?
-               </div>
+               </button>
                <div class="content">
                  <ul>
                                      <li>
@@ -106,10 +106,10 @@ INSERT INTO page_html (name, html) VALUES
                                      </li>
                                  </ul>
                </div>
-               <div class="title">
+               <button class="title fake-div">
                  <i class="dropdown icon"></i>
                  Who works on the project?
-               </div>
+               </button>
                <div class="content">
                  <ul>
                                      <li>The project sponsor works with a senior team and their faculty coach.</li>
@@ -123,10 +123,10 @@ INSERT INTO page_html (name, html) VALUES
                                      </li>
                                  </ul>
                </div>
-             <div class="title">
+             <button class="title fake-div">
                  <i class="dropdown icon"></i>
                  What process is followed over the course of the project?
-               </div>
+               </button>
                <div class="content">
                  <ul>
                                      <li>
@@ -145,10 +145,10 @@ INSERT INTO page_html (name, html) VALUES
                                      </li>
                                  </ul>
                </div>
-             <div class="title">
+             <button class="title fake-div">
                  <i class="dropdown icon"></i>
                  What are my responsibilities and commitments as a sponsor?
-               </div>
+               </button>
                <div class="content">
                  <ul>
                                      <li>
@@ -179,10 +179,10 @@ INSERT INTO page_html (name, html) VALUES
                                      </ul>
                                  </ul>
                </div>
-             <div class="title">
+             <button class="title fake-div">
                  <i class="dropdown icon"></i>
                  How are proposals reviewed?
-               </div>
+               </button>
                <div class="content">
                  <ol>
                                      <li>

ui/src/components/shared/ExemplaryProject.js

@@ -72,8 +72,8 @@ function ExemplaryProject({ project }) {
     <div>
       {" "}
       {/* Div containing all project information */}
-      <div
-        className="ui segment stackable padded grid"
+      <button
+        className="ui segment stackable padded grid fake-div"
         onClick={() => toggleInitialModalOpen()}
         style={{ cursor: "pointer" }}
       >
@@ -131,7 +131,7 @@ function ExemplaryProject({ project }) {
             {generateProfiles(project.coach, false)}
           </div>
         </div>
-      </div>
+      </button>
       {/* Modal with expanded information */}
       <Modal
         closeOnDimmerClick={false}

ui/src/css/utils/helpers.css

@@ -14,6 +14,20 @@
   cursor: pointer;
 }
 
+.fake-div, button.fake-div {
+  text-align: start;
+  line-height: 1.4285em;
+  display: block;
+  unicode-bidi: isolate;
+  width: 100%;
+
+  background-color: rgba(0,0,0,0);
+
+  border-block-style: none;
+  border-inline-style: none;
+  animation: initial;
+}
+
 .spacer {
   flex-grow: 1;
 }