fix: a11y — accessible label on SectionAccordion, opacity-60 on category headings
This commit is contained in:
@@ -33,6 +33,8 @@ interface SectionAccordionProps {
|
||||
* Accordion-style section that collapses to a navigation link when inactive.
|
||||
*/
|
||||
export function SectionAccordion({ number, title, id, isActive, href, children }: SectionAccordionProps) {
|
||||
const heading = `${number}. ${title}`;
|
||||
|
||||
return (
|
||||
<section id={id} className="scroll-mt-8">
|
||||
{isActive ? (
|
||||
@@ -43,7 +45,7 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
||||
className="font-heading font-black text-5xl leading-[1.2] mb-0"
|
||||
style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
|
||||
>
|
||||
{number}. {title}
|
||||
{heading}
|
||||
</h1>
|
||||
</div>
|
||||
</ViewTransitionWrapper>
|
||||
@@ -52,13 +54,17 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
||||
</ViewTransitionWrapper>
|
||||
</div>
|
||||
) : (
|
||||
<Link href={href} className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0">
|
||||
<h2
|
||||
className="font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
|
||||
<Link
|
||||
href={href}
|
||||
aria-label={heading}
|
||||
className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0"
|
||||
>
|
||||
<span
|
||||
className="block font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
|
||||
style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
|
||||
>
|
||||
{number}. {title}
|
||||
</h2>
|
||||
{heading}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user