fix: JAWS issue in avatar (#17)

cloudscape-design · Jul 29, 2024 · 2ecdd4e · 2ecdd4e
1 parent f7142c7
commit 2ecdd4e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/pages/avatar/permutations.page.tsx b/pages/avatar/permutations.page.tsx
@@ -32,7 +32,7 @@ export default function AvatarPage() {
  <main>
  <TestBed>
  <Avatar ariaLabel="User avatar" />
- <Avatar color="gen-ai" iconName="gen-ai" ariaLabel="User avatar" />
+ <Avatar color="gen-ai" iconName="gen-ai" ariaLabel="Gen AI assistant" />
 
  <Avatar initials="GW" ariaLabel="User avatar GW" tooltipText="User avatar" />
  <Avatar color="gen-ai" initials="GW" ariaLabel="Gen AI assistant GW" tooltipText="Gen AI assistant" />
@@ -45,8 +45,8 @@ export default function AvatarPage() {
  tooltipText="Gen AI assistant generating response"
  />
 
- <Avatar iconSvg={customIconSvg} ariaLabel="Avatar loading" />
- <Avatar color="gen-ai" iconSvg={customIconSvg} ariaLabel="Gen AI assistant loading" />
+ <Avatar iconSvg={customIconSvg} ariaLabel="Avatar with custom SVG icon" />
+ <Avatar color="gen-ai" iconSvg={customIconSvg} ariaLabel="Gen AI avatar with custom SVG icon" />
  </TestBed>
  </main>
  </ScreenshotArea>

diff --git a/src/avatar/internal.tsx b/src/avatar/internal.tsx
@@ -94,7 +94,9 @@ export default function InternalAvatar({
  />
  )}
 
- <div className={styles.content}>
+ {/* aria-hidden is added so that screen readers focus only the parent div */}
+ {/* when it is not hidden, it becomes unstable in JAWS */}
+ <div className={styles.content} aria-hidden="true">
  <AvatarContent
  color={color}
  ariaLabel={ariaLabel}