Modified value of aria-valuetext for iOS so it correctly announces ta…

…bs with VoiceOver
department-of-veterans-affairs · Jan 22, 2025 · 7e99445 · 7e99445
1 parent 55a07f4
commit 7e99445
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -11,7 +11,7 @@ import React, { FC, useEffect } from 'react'
 import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
-import { PressableOpacityStyle, useTheme } from '../../utils'
+import { isIOS, PressableOpacityStyle, useTheme } from '../../utils'
 
 /**
  * Props for {@link SegmentedControl}
@@ -96,6 +96,13 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
       total: labels.length,
     })
 
+    const accessibilityValueText = isIOS()
+      ? t('tab') +
+        ', ' +
+        (isSelected ? t('selected') + ', ' : '') +
+        a11yListPosition
+      : a11yListPosition
+
     const textStyle: TextStyle = {
       ...typography.vadsFontBodyLarge,
       fontFamily: isSelected ? 'SourceSansPro-Bold' : 'SourceSansPro-Regular',
@@ -112,7 +119,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         key={index}
         widthPct={`${100 / labels.length}%`}
         aria-label={accessibilityLabel}
-        aria-valuetext={a11yListPosition}
+        aria-valuetext={accessibilityValueText}
         accessibilityHint={a11yHints ? a11yHints[index] : ''}
         role={'tab'}
         accessibilityState={{ selected: isSelected }}

diff --git a/packages/components/src/utils/translation/en.json b/packages/components/src/utils/translation/en.json
@@ -7,6 +7,8 @@
   "leaveAppAlert.title": "Leave the mobile app?",
   "listPosition": "{{position}} of {{total}}",
   "required": "Required",
+  "selected": "Selected",
+  "tab": "Tab",
   "tryAgain": "Try again",
   "undo": "Undo"
 }