feat: Update accessibility features in OrganizationChart component and tests
This commit is contained in:
@@ -3,7 +3,7 @@ import { IOrganizationNode, IUserProfile } from '../OrganizationChartTypes';
|
||||
import styles from './OrganizationChart.module.scss';
|
||||
import { IOrganizationChartProps } from './IOrganizationChartProps';
|
||||
|
||||
interface IOrganizationChartState {
|
||||
export interface IOrganizationChartState {
|
||||
collapsed: { [account: string]: boolean };
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
|
||||
const hasChildren: boolean = node.children.length > 0;
|
||||
return (
|
||||
<li key={profile.accountName} role='treeitem' aria-level={level}
|
||||
aria-expanded={hasChildren ? !collapsed : undefined}>
|
||||
aria-selected={false} aria-expanded={hasChildren ? !collapsed : undefined}>
|
||||
<div className={styles.nodeWrap}>
|
||||
{this.renderPerson(profile)}
|
||||
{hasChildren && <button type='button' className={styles.toggle}
|
||||
@@ -62,7 +62,7 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
|
||||
<span className={styles.cardContent}>
|
||||
{this.props.showPictures && <span className={styles.photoWrap}>
|
||||
<span className={styles.initials} aria-hidden='true'>{this.initials(profile.displayName)}</span>
|
||||
{profile.pictureUrl && <img className={styles.photo} src={profile.pictureUrl} alt=''
|
||||
{profile.pictureUrl && <img className={styles.photo} src={profile.pictureUrl} alt='' role='presentation'
|
||||
onError={(event: React.SyntheticEvent<HTMLImageElement>): void => this.hideBrokenImage(event)} />}
|
||||
</span>}
|
||||
<span className={styles.personText}>
|
||||
|
||||
Reference in New Issue
Block a user