tonyair/doc.silverstripe.org
1
0
Fork 0
mirror of https://github.com/silverstripe/doc.silverstripe.org synced 2024-10-22 17:05:50 +02:00
Code Issues Projects Releases Wiki Activity

a11y fixes

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ChildrenOf.tsx
View File

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

2
src/components/Header.tsx
View File

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

2
src/components/Layout.tsx
View File

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

2
src/components/Nav.tsx
View File

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

8
src/theme/assets/scss/ss-docs.scss
View File

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

2
src/theme/assets/scss/ss-variables.scss
View File

@ -6,4 +6,4 @@ $container-max-widths: (
) !default; ) !default;
$theme-bg-light: lighten($theme-text-color-secondary, 65%); $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; $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%);

3
src/utils/rewriteLink.ts
View File

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