Skip to content

Commit 522775e

Browse files
Michael-DratchMichael-Dratch
authored
Merge pull request #430 from CodeForPhilly/builder-frontend-semantic-html
2 parents a1f619c + 52bddff commit 522775e

17 files changed

Lines changed: 138 additions & 121 deletions

File tree

‎builder-frontend/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function App() {
5959
<Route path="/screener/:publishedScreenerId" component={Screener} />
6060
<Route
6161
path="*"
62-
component={() => <div class="p-4">404 - Page Not Found</div>}
62+
component={() => <main class="p-4">404 - Page Not Found</main>}
6363
/>
6464
</Router>
6565
);

‎builder-frontend/src/components/Header/Header.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ const HeaderButton = ({
1515
onClick: () => void;
1616
}) => {
1717
return (
18-
<div
18+
<button
1919
onClick={onClick}
2020
class="
2121
px-4 py-2 text-md font-bold text-gray-700 rounded-md
2222
flex items-center
2323
hover:bg-gray-300 cursor-pointer select-none"
2424
>
2525
{buttonText}
26-
</div>
26+
</button>
2727
);
2828
};
2929

@@ -48,10 +48,10 @@ const HeaderMenu: Component<MenuProps> = (props) => {
4848
];
4949

5050
return (
51-
<div class="header-menu">
52-
<div class="header-user-email" title={props.userEmail}>
51+
<section class="header-menu">
52+
<h2 class="header-user-email" title={props.userEmail}>
5353
Welcome {props.displayName} {props.userEmail}
54-
</div>
54+
</h2>
5555
<hr />
5656
<ul>
5757
<For each={menuItems}>
@@ -62,7 +62,7 @@ const HeaderMenu: Component<MenuProps> = (props) => {
6262
)}
6363
</For>
6464
</ul>
65-
</div>
65+
</section>
6666
);
6767
};
6868

‎builder-frontend/src/components/auth/AuthForm.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ export default function AuthForm() {
3535
return (
3636
<div className="w-full h-screen flex self-center place-content-center place-items-center">
3737
<div className="w-96 text-gray-600 space-y-5 p-4 shadow-xl border rounded-xl">
38-
<div className="text-gray-800 text-xl font-semibold sm:text-2xl">
39-
Benefits Decision Tookit
40-
</div>
38+
<h1 className="text-gray-800 text-xl font-semibold sm:text-2xl">
39+
Benefit Decision Tookit
40+
</h1>
4141
{location.pathname === "/signup" ? (
4242
<Signup toggleMode={toggleMode} />
4343
) : (

‎builder-frontend/src/components/auth/Login.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@ export default function Login({ toggleMode }) {
8585
Sign In
8686
</button>
8787

88-
<div className="text-gray-600 pt-4 text-center" onClick={toggleMode}>
88+
<button className="text-gray-600 pt-4 text-center" onClick={toggleMode}>
8989
Don't have an account?&nbsp;
9090
<span className="text-gray-700 font-bold hover:underline hover:cursor-pointer">
9191
Sign Up
9292
</span>
93-
</div>
93+
</button>
9494
<div className="h-4 text-center">
9595
{error() && <p style={{ color: "red" }}>{error()}</p>}
9696
</div>

‎builder-frontend/src/components/homeScreen/DeleteConfirmation.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,13 @@ interface Props {
1010
export default function DeleteConfirmation(props: Props) {
1111
return (
1212
<div>
13-
<div class="text-xl font-bold">
13+
<h2 class="text-xl font-bold">
1414
Are you sure you would like to delete {props.screenerName}?
15-
</div>
16-
<div class="pt-8 text-md">
17-
Once deleted, all associated data will be deleted and cant be recovered.
18-
</div>
15+
</h2>
16+
<p class="pt-8 text-md">
17+
Once deleted, all associated data will be deleted and can't be
18+
recovered.
19+
</p>
1920
<div class="flex w-full justify-end gap-4 mt-8">
2021
<Button
2122
variant="outline-secondary"

‎builder-frontend/src/components/homeScreen/EditScreenerForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default function EditScreenerForm(props: Props) {
6363
return (
6464
<div>
6565
<Form onSubmit={handleSubmit}>
66-
<div class="text-xl font-bold">Edit screener</div>
66+
<h2 class="text-xl font-bold">Edit screener</h2>
6767

6868
<Form.LabelAbove placeholder="Screener name" htmlFor="screenerName">
6969
<Form.TextInput value={props.modalData.screenerName} />

‎builder-frontend/src/components/homeScreen/HomeScreen.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Accessor, createSignal } from "solid-js";
33

44
const HomeScreen = () => {
55
return (
6-
<div class="p-2 text-gray-700">
6+
<main class="p-2 text-gray-700">
77
<ProjectsList />
8-
</div>
8+
</main>
99
);
1010
};
1111
export default HomeScreen;

‎builder-frontend/src/components/homeScreen/ProjectsList.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default function ProjectsList() {
9090
};
9191

9292
return (
93-
<div>
93+
<>
9494
<Title>BDT - Projects List</Title>
9595
<div class="bg-gray-100 rounded-xl p-8 flex flex-col text-sm">
9696
<div class="text-xl font-bold">
@@ -107,15 +107,15 @@ export default function ProjectsList() {
107107
eligibility checks from our library of pre-built eligibility rules. Or
108108
build custom checks that meet your specific needs.
109109
</div>
110-
<div
110+
<button
111111
onClick={() => setIsNewScreenerModalVisible(true)}
112112
class="
113113
mt-2 px-4 py-2 w-fit cursor-pointer bg-blue-500
114114
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
115115
font-bold text-sm text-white"
116116
>
117117
Create new screener
118-
</div>
118+
</button>
119119
<Modal
120120
show={isNewScreenerModalVisible()}
121121
onClose={() => setIsNewScreenerModalVisible(false)}
@@ -138,7 +138,7 @@ export default function ProjectsList() {
138138
};
139139
return (
140140
item && (
141-
<div
141+
<article
142142
class="
143143
w-80 h-60 relative cursor-pointer
144144
border-2 border-gray-300 rounded-lg
@@ -157,7 +157,7 @@ export default function ProjectsList() {
157157
>
158158
<div class="text-2xl font-bold">{item.screenerName}</div>
159159
</div>
160-
</div>
160+
</article>
161161
)
162162
);
163163
}}
@@ -178,6 +178,6 @@ export default function ProjectsList() {
178178
</Modal>
179179
</div>
180180
</Show>
181-
</div>
181+
</>
182182
);
183183
}

‎builder-frontend/src/components/homeScreen/eligibilityCheckList/EligibilityChecksList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ const EligibilityChecksList = () => {
5252
Manage your custom eligibility checks here. Click on a check to view or
5353
edit its details.
5454
</div>
55-
<div
55+
<button
5656
class="px-4 py-2 w-fit cursor-pointer bg-blue-500
5757
rounded-lg shadow-md hover:shadow-lg hover:bg-blue-600
5858
font-bold text-sm text-white"
5959
onClick={() => setAddingNewCheck(true)}
6060
>
6161
Create New Check
62-
</div>
62+
</button>
6363
<Modal show={addingNewCheck()} onClose={() => setAddingNewCheck(false)}>
6464
<CheckModal
6565
onAddCheck={actions.addNewCheck}

‎builder-frontend/src/components/project/FormEditorView.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -195,28 +195,28 @@ function FormEditorView({ formSchema, setFormSchema }) {
195195
<div id="form-editor-save_container" class="fixed bottom-20 right-5 z-40">
196196
<Switch>
197197
<Match when={isUnsaved()}>
198-
<div
198+
<button
199199
onClick={handleSave}
200200
class="btn-default btn-yellow shadow-[0_0_10px_rgba(0,0,0,0.4)]"
201201
>
202202
Save
203-
</div>
203+
</button>
204204
</Match>
205205
<Match when={isSaving()}>
206-
<div
206+
<button
207207
onClick={handleSave}
208208
class="btn-default btn-gray cursor-not-allowed shadow-[0_0_10px_rgba(0,0,0,0.4)]"
209209
>
210210
Saving...
211-
</div>
211+
</button>
212212
</Match>
213213
<Match when={!isUnsaved() && !isSaving()}>
214-
<div
214+
<button
215215
onClick={handleSave}
216216
class="btn-default btn-blue shadow-[0_0_10px_rgba(0,0,0,0.4)]"
217217
>
218218
Save
219-
</div>
219+
</button>
220220
</Match>
221221
</Switch>
222222
</div>
@@ -256,9 +256,9 @@ const FormValidationDrawer = ({
256256
my-auto rounded-lg
257257
text-lg font-medium transition-all duration-100 "
258258
>
259-
<div class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)]">
259+
<button class="btn-default btn-gray shadow-[0_0_10px_rgba(0,0,0,0.4)]">
260260
Validate Form Outputs
261-
</div>
261+
</button>
262262
</Drawer.Trigger>
263263
<Drawer.Portal>
264264
<Drawer.Overlay

0 commit comments

Comments
 (0)