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

View file

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

View file

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

View file

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

View file

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