Skip to content

Commit 0b5fcf8

Browse files
Rabia2219Rabia2219
authored
Merge pull request #20 from hackforla/Rabia2219-patch-5
Update alert-missing-fieldset.md
2 parents 418771a + 7ff3766 commit 0b5fcf8

10 files changed

Lines changed: 143 additions & 91 deletions

‎docs/known-issues-and-solutions/solutions-index/alert-missing-fieldset.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
114114
115115
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
116116
117-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
117+
??? Info "1. Descriptive Title for Screenshot Set 1"
118118
119-
[INSERT IMAGE HERE]
119+
Description/text for image
120120
121-
</details>
121+
> [INSERT IMAGE HERE]
122+
123+
Description/text for image
124+
125+
> [INSERT IMAGE HERE]
126+
127+
??? Info "1. Descriptive Title for Screenshot Set 2"
128+
129+
Descriptoin/text for image
130+
131+
> [INSERT IMAGE HERE]
122132
123133
## Credits/Authors
124134
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/alert-orphaned-form-label.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -145,11 +145,21 @@ By adding the `id` and `name` attributes to the input element with values matchi
145145
146146
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
147147
148-
<details><summary>Screenshot #1</summary>
148+
??? Info "1. Descriptive Title for Screenshot Set 1"
149+
150+
Description/text for image
151+
152+
> [INSERT IMAGE HERE]
149153
150-
[INSERT IMAGE HERE]
154+
Description/text for image
155+
156+
> [INSERT IMAGE HERE]
157+
158+
??? Info "1. Descriptive Title for Screenshot Set 2"
159+
160+
Descriptoin/text for image
151161
152-
</details>
162+
> [INSERT IMAGE HERE]
153163
154164
## Credits/Authors
155165
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/alert-possible-heading.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
114114
115115
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
116116
117-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
117+
??? Info "1. Descriptive Title for Screenshot Set 1"
118118
119-
[INSERT IMAGE HERE]
119+
Description/text for image
120120
121-
</details>
121+
> [INSERT IMAGE HERE]
122+
123+
Description/text for image
124+
125+
> [INSERT IMAGE HERE]
126+
127+
??? Info "1. Descriptive Title for Screenshot Set 2"
128+
129+
Descriptoin/text for image
130+
131+
> [INSERT IMAGE HERE]
122132
123133
## Credits/Authors
124134
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/alert-redundant-link.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,11 +111,21 @@ The following material covers how the Project Team has provided a solution to th
111111
112112
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
113113
114-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
114+
??? Info "1. Descriptive Title for Screenshot Set 1"
115115
116-
[INSERT IMAGE HERE]
116+
Description/text for image
117117
118-
</details>
118+
> [INSERT IMAGE HERE]
119+
120+
Description/text for image
121+
122+
> [INSERT IMAGE HERE]
123+
124+
??? Info "1. Descriptive Title for Screenshot Set 2"
125+
126+
Descriptoin/text for image
127+
128+
> [INSERT IMAGE HERE]
119129
120130
## Credits/Authors
121131
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/alert-skipped-heading-level.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -144,11 +144,21 @@ The following material covers how the Project Team has provided a solution to th
144144
145145
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
146146
147-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
147+
??? Info "1. Descriptive Title for Screenshot Set 1"
148148
149-
[INSERT IMAGE HERE]
149+
Description/text for image
150150
151-
</details>
151+
> [INSERT IMAGE HERE]
152+
153+
Description/text for image
154+
155+
> [INSERT IMAGE HERE]
156+
157+
??? Info "1. Descriptive Title for Screenshot Set 2"
158+
159+
Descriptoin/text for image
160+
161+
> [INSERT IMAGE HERE]
152162
153163
## Credits/Authors
154164
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/aria-aria-label.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,21 @@ The following material covers how the Project Team has provided a solution to th
114114
115115
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
116116
117-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
117+
??? Info "1. Descriptive Title for Screenshot Set 1"
118118
119-
[INSERT IMAGE HERE]
119+
Description/text for image
120120
121-
</details>
121+
> [INSERT IMAGE HERE]
122+
123+
Description/text for image
124+
125+
> [INSERT IMAGE HERE]
126+
127+
??? Info "1. Descriptive Title for Screenshot Set 2"
128+
129+
Descriptoin/text for image
130+
131+
> [INSERT IMAGE HERE]
122132
123133
## Credits/Authors
124134
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast.md‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,11 +113,21 @@ The following material covers how the Project Team has provided a solution to th
113113
114114
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
115115
116-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
116+
??? Info "1. Descriptive Title for Screenshot Set 1"
117117
118-
[INSERT IMAGE HERE]
118+
Description/text for image
119119
120-
</details>
120+
> [INSERT IMAGE HERE]
121+
122+
Description/text for image
123+
124+
> [INSERT IMAGE HERE]
125+
126+
??? Info "1. Descriptive Title for Screenshot Set 2"
127+
128+
Descriptoin/text for image
129+
130+
> [INSERT IMAGE HERE]
121131
122132
## Credits/Authors
123133
<!-- 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 -->

‎docs/known-issues-and-solutions/solutions-index/error-empty-button.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ The fix adds an `aria-label` attribute to each icon-only navigation button. This
9595
9696
??? Info "Click to see other technical details"
9797
98-
[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
98+
[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
9999
100100
#### Code Snippet With Solution
101101

‎docs/known-issues-and-solutions/solutions-index/error-empty-table-header.md‎

Lines changed: 39 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -81,42 +81,40 @@ Any tables that does not provide text in the column header column as a control,
8181
- n/a
8282

8383
#### Code Snippet With Solution
84-
<details><summary>Click to see code snippets...</summary>
85-
86-
Example of `.sr-only` in source code...
87-
```jsx
88-
/* client/src/components/Projects/ProjectsPage.jsx */
89-
<>
90-
<label htmlFor="SelectAllProject" className="sr-only">
91-
Select All Projects on Page
92-
</label>
93-
<input
94-
style={{
95-
height: "15px"
96-
}}
97-
id="SelectAllProject"
98-
type="checkbox"
99-
checked={selectAllChecked}
100-
onChange={handleHeaderCheckbox}
101-
/>
102-
</>
103-
```
104-
105-
```scss
106-
/* client/src/styles/App.scss */
107-
.sr-only {
108-
position: absolute;
109-
width: 1px;
110-
height: 1px;
111-
padding: 0;
112-
margin: -1px;
113-
overflow: hidden;
114-
clip: rect(0, 0, 0, 0);
115-
border: 0;
116-
}
117-
```
118-
119-
</details>
84+
??? Info "Click to see code snippets"
85+
86+
Example of `.sr-only` in source code...
87+
```jsx
88+
/* client/src/components/Projects/ProjectsPage.jsx */
89+
<>
90+
<label htmlFor="SelectAllProject" className="sr-only">
91+
Select All Projects on Page
92+
</label>
93+
<input
94+
style={{
95+
height: "15px"
96+
}}
97+
id="SelectAllProject"
98+
type="checkbox"
99+
checked={selectAllChecked}
100+
onChange={handleHeaderCheckbox}
101+
/>
102+
</>
103+
```
104+
105+
```scss
106+
/* client/src/styles/App.scss */
107+
.sr-only {
108+
position: absolute;
109+
width: 1px;
110+
height: 1px;
111+
padding: 0;
112+
margin: -1px;
113+
overflow: hidden;
114+
clip: rect(0, 0, 0, 0);
115+
border: 0;
116+
}
117+
```
120118

121119
#### Why the Fix Works
122120
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
130128

131129
#### Screenshots of WAVE Error
132130

133-
<details><summary>Screenshot 1: Projects Page with Empty Table Header highlighted</summary>
134-
<p>
135-
136-
<img width="3379" alt="Image" src="https://github.com/user-attachments/assets/91adfff5-6942-436a-99be-d3a1b9d7b319" />
137-
138-
</p>
139-
</details>
131+
??? Info "Screenshot 1: Projects Page with Empty Table Header highlighted"
140132

141-
<details><summary>Screenshot 2: My Projects page with WAVE annotations on</summary>
142-
<p>
133+
> ![Image](https://github.com/user-attachments/assets/91adfff5-6942-436a-99be-d3a1b9d7b319)
143134

144-
<img width="3387" alt="Image" src="https://github.com/user-attachments/assets/7d4b76c5-177d-4951-89d5-6372f85bcf38" />
135+
??? Info "Screenshot 2: My Projects page with WAVE annotations on"
145136

146-
</p>
147-
</details>
137+
> ![Image](https://github.com/user-attachments/assets/7d4b76c5-177d-4951-89d5-6372f85bcf38)
148138

149139
## Credits / Authors
150140
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
155145
- @geolunalg
156146
- @JRParryY
157147
- @experimentsinhonesty
148+
- @Rabia2219

‎docs/known-issues-and-solutions/solutions-index/error-missing-form-label.md‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -96,35 +96,27 @@ The following material covers how the Project Team has provided a solution to th
9696
#### Step-By-Step Guide
9797
<!-- Author Instructions: Replace details dropdown with N/A if this does not apply -->
9898
99-
<details><summary>Click to see step-by-step guide</summary>
100-
<p>
99+
??? Info "Click to see step-by-step guide"
101100
102-
[ADD DETAILED INSTRUCTIONS HERE]
101+
[ADD DETAILED INSTRUCTIONS HERE]
103102
104-
</p>
105-
</details>
106103
107104
#### Other Technical Details
108105
<!-- Author Instructions: Write N/A if this does not apply -->
109106
110-
<details><summary>Click to see other technical details</summary>
111-
<p>
107+
??? Info "Click to see other technical details"
112108
113-
[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
109+
[ INSERT OTHER DETAILS e.g. Prop References, Return Value ]
114110
115-
</p>
116-
</details>
117111
118112
#### Code Snippet With Solution
119-
<details><summary>Click to see code snippets...</summary>
113+
??? Info "Click to see code snippets"
120114
121-
[INSERT PATH file/path/to/Snippet.jsx]
115+
[INSERT PATH file/path/to/Snippet.jsx]
122116
123-
```jsx
124-
[Code example showing the fix/solution]
125-
```
126-
127-
</details>
117+
```jsx
118+
[Code example showing the fix/solution]
119+
```
128120
129121
#### Why the Fix Works
130122
<!-- 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
140132
141133
<!-- Author Instructions: when including markdown images, ensure they are responsive by specifying EITHER width OR height. Do not provide both. -->
142134
143-
<details><summary>1. [Descriptive Title for Screenshot Set 1]</summary>
135+
??? Info "1. [Descriptive Title for Screenshot Set 1]"
144136
145-
<img width="400" alt="Image" src="https://github.com/user-attachments/assets/123456789" />
137+
> ![Image](https://github.com/user-attachments/assets/123456789)
146138
147-
</p>
148-
</details>
149139
150140
## Credits/Authors
151141
<!-- 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 -->
152142
- @experiementsinhonesty
143+
- @Rabia2219

0 commit comments

Comments
 (0)