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);
|
||||
|
||||
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} />}
|
||||
{label}
|
||||
{children}
|
||||
|
|
|
@ -9,7 +9,7 @@ class TabContent extends Component {
|
|||
active: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
hidden: PropTypes.bool,
|
||||
theme: PropTypes.shape({
|
||||
active: PropTypes.string,
|
||||
tab: PropTypes.string,
|
||||
|
@ -19,6 +19,7 @@ class TabContent extends Component {
|
|||
static defaultProps = {
|
||||
active: false,
|
||||
className: '',
|
||||
hidden: true,
|
||||
};
|
||||
|
||||
render() {
|
||||
|
@ -27,7 +28,7 @@ class TabContent extends Component {
|
|||
}, this.props.className);
|
||||
|
||||
return (
|
||||
<section className={className} tabIndex={this.props.tabIndex}>
|
||||
<section className={className} role="tabpanel" aria-expanded={this.props.hidden}>
|
||||
{this.props.children}
|
||||
</section>
|
||||
);
|
||||
|
|
|
@ -198,10 +198,10 @@ const factory = (Tab, TabContent, FontIcon) => {
|
|||
{hasLeftArrow && <div className={theme.arrowContainer} onClick={this.scrollRight}>
|
||||
<FontIcon className={theme.arrow} value="keyboard_arrow_left" />
|
||||
</div>}
|
||||
<nav className={theme.navigation} ref={(node) => { this.navigationNode = node; }}>
|
||||
<div className={theme.navigation} role="tablist" ref={(node) => { this.navigationNode = node; }}>
|
||||
{this.renderHeaders(headers)}
|
||||
<span className={classNamePointer} style={this.state.pointer} />
|
||||
</nav>
|
||||
</div>
|
||||
{hasRightArrow && <div className={theme.arrowContainer} onClick={this.scrollLeft}>
|
||||
<FontIcon className={theme.arrow} value="keyboard_arrow_right" />
|
||||
</div>}
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
--tab-navigation-border-color: var(--color-divider);
|
||||
--tab-pointer-color: var(--color-primary);
|
||||
--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-color: var(--tab-text);
|
||||
--tab-text-inactive-color: color(var(--tab-text) a(70%));
|
||||
|
|
|
@ -46,9 +46,14 @@
|
|||
position: relative;
|
||||
text-transform: uppercase;
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: box-shadow, color;
|
||||
transition-property: background-color, box-shadow, color;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--tab-focus-color);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
& > .rippleWrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue