Updating deps and fixing A11Y problems.

This commit is contained in:
Bradley Shellnut 2022-01-09 15:59:14 -08:00
parent 3b27635906
commit f9b5f3f4ba
5 changed files with 1916 additions and 2358 deletions

View file

@ -311,6 +311,15 @@ const GlobalStyles = createGlobalStyle`
margin: 0; margin: 0;
max-width: 100%; max-width: 100%;
} }
.sr-only {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
`; `;
const ContentStyles = styled.main` const ContentStyles = styled.main`

4188
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,6 +1,6 @@
{ {
"name": "weddingsite", "name": "weddingsite",
"version": "0.1.0", "version": "0.2.0",
"description": "Wedding Website", "description": "Wedding Website",
"private": true, "private": true,
"scripts": { "scripts": {
@ -13,45 +13,45 @@
"@reach/portal": "^0.16.2", "@reach/portal": "^0.16.2",
"@reach/visually-hidden": "^0.16.0", "@reach/visually-hidden": "^0.16.0",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-plugin-styled-components": "^1.13.3", "babel-plugin-styled-components": "^2.0.2",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cloudinary-build-url": "^0.2.1", "cloudinary-build-url": "^0.2.1",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"jsonwebtoken": "^8.5.1", "jsonwebtoken": "^8.5.1",
"mongodb": "^4.1.4", "mongodb": "^4.3.0",
"mongoose": "^6.0.12", "mongoose": "^6.1.5",
"next": "^11.1.2", "next": "^12.0.7",
"next-iron-session": "^4.2.0", "next-iron-session": "^4.2.0",
"next-with-apollo": "^5.2.1", "next-with-apollo": "^5.2.1",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"prop-types": "^15.7.2", "prop-types": "^15.8.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.3.1", "react-icons": "^4.3.1",
"styled-components": "^5.3.1", "styled-components": "^5.3.3",
"swr": "^0.5.6", "swr": "^0.5.6",
"waait": "^1.0.5" "waait": "^1.0.5"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.16.0", "@babel/core": "^7.16.7",
"@babel/preset-env": "^7.16.0", "@babel/preset-env": "^7.16.7",
"@typescript-eslint/eslint-plugin": "^4.32.0", "@typescript-eslint/eslint-plugin": "^5.9.0",
"@typescript-eslint/parser": "^4.32.0", "@typescript-eslint/parser": "^5.9.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^7.32.0", "eslint": "^8.6.0",
"eslint-config-airbnb": "^18.2.1", "eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-config-wesbos": "^2.1.0", "eslint-config-wesbos": "^3.0.2",
"eslint-plugin-html": "^6.2.0", "eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.25.3", "eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0", "eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-react-hooks": "^4.3.0",
"prettier": "^2.4.1", "prettier": "^2.5.1",
"typescript": "^4.4.4" "typescript": "^4.5.4"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
@ -63,6 +63,9 @@
}, },
"//": "This is our babel config, I prefer this over a .babelrc file", "//": "This is our babel config, I prefer this over a .babelrc file",
"babel": { "babel": {
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
],
"env": { "env": {
"development": { "development": {
"presets": [ "presets": [
@ -73,7 +76,8 @@
"styled-components", "styled-components",
{ {
"ssr": true, "ssr": true,
"displayName": true "displayName": true,
"preprocess": false
} }
] ]
] ]

View file

@ -249,7 +249,7 @@ export default function SingleGroupPage({ group }) {
> >
<MapIcon /> <MapIcon />
</a>{' '} </a>{' '}
Wedding Location Wedding Event Location
</p> </p>
<p>{address}</p> <p>{address}</p>
</AddressStyles> </AddressStyles>
@ -304,6 +304,7 @@ export default function SingleGroupPage({ group }) {
{guest.firstName} {guest.lastName} : {guest.firstName} {guest.lastName} :
</p> </p>
<label htmlFor={`${guest.id}-dietaryNotes`}> <label htmlFor={`${guest.id}-dietaryNotes`}>
<p className="sr-only">{`Enter dietery restrictions for ${guest.firstName} ${guest.lastName}`}</p>
<textarea <textarea
name={`${guest.id}-dietaryNotes`} name={`${guest.id}-dietaryNotes`}
id={`${guest.id}-dietaryNotes`} id={`${guest.id}-dietaryNotes`}
@ -336,6 +337,7 @@ export default function SingleGroupPage({ group }) {
{guest.firstName} {guest.lastName}: {guest.firstName} {guest.lastName}:
</p> </p>
<label htmlFor={`${guest.id}-songRequests`}> <label htmlFor={`${guest.id}-songRequests`}>
<p className="sr-only">{`Enter song requests for ${guest.firstName} ${guest.lastName}`}</p>
<textarea <textarea
name={`${guest.id}-songRequests`} name={`${guest.id}-songRequests`}
id={`${guest.id}-songRequests`} id={`${guest.id}-songRequests`}
@ -354,16 +356,21 @@ export default function SingleGroupPage({ group }) {
</div> </div>
</fieldset> </fieldset>
<fieldset aria-busy={loading} disabled={loading}> <fieldset aria-busy={loading} disabled={loading}>
<legend>Additonal Notes?</legend> <legend>Additional Notes?</legend>
<textarea <label htmlFor="note">
name="note" <p className="sr-only">
id="note" Enter additional notes your want to ask Irene and Bradley
cols="30" </p>
rows="10" <textarea
value={inputs.note} name="note"
onChange={handleChange} id="note"
placeholder="Anything you want to ask us?" cols="30"
/> rows="10"
value={inputs.note}
onChange={handleChange}
placeholder="Anything you want to ask us?"
/>
</label>
</fieldset> </fieldset>
<hr /> <hr />
{errorMsg && <p className="error">Error: {errorMsg}</p>} {errorMsg && <p className="error">Error: {errorMsg}</p>}
@ -389,7 +396,7 @@ export default function SingleGroupPage({ group }) {
<p>{message}</p> <p>{message}</p>
<div> <div>
<p>Saturday, June 25, 2022 at 5:00 PM</p> <p>Saturday, June 25, 2022 at 5:00 PM</p>
<a href="/ibwedding.ics" aria-label="Click to add to calendar"> <a href="/myevent.ics" aria-label="Click to add to calendar">
<CalendarIcon /> Add to Calendar <CalendarIcon /> Add to Calendar
</a> </a>
</div> </div>

View file

@ -91,7 +91,7 @@ export default function RsvpPage() {
</ErrorContactStyles> </ErrorContactStyles>
)} )}
<fieldset aria-busy={loading} disabled={loading}> <fieldset aria-busy={loading} disabled={loading}>
<label htmlFor="username"> <label htmlFor="firstName">
<span>First Name</span> <span>First Name</span>
<input <input
required required
@ -103,7 +103,7 @@ export default function RsvpPage() {
onChange={handleChange} onChange={handleChange}
/> />
</label> </label>
<label htmlFor="password"> <label htmlFor="lastName">
<span>Last Name</span> <span>Last Name</span>
<input <input
required required