Repository: excalidraw/excalidraw
File: src/components/ColorPicker.tsx (TypeScript)

Code before:
      role="dialog"
      aria-modal="true"
      aria-label={t("labels.colorPicker")}
      onKeyDown={handleKeyDown}
    >
      <div className="color-picker-triangle color-picker-triangle-shadow"></div>
      <div className="color-picker-triangle"></div>
      <div
        className="color-picker-content"
        ref={(el) => {
          if (el) {
            gallery.current = el;
          }
        }}
        tabIndex={0}
      >
        {colors.map((_color, i) => (
          <button
            className="color-picker-swatch"
            onClick={(event) => {
              (event.currentTarget as HTMLButtonElement).focus();
              onChange(_color);
            }}
            title={`${t(`colors.${_color.replace("#", "")}`)}${
              !isTransparent(_color) ? ` (${_color})` : ""
            } — ${keyBindings[i].toUpperCase()}`}
            aria-label={t(`colors.${_color.replace("#", "")}`)}
            aria-keyshortcuts={keyBindings[i]}
            style={{ color: _color }}
            key={_color}
            ref={(el) => {
              if (el && i === 0) {
                firstItem.current = el;
              }
              if (el && _color === color) {
                activeItem.current = el;
              }
            }}
            onFocus={() => {
              onChange(_color);
            }}
          >
            {isTransparent(_color) ? (
              <div className="color-picker-transparent"></div>
            ) : undefined}
            <span className="color-picker-keybinding">{keyBindings[i]}</span>
          </button>
        ))}
        {showInput && (
          <ColorInput
            color={color}

Review comment (refactor):
I think this is sort of impacting readability so we can try to simplify it
`t(colors.${_color.replace("#", "")}` can be assigned to a variable `ariaLabel` and reused here and line 151 as well.

Code after:
      role="dialog"
      aria-modal="true"
      aria-label={t("labels.colorPicker")}
      onKeyDown={handleKeyDown}
    >
      <div className="color-picker-triangle color-picker-triangle-shadow"></div>
      <div className="color-picker-triangle"></div>
      <div
        className="color-picker-content"
        ref={(el) => {
          if (el) {
            gallery.current = el;
          }
        }}
        tabIndex={0}
      >
        {colors.map((_color, i) => {
          const _colorWithoutHash = _color.replace("#", "");
          return (
            <button
              className="color-picker-swatch"
              onClick={(event) => {
                (event.currentTarget as HTMLButtonElement).focus();
                onChange(_color);
              }}
              title={`${t(`colors.${_colorWithoutHash}`)}${
                !isTransparent(_color) ? ` (${_color})` : ""
              } — ${keyBindings[i].toUpperCase()}`}
              aria-label={t(`colors.${_colorWithoutHash}`)}
              aria-keyshortcuts={keyBindings[i]}
              style={{ color: _color }}
              key={_color}
              ref={(el) => {
                if (el && i === 0) {
                  firstItem.current = el;
                }
                if (el && _color === color) {
                  activeItem.current = el;
                }
              }}
              onFocus={() => {
                onChange(_color);
              }}
            >
              {isTransparent(_color) ? (
                <div className="color-picker-transparent"></div>
              ) : undefined}
              <span className="color-picker-keybinding">{keyBindings[i]}</span>
            </button>
          );
        })}