From 80d37e2df13fada617cf87b43732975d7ece4eca Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Thu, 4 May 2023 22:49:00 -0400
Subject: [PATCH] Adds proper aria-label to gradient knobs

---
 _locales/en/messages.json           | 8 ++++++++
 ts/components/CustomColorEditor.tsx | 1 +
 ts/components/GradientDial.tsx      | 7 +++++--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 4f60584be..cc28c5878 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -9810,6 +9810,14 @@
     "messageformat": "Custom Color",
     "description": "Modal title for the custom color editor"
   },
+  "icu:GradientDial__knob-start": {
+    "messageformat": "Gradient start",
+    "description": "aria-label for the custom color gradient creator knob"
+  },
+  "icu:GradientDial__knob-end": {
+    "messageformat": "Gradient end",
+    "description": "aria-label for the custom color gradient creator knob"
+  },
   "customDisappearingTimeOption": {
     "message": "Custom time...",
     "description": "(deleted 03/29/2023) Text for an option in Disappearing Messages menu and Conversation Details Disappearing Messages setting when no user value is available"
diff --git a/ts/components/CustomColorEditor.tsx b/ts/components/CustomColorEditor.tsx
index 9e65e7be5..16e6a7730 100644
--- a/ts/components/CustomColorEditor.tsx
+++ b/ts/components/CustomColorEditor.tsx
@@ -99,6 +99,7 @@ export function CustomColorEditor({
               <div data-supertab>
                 <GradientDial
                   deg={color.deg}
+                  i18n={i18n}
                   knob1Style={{ backgroundColor: getHSL(color.start) }}
                   knob2Style={{
                     backgroundColor: getHSL(
diff --git a/ts/components/GradientDial.tsx b/ts/components/GradientDial.tsx
index 445504ee9..54ea77ae9 100644
--- a/ts/components/GradientDial.tsx
+++ b/ts/components/GradientDial.tsx
@@ -5,6 +5,7 @@ import type { CSSProperties, KeyboardEvent } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { arrow } from '../util/keyboard';
+import type { LocalizerType } from '../types/Util';
 
 export enum KnobType {
   start = 'start',
@@ -13,6 +14,7 @@ export enum KnobType {
 
 export type PropsType = {
   deg?: number;
+  i18n: LocalizerType;
   knob1Style: CSSProperties;
   knob2Style: CSSProperties;
   onChange: (deg: number) => unknown;
@@ -187,6 +189,7 @@ function getKnobCoordinates(
 
 export function GradientDial({
   deg = 180,
+  i18n,
   knob1Style,
   knob2Style,
   onChange,
@@ -274,7 +277,7 @@ export function GradientDial({
     <div className="GradientDial__container" ref={containerRef}>
       {knobDim.start && (
         <div
-          aria-label="0"
+          aria-label={i18n('icu:GradientDial__knob-start')}
           className={classNames('GradientDial__knob', {
             'GradientDial__knob--selected': selectedKnob === KnobType.start,
           })}
@@ -297,7 +300,7 @@ export function GradientDial({
       )}
       {knobDim.end && (
         <div
-          aria-label="1"
+          aria-label={i18n('icu:GradientDial__knob-end')}
           className={classNames('GradientDial__knob', {
             'GradientDial__knob--selected': selectedKnob === KnobType.end,
           })}