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

Improved accessibility and Fixed main nav active states #110

Merged
merged 12 commits into from Aug 17, 2023
Merged

Improved accessibility and Fixed main nav active states #110

merged 12 commits into from Aug 17, 2023

Conversation

SameerJadav
Copy link
Contributor

@SameerJadav SameerJadav commented Aug 15, 2023

I have changed the docs site to make it more accessible and improve SEO. I also fixed the issue where the main navigation links were not showing in their active state. Here are the details of the changes we made:

function isActive(href: string) {
  const segment = useSelectedLayoutSegment();
  if (!segment) return false;
  return href.startsWith(`/${segment}`);
}
  • Changed muted colors a little to improve contrast ratio and gave buttons accessible names, increasing accessibility scores on the homepage from 85 to 100
  • Added hoverOnlyWhenSupported, which will prevent any hover styles from being shipped to devices that don't support hover (phones). You can look at the PR this feature was introduced in Only apply hover styles when supported (future) tailwindlabs/tailwindcss#8394
  • Added necessary meta tags for better SEO

We can also use 'next/images' in the docs and get all the benefits like lazy loading, blur placeholder, etc. and increase the performance even more. However, implementing this would require downloading each image.

Take your time to review the changes. I'm totally up for any feedback or suggestions you might have.

@vercel
Copy link

vercel bot commented Aug 15, 2023

@SameerJadav is attempting to deploy a commit to the t3-oss Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Aug 15, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
t3-env ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 17, 2023 7:39pm

@@ -7,6 +7,7 @@ import { getHighlighter } from "shiki";

/** @type {import('next').NextConfig} */
const nextConfig = {
swcMinify: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is on by default iirc

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it is the default js compiler. i'll remove it from the config

export function MainNav(props: { items: NavItem[] }) {
const pathname = usePathname();
function isActive(href: string) {
const segment = useSelectedLayoutSegment();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this doesn't adhere to rules of hooks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i have moved it inside the component

export function MainNav() {
  const segment = useSelectedLayoutSegment();

  const isActive = (href: string) => {
    if (!segment) return false;
    return href.startsWith(`/${segment}`);
  };

  // ...
}

is this okay?? if it is i will commit it

Copy link
Member

@juliusmarminge juliusmarminge left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the stylistic changes apart from the theme toggle item whose spacing have decreased:

old:
CleanShot 2023-08-16 at 18 05 35@2x

new:
CleanShot 2023-08-16 at 18 05 32@2x

@SameerJadav
Copy link
Contributor Author

I like the stylistic changes apart from the theme toggle item whose spacing have decreased:

old: CleanShot 2023-08-16 at 18 05 35@2x

new: CleanShot 2023-08-16 at 18 05 32@2x

i've added back the spacing

docs/src/components/main-nav.tsx Outdated Show resolved Hide resolved
@juliusmarminge juliusmarminge added this pull request to the merge queue Aug 17, 2023
Merged via the queue into t3-oss:main with commit 32222dc Aug 17, 2023
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants