SPFx-Projekte/Organization-Chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Update accessibility features in OrganizationChart component and tests

Browse Source
This commit is contained in:
Torsten Brendgen
2026-08-24 13:56:31 +02:00
parent 18fee714b8
commit 1a69236c3a
3 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webparts/organizationChart/components/OrganizationChart.tsx
+3 -3
View File
@@ -3,7 +3,7 @@ import { IOrganizationNode, IUserProfile } from '../OrganizationChartTypes';
import styles from './OrganizationChart.module.scss'; import styles from './OrganizationChart.module.scss';
import { IOrganizationChartProps } from './IOrganizationChartProps'; import { IOrganizationChartProps } from './IOrganizationChartProps';
interface IOrganizationChartState { export interface IOrganizationChartState {
collapsed: { [account: string]: boolean }; collapsed: { [account: string]: boolean };
} }
@@ -39,7 +39,7 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
const hasChildren: boolean = node.children.length > 0; const hasChildren: boolean = node.children.length > 0;
return ( return (
<li key={profile.accountName} role='treeitem' aria-level={level} <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}> <div className={styles.nodeWrap}>
{this.renderPerson(profile)} {this.renderPerson(profile)}
{hasChildren && <button type='button' className={styles.toggle} {hasChildren && <button type='button' className={styles.toggle}
@@ -62,7 +62,7 @@ export default class OrganizationChart extends React.Component<IOrganizationChar
<span className={styles.cardContent}> <span className={styles.cardContent}>
{this.props.showPictures && <span className={styles.photoWrap}> {this.props.showPictures && <span className={styles.photoWrap}>
<span className={styles.initials} aria-hidden='true'>{this.initials(profile.displayName)}</span> <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)} />} onError={(event: React.SyntheticEvent<HTMLImageElement>): void => this.hideBrokenImage(event)} />}
</span>} </span>}
<span className={styles.personText}> <span className={styles.personText}>
src/webparts/organizationChart/loc/myStrings.d.ts
Vendored
+2 -2
View File
@@ -23,6 +23,6 @@ declare interface IOrganizationChartWebPartStrings {
PeopleCountLabel: string; PeopleCountLabel: string;
} }
declare module 'OrganizationChartWebPartStrings' { declare module 'OrganizationChartWebPartStrings' {
const strings: IOrganizationChartWebPartStrings; const myStrings: IOrganizationChartWebPartStrings;
export = strings; export = myStrings;
} }
tests/validate-project.js
+3 -1
View File
@@ -32,7 +32,9 @@ assert(webPart.indexOf("PropertyPaneSlider('maxDepth'") >= 0 && webPart.indexOf(
'Tree safety limits are missing.'); 'Tree safety limits are missing.');
assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeitem'") >= 0, assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeitem'") >= 0,
'Accessible tree semantics are missing.'); 'Accessible tree semantics are missing.');
assert(component.indexOf('aria-expanded') >= 0, 'Accessible expand/collapse behavior is missing.'); assert(component.indexOf('aria-expanded') >= 0 && component.indexOf('aria-selected={false}') >= 0,
'Accessible tree state is missing.');
assert(component.indexOf("role='presentation'") >= 0, 'Decorative profile images must be hidden from assistive technology.');
['bodyText', 'neutralSecondary', 'neutralLighter', 'themePrimary', 'neutralTertiary', 'white', 'neutralLight', 'focusBorder', 'errorText'] ['bodyText', 'neutralSecondary', 'neutralLighter', 'themePrimary', 'neutralTertiary', 'white', 'neutralLight', 'focusBorder', 'errorText']
.forEach(function(slot) { .forEach(function(slot) {
assert(styles.indexOf('[theme:' + slot + ', default:') >= 0, 'SharePoint theme slot is missing: ' + slot); assert(styles.indexOf('[theme:' + slot + ', default:') >= 0, 'SharePoint theme slot is missing: ' + slot);