Adds proper aria-label to gradient knobs

_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"

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(

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,
           })}