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.

Sign up for GitHub

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
Open

Accessibility - Add focus styles and fix inputs #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c06c67e
Add ID for inputs to link to labels
thatblindgeye Oct 10, 2021
93815d3
Add focus styles for navmenu
thatblindgeye Oct 10, 2021
d568915
Add focus styles for landing resume and contact links
thatblindgeye Oct 10, 2021
2e4acf4
Add theme to focus styles
thatblindgeye Oct 10, 2021
d0303cf
Add focus style to marquee
thatblindgeye Oct 10, 2021
90c1a34
Add focus styles for projects
thatblindgeye Oct 10, 2021
a7e506e
Add focus and hover styles for testimonial buttons
thatblindgeye Oct 10, 2021
af7915d
Add focus styles for blog links
thatblindgeye Oct 10, 2021
9dbde53
Add focus styles for contacts links
thatblindgeye Oct 10, 2021
52fa1c8
Add focus style to backToTop button
thatblindgeye Oct 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions src/components/BackToTop/BackToTop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,13 @@ function BackToTop() {
window.addEventListener('scroll', toggleVisible);

const useStyles = makeStyles(() => ({
icon: {
toTopBtn: {
'&:focus svg': {
outline: `1px dotted ${theme.tertiary}`,
outlineOffset: '4px',
},
},
toTopIcon: {
fontSize: '3rem',
color: theme.tertiary,
},
Expand All @@ -42,8 +48,12 @@ function BackToTop() {
style={{ display: visible ? 'inline' : 'none' }}
className='backToTop'
>
<button onClick={scrollToTop} aria-label='Back to top'>
<IoIosArrowDropupCircle className={classes.icon} />
<button
className={classes.toTopBtn}
onClick={scrollToTop}
aria-label='Back to top'
>
<IoIosArrowDropupCircle className={classes.toTopIcon} />
</button>
</div>
);
Expand Down
21 changes: 5 additions & 16 deletions src/components/Blog/Blog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
overflow-x: hidden;
}


.blog--header {
display: flex;
align-items: center;
Expand All @@ -17,7 +16,6 @@
margin: 1rem;
}


.blog--header h1 {
margin-bottom: 40px;
font-size: 3.5rem;
Expand Down Expand Up @@ -49,29 +47,25 @@
justify-content: flex-end;
}

.blog--viewAll a button {
.blog--viewAll a {
outline: none;
border: none;
width: 150px;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: space-evenly;
text-transform: inherit;
border-radius: 45px;
font-size: 1.05rem;
font-family: var(--primaryFont);
font-weight: 500;
padding-left: 1.5rem;
cursor: pointer;
}


@media (min-width: 992px) and (max-width: 1380px) {

}


@media screen and (max-width: 992px) {
.blog--bodyContainer {
display: flex;
Expand Down Expand Up @@ -101,20 +95,15 @@
.blog--viewAll a {
position: absolute;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%);
}
}

@media screen and (max-width: 400px) {

}

@media only screen and (min-device-width: 320px) and (max-device-width:
480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
}


@media only screen and (device-width: 768px) {

}
}
94 changes: 51 additions & 43 deletions src/components/Blog/Blog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,44 @@
import React,{ useContext} from 'react';
import { Link } from 'react-router-dom'
import React, { useContext } from 'react';
import { Link } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import { HiArrowRight } from "react-icons/hi";
import { HiArrowRight } from 'react-icons/hi';

import './Blog.css';
import { ThemeContext } from '../../contexts/ThemeContext';
import { blogData } from '../../data/blogData'
import { blogData } from '../../data/blogData';
import SingleBlog from './SingleBlog/SingleBlog';


function Blog() {

const { theme } = useContext(ThemeContext);

const useStyles = makeStyles(() => ({
viewAllBtn : {
color: theme.tertiary,
viewAllBtn: {
color: theme.tertiary,
backgroundColor: theme.primary,
"&:hover": {
color: theme.secondary,
'&:focus': {
color: theme.secondary,
backgroundColor: theme.primary,
}
outline: `1px dotted ${theme.tertiary}`,
outlineOffset: `2px`,
},
'&:hover': {
color: theme.secondary,
backgroundColor: theme.primary,
},
},
viewArr : {
color: theme.tertiary,
viewArr: {
color: theme.tertiary,
backgroundColor: theme.secondary70,
width: '40px',
height: '40px',
padding: '0.5rem',
fontSize: '1.05rem',
borderRadius: '50%',
cursor: 'pointer',
"&:hover": {
color: theme.tertiary,
'&:hover': {
color: theme.tertiary,
backgroundColor: theme.secondary,
}
},
},
}));

Expand All @@ -43,42 +47,46 @@ function Blog() {
return (
<>
{blogData.length > 0 && (
<div className="blog" id="blog" style={{backgroundColor: theme.secondary}}>
<div className="blog--header">
<h1 style={{color: theme.primary}}>Blog</h1>
<div
className='blog'
id='blog'
style={{ backgroundColor: theme.secondary }}
>
<div className='blog--header'>
<h1 style={{ color: theme.primary }}>Blog</h1>
</div>
<div className="blog--body">
<div className="blog--bodyContainer">
{blogData.slice(0, 3).reverse().map(blog => (
<SingleBlog
theme={theme}
title={blog.title}
desc={blog.description}
date={blog.date}
image={blog.image}
url={blog.url}
key={blog.id}
id={blog.id}
/>
))}
</div>
<div className='blog--body'>
<div className='blog--bodyContainer'>
{blogData
.slice(0, 3)
.reverse()
.map((blog) => (
<SingleBlog
theme={theme}
title={blog.title}
desc={blog.description}
date={blog.date}
image={blog.image}
url={blog.url}
key={blog.id}
id={blog.id}
/>
))}
</div>

{blogData.length > 3 && (
<div className="blog--viewAll">
<Link to="/blog">
<button className={classes.viewAllBtn}>
View All
<HiArrowRight className={classes.viewArr} />
</button>
<div className='blog--viewAll'>
<Link to='/blog' className={classes.viewAllBtn}>
View All
<HiArrowRight className={classes.viewArr} />
</Link>
</div>
)}
</div>
</div>
)}

</>
)
);
}

export default Blog
export default Blog;
44 changes: 33 additions & 11 deletions src/components/Blog/SingleBlog/SingleBlog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,46 @@
import React from 'react'
import React from 'react';
import Fade from 'react-reveal/Fade';
import { makeStyles } from '@material-ui/core/styles';

import placeholder from '../../../assets/png/placeholder.png'
import './SingleBlog.css'
import placeholder from '../../../assets/png/placeholder.png';
import './SingleBlog.css';

function SingleBlog({ theme, title, desc, date, image, url, id }) {
const useStyles = makeStyles((t) => ({
blogItem: {
'&:focus': {
outline: `1px dotted ${theme.tertiary}`,
outlineOffset: '4px',
},
},
}));

const classes = useStyles();

return (
<Fade bottom>
<a className="singleBlog" key={id} href={url} target="_blank" rel="noreferrer" style={{backgroundColor: theme.primary400}}>
<div className="singleBlog--image" style={{backgroundColor: theme.secondary}}>
<a
className={`singleBlog ${classes.blogItem}`}
key={id}
href={url}
target='_blank'
rel='noreferrer'
style={{ backgroundColor: theme.primary400 }}
>
<div
className='singleBlog--image'
style={{ backgroundColor: theme.secondary }}
>
<img src={image ? image : placeholder} alt={title} />
</div>
<div className="singleBlog--body">
<p style={{color: theme.tertiary}}>{date}</p>
<h3 style={{color: theme.secondary}}>{title}</h3>
<h6 style={{color: theme.secondary}}>{desc}</h6>
<div className='singleBlog--body'>
<p style={{ color: theme.tertiary }}>{date}</p>
<h3 style={{ color: theme.secondary }}>{title}</h3>
<h6 style={{ color: theme.secondary }}>{desc}</h6>
</div>
</a>
</Fade>
)
);
}

export default SingleBlog
export default SingleBlog;
25 changes: 23 additions & 2 deletions src/components/Contacts/Contacts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ function Contacts() {
padding: '0 5px',
transform: 'translate(25px,50%)',
display: 'inline-flex',
cursor: 'pointer',
},
socialIcon: {
width: '45px',
Expand All @@ -91,12 +92,24 @@ function Contacts() {
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:focus': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
'&:hover': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
detailsLink: {
'&:focus div': {
transform: 'scale(1.1)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
},
detailsIcon: {
backgroundColor: theme.primary,
color: theme.secondary,
Expand All @@ -119,6 +132,11 @@ function Contacts() {
backgroundColor: theme.primary,
color: theme.secondary,
transition: '250ms ease-in-out',
'&:focus': {
transform: 'scale(1.08)',
color: theme.secondary,
backgroundColor: theme.tertiary,
},
'&:hover': {
transform: 'scale(1.08)',
color: theme.secondary,
Expand Down Expand Up @@ -176,6 +194,7 @@ function Contacts() {
Name
</label>
<input
id='Name'
placeholder='John Doe'
value={name}
onChange={(e) => setName(e.target.value)}
Expand All @@ -192,6 +211,7 @@ function Contacts() {
Email
</label>
<input
id='Email'
placeholder='[email protected]'
value={email}
onChange={(e) => setEmail(e.target.value)}
Expand All @@ -208,6 +228,7 @@ function Contacts() {
Message
</label>
<textarea
id='Message'
placeholder='Type your message....'
value={message}
onChange={(e) => setMessage(e.target.value)}
Expand Down Expand Up @@ -283,7 +304,7 @@ function Contacts() {
<div className='contacts-details'>
<a
href={`mailto:${contactsData.email}`}
className='personal-details'
className={`personal-details ${classes.detailsLink}`}
>
<div className={classes.detailsIcon}>
<FiAtSign />
Expand All @@ -294,7 +315,7 @@ function Contacts() {
</a>
<a
href={`tel:${contactsData.phone}`}
className='personal-details'
className={`personal-details ${classes.detailsLink}`}
>
<div className={classes.detailsIcon}>
<FiPhone />
Expand Down
Loading