Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility - Add focus styles and fix inputs #40

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Prev Previous commit
Next Next commit
Add theme to focus styles
  • Loading branch information
thatblindgeye committed Oct 10, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 2e4acf477eaf7a05e38a5f8c5d954e0b2b0a5a8d
10 changes: 10 additions & 0 deletions src/components/Landing/Landing.js
Original file line number Diff line number Diff line change
@@ -20,6 +20,11 @@ function Landing() {
const { theme, drawerOpen } = useContext(ThemeContext);

const useStyles = makeStyles((t) => ({
socialsLink: {
'&:focus': {
outline: `1.5px dotted ${theme.secondary}`,
},
},
resumeBtn: {
color: theme.primary,
borderRadius: '30px',
@@ -91,6 +96,7 @@ function Landing() {
<div className='lcl--content'>
{socialsData.linkedIn && (
<a
className={classes.socialsLink}
href={socialsData.linkedIn}
target='_blank'
rel='noreferrer'
@@ -104,6 +110,7 @@ function Landing() {
)}
{socialsData.github && (
<a
className={classes.socialsLink}
href={socialsData.github}
target='_blank'
rel='noreferrer'
@@ -117,6 +124,7 @@ function Landing() {
)}
{socialsData.twitter && (
<a
className={classes.socialsLink}
href={socialsData.twitter}
target='_blank'
rel='noreferrer'
@@ -130,6 +138,7 @@ function Landing() {
)}
{socialsData.youtube && (
<a
className={classes.socialsLink}
href={socialsData.youtube}
target='_blank'
rel='noreferrer'
@@ -143,6 +152,7 @@ function Landing() {
)}
{socialsData.blogger && (
<a
className={classes.socialsLink}
href={socialsData.blogger}
target='_blank'
rel='noreferrer'
15 changes: 9 additions & 6 deletions src/components/Navbar/Navbar.js
Original file line number Diff line number Diff line change
@@ -34,18 +34,18 @@ function Navbar() {
navMenuButton: {
background: 'transparent',
border: 'none',
'&:focus': {
outline: `1.5px dotted ${theme.tertiary}`,
},
'&:hover svg': {
color: theme.primary,
},
},
navMenuIcon: {
fontSize: '2.5rem',
color: theme.tertiary,
cursor: 'pointer',
transition: 'color 0.3s',
'&:focus': {
color: theme.primary,
},
'&:hover': {
color: theme.primary,
},
[t.breakpoints.down('sm')]: {
fontSize: '2.5rem',
},
@@ -77,6 +77,9 @@ function Navbar() {
right: 40,
top: 40,
transition: 'color 0.2s',
'&:focus': {
outline: `1px dotted ${theme.tertiary}`,
},
'&:hover': {
color: theme.tertiary,
},