Repository: freeCodeCamp/freeCodeCamp
File: client/src/assets/images/components/bear-progress-modal.tsx (TypeScript)

Code before:
import React from 'react';

function BearProgressModal(
  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
  return (
    <>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 187 175'
        width='187'
        height='178'
        fill='none'
        role='img'
        aria-labelledby='bear-progress-label'
        {...props}
      >
        <title id='bear-progress-label'>
          Illustration of a bear holding a jar with hearts in the background
        </title>
        <path
          d='M187 95c0 32.268-8.375 58.697-34 75.376h-22.5c-10 3.124-10.5 4.124-32 5.124-20.5-1-26.5-1-36-5.124h-27C9.875 153.697 0 124.268 0 92 0 40.638 40.257 0 93 0s94 43.638 94 95z'
          fill='#fff'
        />
        <path
          d='M32.938 76.065c-.243 1.039-.459 2.75-1.285 3.294-.885.58-2.41-.051-3.522-.312-2.15-.504-4.298-3.575-2.982-4.807 1.316-1.232 3.149-.29 3.149-.29s-.03-2.06 1.658-2.692c2.07-.774 3.486 2.656 2.982 4.807z'
          fill='#EA6853'
          fillOpacity='.2'
        />
        <path
          d='M172.894 46.77c-.659.454-1.642 1.295-2.374 1.18-.784-.124-1.311-1.244-1.797-1.95-.939-1.364-.582-4.15.77-4.17 1.351-.02 1.893 1.427 1.893 1.427s1.022-1.159 2.278-.658c1.538.615.594 3.232-.77 4.171z'
          fill='#FBE1DD'
        />
        <path
          d='M161.97 82.814c-.746.29-1.897.88-2.583.6-.734-.302-.988-1.513-1.298-2.312-.599-1.544.392-4.173 1.712-3.88 1.32.292 1.512 1.826 1.512 1.826s1.263-.892 2.368-.115c1.355.953-.167 3.282-1.711 3.881z'
          fill='#EA6853'
          fillOpacity='.2'
        />
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M56.643 94.997c3.483-6.078 6.6-9.902 8.128-11.622h66.702a305.11 305.11 0 0 1 4.322 11.194 168.54 168.54 0 0 0-2.297-.008c-5.99.02-10.661.41-15.325.8-4.711.394-9.415.787-15.464.797-6.257.011-11.123-.392-15.996-.797-4.823-.4-9.653-.8-15.846-.8-4.278 0-9.375.188-14.224.436zm-10.468 25.66a118.368 118.368 0 0 1 5.015-14.58c6.466.2 13.614.467 16.255.734.936.095 2.166.232 3.628.396 6.763.755 18.493 2.065 29.004 2.268 12.307.236 30.89-1.292 34.019-1.559.31-.027.609-.058.917-.095l5.129-.621a310.704 310.704 0 0 1 4.025 13.46H46.396c-.074 0-.148-.001-.22-.003zm-4.125 22.07c.54-5.036 1.297-9.737 2.209-14.111.116.003.232.008.35.016l24.152 1.616h31.842l31.842-1.066 13.794-.461c1.251 5.225 2.343 10.564 3.15 15.828-5.884-.388-12.409-.776-17.733-.985-9.771-.384-16.088-.427-24.525-.484h-.001c-2.027-.014-4.177-.029-6.527-.049-11.97-.104-30.401-.008-31.762 0H44.127c-.722 0-1.42-.106-2.077-.304zm-.874 21.712a175.35 175.35 0 0 1 .109-11.431 6.511 6.511 0 0 1 2.793-.846c6.736-.472 17.686-1.139 25.736-1.141 7.941-.003 14.149.672 20.325 1.344 6.4.695 12.765 1.387 20.991 1.319 7.246-.06 17.841-.752 21.261-.988a32.38 32.38 0 0 1 2.225-.077h15.779c.409 4.382.564 8.638.387 12.651-5.699-.019-12.099.002-17.284.132-5.594.14-10.076.477-14.447.806-5.354.402-10.54.792-17.395.792-10.56 0-26.115-1.15-30.594-1.499a32.254 32.254 0 0 0-2.506-.099h-23.93a6.623 6.623 0 0 1-3.45-.963z'
          fill='#BED4FF'
        />

Review comment (suggestion):
```suggestion
          Illustration of an adorable, but sad looking teddy bear holding an empty money jar.
```

Granted, alt text is an art, not a science, so there is no one correct solution here. I do think we should try to describe the purpose of this image. To me it is to tug on the heart strings just a little, implying that fCC needs their donation.

Perhaps "sad" isn't the best word to describe the look on the bear's face? Please suggest alternatives if you have them.

Code after:
import React from 'react';
import { useTranslation } from 'react-i18next';

function BearProgressModal(
  props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 187 175'
        width='187'
        height='178'
        fill='none'
        role='img'
        aria-labelledby='bear-progress-label'
        {...props}
      >
        <title id='bear-progress-label'>{t('donate.bear-progress-alt')}</title>
        <path
          d='M187 95c0 32.268-8.375 58.697-34 75.376h-22.5c-10 3.124-10.5 4.124-32 5.124-20.5-1-26.5-1-36-5.124h-27C9.875 153.697 0 124.268 0 92 0 40.638 40.257 0 93 0s94 43.638 94 95z'
          fill='#fff'
        />
        <path
          d='M32.938 76.065c-.243 1.039-.459 2.75-1.285 3.294-.885.58-2.41-.051-3.522-.312-2.15-.504-4.298-3.575-2.982-4.807 1.316-1.232 3.149-.29 3.149-.29s-.03-2.06 1.658-2.692c2.07-.774 3.486 2.656 2.982 4.807z'
          fill='#EA6853'
          fillOpacity='.2'
        />
        <path
          d='M172.894 46.77c-.659.454-1.642 1.295-2.374 1.18-.784-.124-1.311-1.244-1.797-1.95-.939-1.364-.582-4.15.77-4.17 1.351-.02 1.893 1.427 1.893 1.427s1.022-1.159 2.278-.658c1.538.615.594 3.232-.77 4.171z'
          fill='#FBE1DD'
        />
        <path
          d='M161.97 82.814c-.746.29-1.897.88-2.583.6-.734-.302-.988-1.513-1.298-2.312-.599-1.544.392-4.173 1.712-3.88 1.32.292 1.512 1.826 1.512 1.826s1.263-.892 2.368-.115c1.355.953-.167 3.282-1.711 3.881z'
          fill='#EA6853'
          fillOpacity='.2'
        />
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M56.643 94.997c3.483-6.078 6.6-9.902 8.128-11.622h66.702a305.11 305.11 0 0 1 4.322 11.194 168.54 168.54 0 0 0-2.297-.008c-5.99.02-10.661.41-15.325.8-4.711.394-9.415.787-15.464.797-6.257.011-11.123-.392-15.996-.797-4.823-.4-9.653-.8-15.846-.8-4.278 0-9.375.188-14.224.436zm-10.468 25.66a118.368 118.368 0 0 1 5.015-14.58c6.466.2 13.614.467 16.255.734.936.095 2.166.232 3.628.396 6.763.755 18.493 2.065 29.004 2.268 12.307.236 30.89-1.292 34.019-1.559.31-.027.609-.058.917-.095l5.129-.621a310.704 310.704 0 0 1 4.025 13.46H46.396c-.074 0-.148-.001-.22-.003zm-4.125 22.07c.54-5.036 1.297-9.737 2.209-14.111.116.003.232.008.35.016l24.152 1.616h31.842l31.842-1.066 13.794-.461c1.251 5.225 2.343 10.564 3.15 15.828-5.884-.388-12.409-.776-17.733-.985-9.771-.384-16.088-.427-24.525-.484h-.001c-2.027-.014-4.177-.029-6.527-.049-11.97-.104-30.401-.008-31.762 0H44.127c-.722 0-1.42-.106-2.077-.304zm-.874 21.712a175.35 175.35 0 0 1 .109-11.431 6.511 6.511 0 0 1 2.793-.846c6.736-.472 17.686-1.139 25.736-1.141 7.941-.003 14.149.672 20.325 1.344 6.4.695 12.765 1.387 20.991 1.319 7.246-.06 17.841-.752 21.261-.988a32.38 32.38 0 0 1 2.225-.077h15.779c.409 4.382.564 8.638.387 12.651-5.699-.019-12.099.002-17.284.132-5.594.14-10.076.477-14.447.806-5.354.402-10.54.792-17.395.792-10.56 0-26.115-1.15-30.594-1.499a32.254 32.254 0 0 0-2.506-.099h-23.93a6.623 6.623 0 0 1-3.45-.963z'
          fill='#BED4FF'
        />