hackforla · Rabia2219 · Mar 5, 2026 · Mar 3, 2026 · Mar 3, 2026 · Mar 3, 2026
diff --git a/docs/known-issues-and-solutions/solutions-index/alert-missing-fieldset.md b/docs/known-issues-and-solutions/solutions-index/alert-missing-fieldset.md
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/alert-orphaned-form-label.md b/docs/known-issues-and-solutions/solutions-index/alert-orphaned-form-label.md
@@ -145,11 +145,21 @@ By adding the `id` and `name` attributes to the input element with values matchi
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>Screenshot #1</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
 
-[INSERT IMAGE HERE]
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
 
-</details> 
+    > [INSERT IMAGE HERE] 
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/alert-possible-heading.md b/docs/known-issues-and-solutions/solutions-index/alert-possible-heading.md
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/alert-redundant-link.md b/docs/known-issues-and-solutions/solutions-index/alert-redundant-link.md
@@ -111,11 +111,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md b/docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md
@@ -144,11 +144,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/aria-aria-label.md b/docs/known-issues-and-solutions/solutions-index/aria-aria-label.md
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/...known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast.md b/...known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast.md
@@ -113,11 +113,21 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. Descriptive Title for Screenshot Set 1"
 
-[INSERT IMAGE HERE]
+    Description/text for image
 
-</details> 
+    > [INSERT IMAGE HERE]
+
+    Description/text for image
+
+    > [INSERT IMAGE HERE]
+
+??? Info "1. Descriptive Title for Screenshot Set 2"
+
+    Descriptoin/text for image
+
+    > [INSERT IMAGE HERE]
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->

diff --git a/docs/known-issues-and-solutions/solutions-index/error-empty-button.md b/docs/known-issues-and-solutions/solutions-index/error-empty-button.md
@@ -95,7 +95,7 @@ The fix adds an `aria-label` attribute to each icon-only navigation button. This
 
 ??? Info "Click to see other technical details"
 
-[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
+    [ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
 
 #### Code Snippet With Solution
 

diff --git a/docs/known-issues-and-solutions/solutions-index/error-empty-table-header.md b/docs/known-issues-and-solutions/solutions-index/error-empty-table-header.md
@@ -81,42 +81,40 @@ Any tables that does not provide text in the column header column as a control,
 - n/a
 
 #### Code Snippet With Solution
-<details><summary>Click to see code snippets...</summary>
-
-Example of `.sr-only` in source code...
-```jsx
-/* client/src/components/Projects/ProjectsPage.jsx */
-        <>
-          <label htmlFor="SelectAllProject" className="sr-only">
-            Select All Projects on Page
-          </label>
-          <input
-            style={{
-              height: "15px"
-            }}
-            id="SelectAllProject"
-            type="checkbox"
-            checked={selectAllChecked}
-            onChange={handleHeaderCheckbox}
-          />
-        </>
-```
-
-```scss
-/* client/src/styles/App.scss */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-```
-
-</details>
+??? Info "Click to see code snippets"
+
+   Example of `.sr-only` in source code...
+   ```jsx
+   /* client/src/components/Projects/ProjectsPage.jsx */
+           <>
+             <label htmlFor="SelectAllProject" className="sr-only">
+               Select All Projects on Page
+             </label>
+             <input
+               style={{
+                 height: "15px"
+               }}
+               id="SelectAllProject"
+               type="checkbox"
+               checked={selectAllChecked}
+               onChange={handleHeaderCheckbox}
+             />
+           </>
+   ```
+
+   ```scss
+   /* client/src/styles/App.scss */
+   .sr-only {
+     position: absolute;
+     width: 1px;
+     height: 1px;
+     padding: 0;
+     margin: -1px;
+     overflow: hidden;
+     clip: rect(0, 0, 0, 0);
+     border: 0;
+   }
+   ```
 
 #### Why the Fix Works
 When applying this class to a span or div, the inner text will not render onto the screen, yet it remains accessible to AT for screen reader capability.
@@ -130,21 +128,13 @@ When applying this class to a span or div, the inner text will not render onto t
 
 #### Screenshots of WAVE Error
 
-<details><summary>Screenshot 1: Projects Page with Empty Table Header highlighted</summary>
-<p>
-
-<img width="3379" alt="Image" src="https://github.com/user-attachments/assets/91adfff5-6942-436a-99be-d3a1b9d7b319" />
-
-</p>
-</details> 
+??? Info "Screenshot 1: Projects Page with Empty Table Header highlighted"
 
-<details><summary>Screenshot 2: My Projects page with WAVE annotations on</summary>
-<p>
+    > ![Image](https://github.com/user-attachments/assets/91adfff5-6942-436a-99be-d3a1b9d7b319)
 
-<img width="3387" alt="Image" src="https://github.com/user-attachments/assets/7d4b76c5-177d-4951-89d5-6372f85bcf38" />
+??? Info "Screenshot 2: My Projects page with WAVE annotations on"
 
-</p>
-</details> 
+    > ![Image](https://github.com/user-attachments/assets/7d4b76c5-177d-4951-89d5-6372f85bcf38)
 
 ## Credits / Authors
 All HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page.
@@ -155,3 +145,4 @@ All HfLA members who contributed to this wiki page and/or contributed to Pull Re
 - @geolunalg 
 - @JRParryY 
 - @experimentsinhonesty
+- @Rabia2219
diff --git a/docs/known-issues-and-solutions/solutions-index/error-missing-form-label.md b/docs/known-issues-and-solutions/solutions-index/error-missing-form-label.md
@@ -96,35 +96,27 @@ The following material covers how the Project Team has provided a solution to th
 #### Step-By-Step Guide
 <!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
 
-<details><summary>Click to see step-by-step guide</summary>
-<p>
+??? Info "Click to see step-by-step guide"
 
-[ADD DETAILED INSTRUCTIONS HERE]
+    [ADD DETAILED INSTRUCTIONS HERE]
 
-</p>
-</details> 
 
 #### Other Technical Details
 <!-- Author Instructions: Write N/A if this does not apply -->
 
-<details><summary>Click to see other technical details</summary>
-<p>
+??? Info "Click to see other technical details"
 
-[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
+    [ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
 
-</p>
-</details> 
 
 #### Code Snippet With Solution
-<details><summary>Click to see code snippets...</summary>
+??? Info "Click to see code snippets"
 
-[INSERT PATH file/path/to/Snippet.jsx]
+    [INSERT PATH file/path/to/Snippet.jsx]
 
-```jsx
-[Code example showing the fix/solution]
-```
-
-</details>
+    ```jsx
+    [Code example showing the fix/solution]
+    ```
 
 #### Why the Fix Works
 <!-- Author Instruction: Add an explanation of how the code changes resolve the accessibility issue and why this approach was chosen -->
@@ -140,13 +132,12 @@ The following material covers how the Project Team has provided a solution to th
 
 <!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
 
-<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
+??? Info "1. [Descriptive Title for Screenshot Set 1]"
 
-<img width="400" alt="Image" src="https://github.com/user-attachments/assets/123456789" />
+    > ![Image](https://github.com/user-attachments/assets/123456789)
 
-</p>
-</details> 
 
 ## Credits/Authors
 <!-- Author Instructions: Add bullet points with GitHub handles of all HfLA members who contributed to this wiki page and/or contributed to Pull Requests that provided solutions for this page -->
 - @experiementsinhonesty
+- @Rabia2219