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

Improve accessible name for links on home page #455

Merged
merged 5 commits into from
Oct 14, 2023
Merged

Improve accessible name for links on home page #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ec8e3c
Add accessible name to links
milofultz Oct 13, 2023
5afbe4b
Add accessible name to home links
milofultz Oct 13, 2023
41e1991
Use aria-label over title
milofultz Oct 13, 2023
aeb5580
Improve accessible name of links
milofultz Oct 13, 2023
8eaed8b
Update snapshot
milofultz Oct 13, 2023
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
3 changes: 1 addition & 2 deletions src/components/Footer/RenderCallToActionSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,13 @@ const RenderCallToActionSection = ({ isReallySmallScreen }) => (
</Typography>
<Button
variant="contained"
aria-label="proposal-request"
color="secondary"
href="mailto:[email protected]"
target="_blank"
rel="noopener"
sx={{ my: '1rem', width: 1 / 2 }}
>
Proposal
Make a Proposal
</Button>
</Stack>
);
Expand Down
14 changes: 12 additions & 2 deletions src/components/Footer/RenderCompanyInfoSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,21 @@ const TwitterIcon = () => (
// Links for component
const socialLinks = [
{
name: 'Twitter',
href: 'https://twitter.com/',
icon: <TwitterIcon />,
target: '_blank',
rel: 'noopenner'
},
{
name: 'Facebook',
href: 'https://www.facebook.com/',
icon: <FacebookIcon fontSize="large" />,
target: '_blank',
rel: 'noopenner'
},
{
name: 'Instagram',
href: 'https://www.instagram.com/',
icon: <InstagramIcon fontSize="large" />,
target: '_blank',
Expand All @@ -60,8 +63,15 @@ const RenderCompanyInfoSection = ({ isReallySmallScreen }) => (
Follow Us
</Typography>
<Stack direction="row" spacing={isReallySmallScreen ? 3 : 2} alignItems="center">
{socialLinks.map(({ href, icon }) => (
<Link key={href} href={href} target="_blank" rel="noopener" color="#fff">
{socialLinks.map(({ href, icon, name }) => (
<Link
key={href}
href={href}
target="_blank"
rel="noopener"
color="#fff"
aria-label={`Follow us on ${name}`}
>
{icon}
</Link>
))}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavBar/NavbarDesktop.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const NavbarDesktop = ({ setShowConfirmation }) => {
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" color="primary">
<Toolbar sx={{ minHeight: '64px' }}>
<Link to="/">
<Link to="/" aria-label="Home">
<img
src="/pass-logo.png"
alt="logo"
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavBar/NavbarLoggedOut.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const NavbarLoggedOut = () => (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" color="primary">
<Toolbar sx={{ minHeight: '64px' }}>
<Link to="/">
<Link to="/" aria-label="Home">
<img src="/pass-logo.png" alt="logo" style={{ marginRight: '2rem' }} aria-label="logo" />
</Link>
<OidcLoginComponent />
Expand Down
2 changes: 1 addition & 1 deletion src/components/NavBar/NavbarMobile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const NavbarMobile = ({ setShowConfirmation }) => {
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" color="primary">
<Toolbar sx={{ minHeight: '64px' }}>
<Link to="/">
<Link to="/" aria-label="Home">
<img
src="/pass-logo.png"
alt="logo"
Expand Down
1 change: 0 additions & 1 deletion src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ const Home = () => {
description="Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process."
button="Request a Demo"
href="mailto:[email protected]"
label="Demo request button"
/>
<HomeSection
isReallySmallScreen={isReallySmallScreen}
Expand Down
1 change: 0 additions & 1 deletion test/pages/__snapshots__/Home.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ exports[`Home Page > renders 1`] = `
Our innovative solution empowers individuals to manage their critical documents and control access for trusted organizations. PASS simplifies service access, enabling seamless documents requests and secure data sharing for a smoother support process.
</h5>
<a
aria-label="Demo request button"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1fdjaxb-MuiButtonBase-root-MuiButton-root"
href="mailto:[email protected]"
tabindex="0"
Expand Down