From 1a69236c3a40c784caa5597b9d14f574c4871304 Mon Sep 17 00:00:00 2001
From: Torsten Brendgen <torsten.brendgen@microsoft.com>
Date: Mon, 24 Aug 2026 13:56:31 +0200
Subject: [PATCH] feat: Update accessibility features in OrganizationChart
 component and tests

---
 .../organizationChart/components/OrganizationChart.tsx      | 6 +++---
 src/webparts/organizationChart/loc/myStrings.d.ts           | 4 ++--
 tests/validate-project.js                                   | 4 +++-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/webparts/organizationChart/components/OrganizationChart.tsx b/src/webparts/organizationChart/components/OrganizationChart.tsx
index 24e03db..f5637f4 100644
--- a/src/webparts/organizationChart/components/OrganizationChart.tsx
+++ b/src/webparts/organizationChart/components/OrganizationChart.tsx
@@ -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}>
diff --git a/src/webparts/organizationChart/loc/myStrings.d.ts b/src/webparts/organizationChart/loc/myStrings.d.ts
index 8d5b996..664855a 100644
--- a/src/webparts/organizationChart/loc/myStrings.d.ts
+++ b/src/webparts/organizationChart/loc/myStrings.d.ts
@@ -23,6 +23,6 @@ declare interface IOrganizationChartWebPartStrings {
   PeopleCountLabel: string;
 }
 declare module 'OrganizationChartWebPartStrings' {
-  const strings: IOrganizationChartWebPartStrings;
-  export = strings;
+  const myStrings: IOrganizationChartWebPartStrings;
+  export = myStrings;
 }
diff --git a/tests/validate-project.js b/tests/validate-project.js
index 94cf16e..7ec845d 100644
--- a/tests/validate-project.js
+++ b/tests/validate-project.js
@@ -32,7 +32,9 @@ assert(webPart.indexOf("PropertyPaneSlider('maxDepth'") >= 0 && webPart.indexOf(
   'Tree safety limits are missing.');
 assert(component.indexOf("role='tree'") >= 0 && component.indexOf("role='treeitem'") >= 0,
   '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']
   .forEach(function(slot) {
     assert(styles.indexOf('[theme:' + slot + ', default:') >= 0, 'SharePoint theme slot is missing: ' + slot);