Global header: avatar button must have discernable text

[jcjuett]

Bug at this link: http://design-system-react-components.herokuapp.com/?selectedKind=SLDSGlobalHeader&selectedStory=Search%20%2B%20Navigation&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

Reproduce error: tab to avatar button and detect button label with VoiceOver

Success criteria: appropriate text (example: user profile information) inside button must be read by screen reader

[welcome]

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[tanhengyeow]

Hi @interactivellama

I've looked into this a little and all the other stories except With custom <Avatar /> (which has the avatar props passed in) faces this issue.

They all use this component to render the avatar button (the button is wrapped by an underlying Popover component):

					<GlobalHeaderProfile
						popover={
							<Popover
								body={<HeaderProfileCustomContent />}
								id="header-profile-popover-id"
							/>
						}
						userName="Art Vandelay"
					/>

The differing logic is shown below. If there is Avatar component passed in, it is rendered in a way that the screen reader is able to detect the user name and read it inside the button.

					{typeof avatar === 'string' ? (
						<span className="slds-avatar slds-avatar_circle slds-avatar_medium">
							<img alt={this.props.userName} src={avatar} title="User avatar" />
						</span>
					) : (
						avatar || null
					)}

This is my initial analysis for this issue.

[interactivellama]

Fix is in latest SLDS markup for Global Header Avatar