fix(liveness): add a11y tags to match indicator bar (#4802)

* fix(liveness): add a11y tags to match indicator bar * Create chilled-donkeys-decide.md * remove automated screen reading for progress bar
aws-amplify · Dec 6, 2023 · c526cf5 · c526cf5
1 parent f370555
commit c526cf5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/chilled-donkeys-decide.md b/.changeset/chilled-donkeys-decide.md
@@ -0,0 +1,7 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+fix(liveness): add a11y tags to match indicator bar
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/MatchIndicator.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/MatchIndicator.tsx
@@ -34,6 +34,10 @@ export const MatchIndicator: React.FC<MatchIndicatorProps> = ({
       <div
         className={`${LivenessClassNames.MatchIndicator}__bar`}
         style={percentageStyles}
+        role="progressbar"
+        aria-label="MatchIndicator"
+        aria-valuenow={percentage}
+        aria-valuetext={`${percentage}% face fit`}
       ></div>
     </div>
   );

diff --git a/packages/ui/src/theme/css/component/liveness.scss b/packages/ui/src/theme/css/component/liveness.scss
@@ -209,7 +209,7 @@
   content: '';
   width: 100%;
   height: 100%;
-  background: var(--amplify-colors-primary-40);
+  background: var(--amplify-colors-primary-80);
   left: -100%;
   transform: translate(var(--percentage), 0);
   transition: var(--amplify-liveness-match-indicator-transition);