Skip to content

Commit 3b1dfba

Browse files
musalemusale
authored
fix: update the text announced for person image, initials and email address (#1923)
Closes #1907 * chore: remove unused variable * fix: change the alt text for person image The new alt text includes 'photo for <person name>' prefix which differentiates the image and name announcements of a person component * fix: change the alt text for person image The new alt text includes 'photo for <person name>' prefix which differentiates the image and name announcements of a person component * feat: add localization strings for person component * feat: set the title text according to available parameters If there are initials, set the title to indicate they are initials. If the image is availabele set the title with the 'photo for' prefix. If we have email set the title with the 'email address' prefix. Empty titles will be set as empty strings. This will throw accessibility bugs when you run the AI tool [aria-label text cannot be empty] * fix: set the license text on all files
1 parent 1b0bf78 commit 3b1dfba

File tree

9 files changed

+87
-14
lines changed

9 files changed

+87
-14
lines changed

‎packages/mgt-components/src/components/mgt-person/mgt-person.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import '../sub-components/mgt-flyout/mgt-flyout';
2222
import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
2323
import { PersonCardInteraction } from './../PersonCardInteraction';
2424
import { styles } from './mgt-person-css';
25+
import { strings } from './strings';
2526

2627
export { PersonCardInteraction } from '../PersonCardInteraction';
2728

@@ -142,6 +143,10 @@ export class MgtPerson extends MgtTemplatedComponent {
142143
return styles;
143144
}
144145

146+
protected get strings() {
147+
return strings;
148+
}
149+
145150
/**
146151
* Global Configuration object for all
147152
* person components
@@ -665,22 +670,18 @@ export class MgtPerson extends MgtTemplatedComponent {
665670
* @memberof MgtPerson
666671
*/
667672
protected renderImage(personDetailsInternal: IDynamicPerson, imageSrc: string) {
668-
const title =
669-
personDetailsInternal && this.personCardInteraction === PersonCardInteraction.none
670-
? personDetailsInternal.displayName || getEmailFromGraphEntity(personDetailsInternal) || ''
671-
: '';
672673
if (imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo') {
674+
const altText = `${this.strings.photoFor} ${personDetailsInternal.displayName}`;
673675
return html`
674676
<div class="img-wrapper">
675-
<img alt=${personDetailsInternal.displayName} src=${imageSrc} @error=${() =>
676-
(this._isInvalidImageSrc = true)} />
677+
<img alt=${altText} src=${imageSrc} @error=${() => (this._isInvalidImageSrc = true)} />
677678
</div>
678679
`;
679680
} else if (personDetailsInternal) {
680681
const initials = this.getInitials(personDetailsInternal);
681682

682683
return html`
683-
<span class="initials-text" aria-label="${initials}">
684+
<span class="initials-text" aria-label="${this.strings.initials} ${initials}">
684685
${
685686
initials && initials.length
686687
? html`
@@ -809,20 +810,31 @@ export class MgtPerson extends MgtTemplatedComponent {
809810
* @memberof MgtPersonCard
810811
*/
811812
protected renderAvatar(personDetailsInternal: IDynamicPerson, image: string, presence: Presence): TemplateResult {
812-
const title =
813-
personDetailsInternal && this.personCardInteraction === PersonCardInteraction.none
814-
? personDetailsInternal.displayName || getEmailFromGraphEntity(personDetailsInternal) || ''
815-
: '';
816-
813+
const hasInitials = !image || this._isInvalidImageSrc || this._avatarType === avatarType.initials;
817814
const imageClasses = {
818-
initials: !image || this._isInvalidImageSrc || this._avatarType === 'initials',
815+
initials: hasInitials,
819816
small: !this.isLargeAvatar(),
820817
'user-avatar': true
821818
};
822819

823-
if ((!image || this._isInvalidImageSrc || this._avatarType === 'initials') && personDetailsInternal) {
820+
let title = '';
821+
822+
if (hasInitials && personDetailsInternal) {
824823
// add avatar background color
825824
imageClasses[this._personAvatarBg] = true;
825+
title = `${this.strings.initials} ${this.getInitials(personDetailsInternal)}`;
826+
} else {
827+
title = personDetailsInternal ? personDetailsInternal.displayName || '' : '';
828+
if (title !== '') {
829+
title = `${this.strings.photoFor} ${title}`;
830+
}
831+
}
832+
833+
if (title === '') {
834+
const emailAddress = getEmailFromGraphEntity(personDetailsInternal);
835+
if (emailAddress !== null) {
836+
title = `${this.strings.emailAddress} ${emailAddress}`;
837+
}
826838
}
827839

828840
const imageTemplate: TemplateResult = this.renderImage(personDetailsInternal, image);

‎packages/mgt-components/src/components/mgt-person/strings.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
export const strings = {
9+
photoFor: 'Photo for',
10+
emailAddress: 'Email address',
11+
initials: 'Initials'
12+
};

‎packages/mgt-components/src/utils/FluentComponents.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
// import { provideFluentDesignSystem } from '@fluentui/web-components';
29

310
// const designSystem = provideFluentDesignSystem();

‎packages/mgt-spfx/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
export { MgtLibrary } from './libraries/mgt/MgtLibrary';
29
export * from '@microsoft/mgt-sharepoint-provider';
310
export * from '@microsoft/mgt-components';

‎packages/mgt-spfx/src/libraries/mgt/MgtLibrary.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
export class MgtLibrary {
29
public name(): string {
310
return 'MgtLibrary';

‎packages/mgt-spfx/src/libraries/mgt/loc/en-us.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
define([], function() {
29
return {
310
}

‎packages/providers/mgt-msal2-provider/src/Msal2Provider.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
import {
29
IProvider,
310
LoginType,

‎packages/providers/mgt-msal2-provider/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
export * from './Msal2Provider';
29
export * from './mgt-msal2-provider';

‎packages/providers/mgt-teamsfx-provider/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
18
export * from './TeamsFxProvider';

0 commit comments

Comments
 (0)