-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from ITurres/fix/accessibility
Issue #11 🎫: Accessibility issues
- Loading branch information
Showing
17 changed files
with
7,402 additions
and
8,289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,3 +18,6 @@ yarn-error.log* | |
| config.ts | ||
|
|
||
| .env | ||
|
|
||
| # * pull request template. | ||
| pr.md | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,7 +17,9 @@ const ContactForm: React.FC = () => { | |
| // * sessionStorage.getItem('formContent')! is not null. | ||
| ); | ||
|
|
||
| // * This state is to disable the submit button after the form is submitted. | ||
| const [formSubmittedStatus, setFormSubmittedStatus] = useState(false); | ||
| const [showSubmitButton, setShowSubmitButton] = useState(false); | ||
|
|
||
| const actionURL = process.env.REACT_APP_FORM_ACTION_URL; | ||
|
|
||
|
|
@@ -54,8 +56,14 @@ const ContactForm: React.FC = () => { | |
| ) => { | ||
| if (isValid) { | ||
| inputDomElement.classList.remove('invalid'); | ||
| if (inputDomElement.nextSibling instanceof HTMLElement) { | ||
| inputDomElement.nextSibling.classList.add('show'); | ||
|
|
||
| // * If the input is valid, remove invalid class, add show class to next | ||
| // * input after label, and add valid class. | ||
| // ! Note: This method of accessing the next input after the label may not | ||
| // ! be the most robust. | ||
| const inputElementAfterLabelElement = inputDomElement.nextSibling?.nextSibling; | ||
| if (inputElementAfterLabelElement instanceof HTMLElement) { | ||
| inputElementAfterLabelElement.classList.add('show'); | ||
| } | ||
| inputDomElement.classList.add('valid'); | ||
| } else { | ||
|
|
@@ -64,45 +72,46 @@ const ContactForm: React.FC = () => { | |
| } | ||
| }; | ||
|
|
||
| const setSubmitButtonStyle = (isValid: boolean) => { | ||
| if (isValid) { | ||
| $submitButton.current?.classList.remove('invalid'); | ||
| $submitButton.current?.classList.add('valid'); | ||
| } else { | ||
| $submitButton.current?.classList.remove('valid'); | ||
| $submitButton.current?.classList.add('invalid'); | ||
| } | ||
| }; | ||
|
|
||
| const validateInput = useCallback((input: any, regex: RegExp) => { | ||
| const inputKey = input.obj.current?.name as keyof typeof inputs; | ||
| const isValid = regex.test(input.obj.current?.value || ''); | ||
| const validateInput = useCallback( | ||
| (input: any, regex: RegExp) => { | ||
| const inputKey = input.obj.current?.name as keyof typeof inputs; | ||
| const isValid = regex.test(input.obj.current?.value || ''); | ||
|
|
||
| inputs[inputKey].validated = isValid; | ||
| setInputStyle(input.obj.current, isValid); | ||
| inputs[inputKey].validated = isValid; | ||
| setInputStyle(input.obj.current, isValid); | ||
|
|
||
| // * set the submit button style based on the validity of all inputs. | ||
| setSubmitButtonStyle( | ||
| Object.values(inputs).every((inputObj) => inputObj.validated), | ||
| ); | ||
| }, [inputs]); | ||
| // * set the submit button style based on the validity of all inputs. | ||
| const areAllValidInputs = Object.values(inputs).every( | ||
| (inputObj) => inputObj.validated, | ||
| ); | ||
| if (areAllValidInputs) { | ||
| setShowSubmitButton(true); | ||
| } else { | ||
| setShowSubmitButton(false); | ||
| } | ||
| }, | ||
| [inputs], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (formContent) { | ||
| sessionStorage.setItem('formContent', JSON.stringify(formContent)); | ||
| } | ||
| }, [formContent]); | ||
|
|
||
| const updateFormContent = useCallback((input: any) => () => { | ||
| const inputKey = input.obj.current?.name as keyof typeof inputs; | ||
| const updateFormContent = useCallback( | ||
| (input: any) => () => { | ||
| const inputKey = input.obj.current?.name as keyof typeof inputs; | ||
|
|
||
| setFormContent((previousFormContent: any) => { | ||
| const currentFormContent = { ...previousFormContent }; | ||
| currentFormContent[inputKey] = input.obj.current?.value; | ||
| setFormContent((previousFormContent: any) => { | ||
| const currentFormContent = { ...previousFormContent }; | ||
| currentFormContent[inputKey] = input.obj.current?.value; | ||
|
|
||
| return currentFormContent; | ||
| }); | ||
| }, []); | ||
| return currentFormContent; | ||
| }); | ||
| }, | ||
| [], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| Object.values(inputs).forEach((input) => { | ||
|
|
@@ -236,7 +245,10 @@ const ContactForm: React.FC = () => { | |
| ref={$form} | ||
| onSubmit={handleSubmission} | ||
| > | ||
| {/* eslint-disable jsx-a11y/label-has-associated-control */} | ||
| <label htmlFor="name">Name:</label> | ||
| <input | ||
| id="name" | ||
| type="text" | ||
| ref={$nameInputRef} | ||
| name="name" | ||
|
|
@@ -245,7 +257,9 @@ const ContactForm: React.FC = () => { | |
| required | ||
| /> | ||
|
|
||
| <label htmlFor="company">Company name: </label> | ||
| <input | ||
| id="company" | ||
| type="text" | ||
| ref={$companyInputRef} | ||
| name="company" | ||
|
|
@@ -254,15 +268,19 @@ const ContactForm: React.FC = () => { | |
| required | ||
| /> | ||
|
|
||
| <label htmlFor="email">Email: </label> | ||
| <input | ||
| id="email" | ||
| type="email" | ||
| ref={$emailInputRef} | ||
| name="email" | ||
| placeholder="an email, e.g [email protected]" | ||
| required | ||
| /> | ||
|
|
||
| <label htmlFor="message">Message: </label> | ||
| <textarea | ||
| id="message" | ||
| ref={$messageInputRef} | ||
| name="message" | ||
| placeholder="your message, at least 20 characters long" | ||
|
|
@@ -271,22 +289,28 @@ const ContactForm: React.FC = () => { | |
| required | ||
| /> | ||
|
|
||
| <button | ||
| type="submit" | ||
| disabled={formSubmittedStatus} | ||
| ref={$submitButton} | ||
| className="my-btn" | ||
| > | ||
| {formSubmittedStatus ? 'Thank you!' : 'Send'} | ||
| {formSubmittedStatus && ( | ||
| <img | ||
| src={successButtonIcon} | ||
| alt="alien waving hand" | ||
| aria-hidden="true" | ||
| className="send-email-icon" | ||
| /> | ||
| )} | ||
| </button> | ||
| {showSubmitButton && ( | ||
| <button | ||
| type="submit" | ||
| disabled={formSubmittedStatus} | ||
| ref={$submitButton} | ||
| className={`my-btn ${showSubmitButton ? 'valid show' : 'invalid'}`} | ||
| aria-label={ | ||
| formSubmittedStatus ? 'Thank you! email sent' : 'Send email' | ||
| } | ||
| > | ||
| {formSubmittedStatus ? 'Thank you!' : 'Send'} | ||
|
|
||
| {formSubmittedStatus && ( | ||
| <img | ||
| src={successButtonIcon} | ||
| alt="alien waving hand" | ||
| aria-hidden="true" | ||
| className="send-email-icon" | ||
| /> | ||
| )} | ||
| </button> | ||
| )} | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
|
|
||
| import '../../styles/UI/ExpertiseLinks.scss'; | ||
|
|
||
| const ExpertiseLinks: React.FC = () => ( | ||
| <div className="expertise-links"> | ||
| <Link | ||
| to="/homepage/expertise" | ||
| className="text-hue-rotate" | ||
| aria-label="navigate to expertise section" | ||
| > | ||
| languages | ||
| </Link> | ||
| <Link | ||
| to="/homepage/expertise" | ||
| className="text-hue-rotate" | ||
| aria-label="navigate to expertise section" | ||
| > | ||
| frameworks | ||
| </Link> | ||
| <Link | ||
| to="/homepage/expertise" | ||
| className="text-hue-rotate" | ||
| aria-label="navigate to expertise section" | ||
| > | ||
| skills | ||
| </Link> | ||
| <a | ||
| href="https://docs.google.com/document/d/1vfOALwpILAh8Jn29zV6aO6jwuGZQwLyYjRb3_YKZfQ0/edit?usp=sharing" | ||
| className="text-hue-rotate" | ||
| aria-label="navigate to Arthur's resume which is hosted on Google Docs" | ||
| target="_blank" | ||
| rel="noreferrer noopener" | ||
| > | ||
| resume | ||
| </a> | ||
| </div> | ||
| ); | ||
|
|
||
| export default ExpertiseLinks; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.