Feature/tabs a11y (#1513)
* Update tabs for a11y * Use transition for background and set a11y for tab content * Remove unneccessary tabIndex from tab content * Fix lint issuesold
parent
79e031e149
commit
94f649363a
|
@ -65,7 +65,7 @@ const factory = (ripple, FontIcon) => {
|
||||||
}, className);
|
}, className);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...other} data-react-toolbox="tab" className={_className} onClick={this.handleClick}>
|
<div {...other} data-react-toolbox="tab" role="tab" tabIndex="0" className={_className} onClick={this.handleClick}>
|
||||||
{icon && <FontIcon className={theme.icon} value={icon} />}
|
{icon && <FontIcon className={theme.icon} value={icon} />}
|
||||||
{label}
|
{label}
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -9,7 +9,7 @@ class TabContent extends Component {
|
||||||
active: PropTypes.bool,
|
active: PropTypes.bool,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
tabIndex: PropTypes.number,
|
hidden: PropTypes.bool,
|
||||||
theme: PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
active: PropTypes.string,
|
active: PropTypes.string,
|
||||||
tab: PropTypes.string,
|
tab: PropTypes.string,
|
||||||
|
@ -19,6 +19,7 @@ class TabContent extends Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
active: false,
|
active: false,
|
||||||
className: '',
|
className: '',
|
||||||
|
hidden: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -27,7 +28,7 @@ class TabContent extends Component {
|
||||||
}, this.props.className);
|
}, this.props.className);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={className} tabIndex={this.props.tabIndex}>
|
<section className={className} role="tabpanel" aria-expanded={this.props.hidden}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -198,10 +198,10 @@ const factory = (Tab, TabContent, FontIcon) => {
|
||||||
{hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
|
{hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
|
||||||
<FontIcon className={theme.arrow} value="keyboard_arrow_left" />
|
<FontIcon className={theme.arrow} value="keyboard_arrow_left" />
|
||||||
</div>}
|
</div>}
|
||||||
<nav className={theme.navigation} ref={(node) => { this.navigationNode = node; }}>
|
<div className={theme.navigation} role="tablist" ref={(node) => { this.navigationNode = node; }}>
|
||||||
{this.renderHeaders(headers)}
|
{this.renderHeaders(headers)}
|
||||||
<span className={classNamePointer} style={this.state.pointer} />
|
<span className={classNamePointer} style={this.state.pointer} />
|
||||||
</nav>
|
</div>
|
||||||
{hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
|
{hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
|
||||||
<FontIcon className={theme.arrow} value="keyboard_arrow_right" />
|
<FontIcon className={theme.arrow} value="keyboard_arrow_right" />
|
||||||
</div>}
|
</div>}
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
--tab-navigation-border-color: var(--color-divider);
|
--tab-navigation-border-color: var(--color-divider);
|
||||||
--tab-pointer-color: var(--color-primary);
|
--tab-pointer-color: var(--color-primary);
|
||||||
--tab-pointer-height: calc(0.2 * var(--unit));
|
--tab-pointer-height: calc(0.2 * var(--unit));
|
||||||
|
--tab-focus-color: color(var(--color-primary-contrast) a(10%));
|
||||||
--tab-text: var(--color-black);
|
--tab-text: var(--color-black);
|
||||||
--tab-text-color: var(--tab-text);
|
--tab-text-color: var(--tab-text);
|
||||||
--tab-text-inactive-color: color(var(--tab-text) a(70%));
|
--tab-text-inactive-color: color(var(--tab-text) a(70%));
|
||||||
|
|
|
@ -46,9 +46,14 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
transition-duration: var(--animation-duration);
|
transition-duration: var(--animation-duration);
|
||||||
transition-property: box-shadow, color;
|
transition-property: background-color, box-shadow, color;
|
||||||
transition-timing-function: var(--animation-curve-default);
|
transition-timing-function: var(--animation-curve-default);
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
background-color: var(--tab-focus-color);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
& > .rippleWrapper {
|
& > .rippleWrapper {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue