fix(v2): various improvements for accessibility (#2442)

This commit is contained in:
Alexey Pyltsyn 2020-03-23 06:46:57 +03:00 committed by GitHub
parent 15a21ace93
commit 3052ef14e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 6 deletions

View file

@ -100,7 +100,7 @@ export default ({children, className: languageClassName, metastring}) => {
{showCopied ? 'Copied' : 'Copy'}
</button>
<code ref={target} className={styles.codeBlockLines} style={style}>
<div ref={target} className={styles.codeBlockLines} style={style}>
{tokens.map((line, i) => {
if (line.length === 1 && line[0].content === '') {
line[0].content = '\n'; // eslint-disable-line no-param-reassign
@ -120,7 +120,7 @@ export default ({children, className: languageClassName, metastring}) => {
</div>
);
})}
</code>
</div>
</pre>
)}
</Highlight>

View file

@ -161,6 +161,7 @@ function DocSidebar(props) {
})}>
<button
aria-label={showResponsiveSidebar ? 'Close Menu' : 'Open Menu'}
aria-haspopup="true"
className="button button--secondary button--sm menu__button"
type="button"
onClick={() => {
@ -176,6 +177,7 @@ function DocSidebar(props) {
</span>
) : (
<svg
aria-label="Menu"
className={styles.sidebarMenuIcon}
xmlns="http://www.w3.org/2000/svg"
height={MOBILE_TOGGLE_SIZE}

View file

@ -89,7 +89,8 @@ function Navbar() {
'navbar-sidebar--show': sidebarShown,
[styles.navbarHideable]: hideOnScroll,
[styles.navbarHidden]: !isNavbarVisible,
})}>
})}
role="navigation">
<div className="navbar__inner">
<div className="navbar__items">
<div

View file

@ -119,7 +119,7 @@ export default ({
{showCopied ? 'Copied' : 'Copy'}
</button>
<code ref={target} className={styles.codeBlockLines} style={style}>
<div ref={target} className={styles.codeBlockLines} style={style}>
{tokens.map((line, i) => {
if (line.length === 1 && line[0].content === '') {
line[0].content = '\n'; // eslint-disable-line no-param-reassign
@ -139,7 +139,7 @@ export default ({
</div>
);
})}
</code>
</div>
</pre>
)}
</Highlight>

View file

@ -77,8 +77,11 @@ function ColorGenerator({children, minHeight, url}) {
return (
<div>
<p>
<strong className="margin-right--sm">Primary Color:</strong>{' '}
<label htmlFor="primary_color">
<strong className="margin-right--sm">Primary Color:</strong>
</label>{' '}
<input
id="primary_color"
className={styles.input}
defaultValue={baseColor}
onChange={event => {
@ -127,6 +130,7 @@ function ColorGenerator({children, minHeight, url}) {
0
) : (
<input
aria-label={`${variableName} CSS variable name`}
className={styles.input}
type="number"
value={adjustmentInput}