mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-21 21:16:59 +02:00
fix(v2): various improvements for accessibility (#2442)
This commit is contained in:
parent
15a21ace93
commit
3052ef14e5
5 changed files with 13 additions and 6 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue