a11y fixes

This commit is contained in:
Aaron Carlino 2019-11-20 11:46:39 +13:00
parent ca4383b113
commit 63833a4f28
7 changed files with 13 additions and 8 deletions

View File

@ -19,7 +19,7 @@ const createCards = (children: SilverstripeDocument[]): ReactElement[] => {
<div className="card-text">
{summary || ''}
</div>
<Link className="card-link-mask" to={slug}></Link>
<Link className="card-link-mask" to={slug} aria-label={title}></Link>
</div>
</div>
</div>

View File

@ -31,7 +31,7 @@ const handleNavigate = (e: any): void => {
const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): ReactElement => {
const home = getHomePage();
return (
<header className="header fixed-top">
<header role="banner" className="header fixed-top">
<div className="branding docs-branding">
<div className="container position-relative py-2 d-flex">
<div className="docs-logo-wrapper">

View File

@ -25,7 +25,7 @@ const Layout: StatelessComponent<LayoutProps> = ({ children, pathContext: { slug
<Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
<div className="docs-content">
<div className="container">
<article className="docs-article">
<article role="main" className="docs-article">
{children}
</article>
</div>

View File

@ -28,7 +28,7 @@ const Nav:StatelessComponent<NavProps> = ({ onNavigate }): ReactElement => {
}
return (
<nav id="docs-nav" className="docs-nav navbar">
<nav role="navigation" id="docs-nav" className="docs-nav navbar">
<ul className="section-items list-unstyled nav flex-column pb-3">
{getNavChildren(top).map((node: SilverstripeDocument) => {
const { slug, title } = node;

View File

@ -17,6 +17,9 @@ body {
.search-input {
border-radius: 5px;
background: $gray-200;
&:focus {
color: $gray-900;
}
}
}
.docs-sidebar {
@ -92,7 +95,7 @@ code {
span {
text-transform: uppercase;
font-size: 0.8rem;
color: $gray-700;
color: $gray-850;
}
}
img {
@ -122,6 +125,7 @@ code {
label {
font-size: 0.7rem;
margin: 0 0.5rem;
color: $gray-900;
}
select {
appearance: none;
@ -177,7 +181,7 @@ h1, h2, h3 {
width: 100%;
margin: 2rem 0;
a {
color: $gray-800;
color: $gray-850;
}
}

View File

@ -6,4 +6,4 @@ $container-max-widths: (
) !default;
$theme-bg-light: lighten($theme-text-color-secondary, 65%);
$font-family-sans-serif: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
$gray-850: lighten($theme-text-color-secondary, 5%);

View File

@ -52,7 +52,8 @@ const rewriteLink = (
className: 'api-link',
href,
target: '_blank',
}
},
domToReact(children, parseOptions)
)
}