Add screen reader labels to table headers which are not buttons
This commit is contained in:
parent
4cd01a3b3b
commit
e8e67e8a76
|
@ -161,6 +161,15 @@ class Table extends Component {
|
||||||
? sprintf( __( 'Sort by %s in ascending order', 'wc-admin' ), screenReaderLabel )
|
? sprintf( __( 'Sort by %s in ascending order', 'wc-admin' ), screenReaderLabel )
|
||||||
: sprintf( __( 'Sort by %s in descending order', 'wc-admin' ), screenReaderLabel );
|
: sprintf( __( 'Sort by %s in descending order', 'wc-admin' ), screenReaderLabel );
|
||||||
|
|
||||||
|
const textLabel = (
|
||||||
|
<Fragment>
|
||||||
|
<span aria-hidden={ Boolean( screenReaderLabel ) }>{ label }</span>
|
||||||
|
{ screenReaderLabel && (
|
||||||
|
<span className="screen-reader-text">{ screenReaderLabel }</span>
|
||||||
|
) }
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<th role="columnheader" scope="col" key={ i } { ...thProps }>
|
<th role="columnheader" scope="col" key={ i } { ...thProps }>
|
||||||
{ isSortable ? (
|
{ isSortable ? (
|
||||||
|
@ -177,17 +186,14 @@ class Table extends Component {
|
||||||
onClick={ this.sortBy( key ) }
|
onClick={ this.sortBy( key ) }
|
||||||
isDefault
|
isDefault
|
||||||
>
|
>
|
||||||
<span aria-hidden={ Boolean( screenReaderLabel ) }>{ label }</span>
|
{ textLabel }
|
||||||
{ screenReaderLabel && (
|
|
||||||
<span className="screen-reader-text">{ screenReaderLabel }</span>
|
|
||||||
) }
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<span className="screen-reader-text" id={ labelId }>
|
<span className="screen-reader-text" id={ labelId }>
|
||||||
{ iconLabel }
|
{ iconLabel }
|
||||||
</span>
|
</span>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
) : (
|
) : (
|
||||||
label
|
textLabel
|
||||||
) }
|
) }
|
||||||
</th>
|
</th>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue