Fix/a11y

src/components/auth/LockForm/LockForm.tsx

@@ -60,7 +60,7 @@ export const LockForm: React.FC = () => {
           <S.Time>{currentTime}</S.Time>
           <S.Date>{currentDate}</S.Date>
           <S.AvatarCircle>
-            <Avatar src={user?.imgUrl} size={mobileOnly ? 59 : 77} />
+            <Avatar src={user?.imgUrl} alt="user avatar" size={mobileOnly ? 59 : 77} />
           </S.AvatarCircle>
           <S.Name>{fullName}</S.Name>
         </S.ContentWrapper>

src/components/common/ArticleCard/ArticleCard.tsx

@@ -31,13 +31,13 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
   return (
     <S.Wrapper className={className}>
       <S.Header>
-        {!!avatar && <Avatar src={avatar} size={43} />}
+        {!!avatar && <Avatar src={avatar} alt="author" size={43} />}
         <S.AuthorWrapper>
           {author && <S.Author>{author}</S.Author>}
           <S.DateTime>{Dates.format(date, 'L')}</S.DateTime>
         </S.AuthorWrapper>
       </S.Header>
-      <S.Image src={imgUrl} preview={false} />
+      <S.Image src={imgUrl} alt="article" preview={false} />
       <S.InfoWrapper>
         <S.InfoHeader>
           <S.Title>{title}</S.Title>

src/components/dashboard/bloodScreeningCard/BloodScreeningTable/BloodScreeningTable.styles.ts

@@ -29,7 +29,7 @@ export const Table = styled(CommonTable)`
 `;
 
 export const Text = styled.span<TextProps>`
-  color: ${(props) => (props.$isActive ? props.theme.colors.text.main : props.theme.colors.text.light)};
+  color: ${(props) => props.theme.colors.text.main};
   font-weight: ${(props) =>
     props.$isActive ? props.theme.commonFontWeight.semibold : props.theme.commonFontWeight.regular};
 `;

src/components/dashboard/screeningsCard/ScreeningsHeader/ScreeningsHeader.tsx

@@ -27,27 +27,31 @@ export const ScreeningsHeader: React.FC<ScreeningsHeaderProps> = ({ currentStati
           ]}
         >
           <Col xs={12}>
-            <MonthSelect
-              value={currentStatistics.month}
-              width="100%"
-              bordered={false}
-              shadow
-              placeholder={t('dashboard.latestScreenings.month')}
-              onChange={(month) => setCurrentStatistics((prev) => ({ ...prev, month } as CurrentStatisticsState))}
-            />
+            <label>
+              <MonthSelect
+                value={currentStatistics.month}
+                width="100%"
+                bordered={false}
+                shadow
+                placeholder={t('dashboard.latestScreenings.month')}
+                onChange={(month) => setCurrentStatistics((prev) => ({ ...prev, month } as CurrentStatisticsState))}
+              />
+            </label>
           </Col>
 
           <Col xs={12}>
-            <StatisticsSelect
-              value={currentStatistics.statistic}
-              width="100%"
-              bordered={false}
-              shadow
-              placeholder={t('dashboard.latestScreenings.statistics')}
-              onChange={(statistic) =>
-                setCurrentStatistics((prev) => ({ ...prev, statistic } as CurrentStatisticsState))
-              }
-            />
+            <label>
+              <StatisticsSelect
+                value={currentStatistics.statistic}
+                width="100%"
+                bordered={false}
+                shadow
+                placeholder={t('dashboard.latestScreenings.statistics')}
+                onChange={(statistic) =>
+                  setCurrentStatistics((prev) => ({ ...prev, statistic } as CurrentStatisticsState))
+                }
+              />
+            </label>
           </Col>
         </Row>
       </Col>

src/components/dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.styles.ts

@@ -18,7 +18,10 @@ export const ScreeningsRow = styled(Row)<ScreeningsRowProps>`
   cursor: pointer;
   transition: all 0.3s ease;
 
-  opacity: ${(props) => (props.$isActive ? 1 : 0.5)};
+  .ant-typography {
+    font-weight: ${(props) =>
+      props.$isActive ? props.theme.commonFontWeight.bold : props.theme.commonFontWeight.regular};
+  }
 `;
 
 export const Avatar = styled(AntAvatar)<Importance>`

src/components/dashboard/screeningsCard/screeningsFriends/ScreeningsFriend/ScreeningsFriend.tsx

@@ -65,7 +65,7 @@ export const ScreeningsFriend: React.FC<ScreeningsFriendProps> = ({
           <S.Percentage $isDowngrade={isDowngrade}>
             <Space size={0}>
               {isDowngrade ? <CaretDownOutlined /> : <CaretUpOutlined />}
-              {getDifference(value, prevValue)}
+              <S.Percentage $isDowngrade={isDowngrade}>{getDifference(value, prevValue)}</S.Percentage>
             </Space>
           </S.Percentage>
         </Col>

src/components/dashboard/treatmentCard/TreatmentCalendar/TreatmentCalendar.styles.ts

@@ -26,10 +26,12 @@ export const Event = styled.div<Event>`
   height: 100%;
   box-shadow: 0 5px 15px rgba(0, 89, 171, 0.3);
 
+  font-weight: ${(props) => props.theme.commonFontWeight.bold};
+
   background: ${(props) => props.theme.colors.main.secondaryBackground};
 
   ${(props) =>
-    props.$isPast ? `color: ${props.theme.colors.main.light}` : `color: ${props.theme.colors.main.primary}`};
+    props.$isPast ? `color: ${props.theme.colors.text.main}` : `color: ${props.theme.colors.main.primary}`};
 
   border-radius: ${(props) => props.theme.border.radius};
 `;
@@ -70,14 +72,15 @@ export const Calendar = styled(AntCalendar)`
 
         background: ${(props) => props.theme.colors.main.primary};
 
+        .ant-picker-calendar-date-value,
+        ${Event} {
+          color: ${(props) => props.theme.commonColors.white};
+        }
+
         .ant-picker-calendar-date-content > div {
           background: ${(props) => props.theme.colors.main.primary};
         }
       }
-
-      ${Event} {
-        color: ${(props) => props.theme.commonColors.white};
-      }
     }
 
     .ant-picker-cell-inner {

src/components/dashboard/treatmentCard/TreatmentDoctor/TreatmentDoctor.tsx

@@ -25,7 +25,7 @@ export const TreatmentDoctor: React.FC<TreatmentDoctorProps> = ({ doctor }) => {
   return (
     <S.DoctorCard padding={'1rem'}>
       <S.DoctorCardBody>
-        <Avatar src={imgUrl} size={128} />
+        <Avatar src={imgUrl} alt={doctor.name} size={128} />
 
         <S.DoctorName>{`${name}, ${t(`common.${speciality}`)}`}</S.DoctorName>
         <Row gutter={[8, 8]}>

src/components/forms/ValidationForm/ValidationForm.tsx

@@ -86,9 +86,11 @@ export const ValidationForm: React.FC = () => {
       </BaseButtonsForm.Item>
 
       <BaseButtonsForm.Item label={t('forms.validationFormLabels.inputNumber')}>
-        <BaseButtonsForm.Item name="input-number" noStyle>
-          <InputNumber min={1} max={10} />
-        </BaseButtonsForm.Item>
+        <label>
+          <BaseButtonsForm.Item name="input-number" noStyle>
+            <InputNumber min={1} max={10} />
+          </BaseButtonsForm.Item>
+        </label>
         <span> {t('forms.validationFormLabels.machines')}</span>
       </BaseButtonsForm.Item>
 

src/components/header/dropdowns/searchDropdown/SearchDropdown.tsx

@@ -51,6 +51,7 @@ export const SearchDropdown: React.FC<SearchOverlayProps> = ({
               <Btn
                 size="small"
                 type={isFilterVisible ? 'ghost' : 'text'}
+                aria-label="Filter"
                 icon={<FilterIcon />}
                 onClick={() => setFilterActive(!isFilterVisible)}
               />

src/components/profile/profileCard/ProfileInfo/ProfileInfo.styles.ts

@@ -100,7 +100,7 @@ export const Text = styled(Typography.Text)`
   font-size: 0.75rem;
   text-align: left;
 
-  color: ${(props) => props.theme.colors.text.light};
+  color: ${(props) => props.theme.colors.text.main};
 
   @media only screen and ${(props) => props.theme.media.md} {
     text-align: center;

src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/CountriesItem/CountriesItem.tsx

@@ -11,7 +11,7 @@ const countries = countryList.getData();
 const selectOptions = countries.map((country) => (
   <Option key={country.name} value={country.code}>
     <S.CountriesSpace align="center">
-      <ReactCountryFlag countryCode={country.code} svg />
+      <ReactCountryFlag countryCode={country.code} svg alt="country flag" />
       {country.name}
     </S.CountriesSpace>
   </Option>

src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/LanguageItem/LanguageItem.tsx

@@ -9,7 +9,7 @@ import { languages } from '@app/constants/languages';
 const languageOptions = languages.map((lang) => (
   <Option key={lang.id} value={lang.name}>
     <Space align="center">
-      <ReactCountryFlag svg countryCode={lang.countryCode} />
+      <ReactCountryFlag svg countryCode={lang.countryCode} alt="country flag" />
       {lang.title}
     </Space>
   </Option>

src/components/profile/profileCard/profileFormNav/nav/PersonalInfo/SocialLinksItem/SocialLinksItem.tsx

@@ -21,9 +21,11 @@ export const SocialLinksItem: React.FC = () => {
               const twitter = getFieldValue('twitter');
 
               return (
-                <BaseButtonsForm.Item name="twitter">
-                  <ClipboardInput valueToCopy={twitter} addonBefore={<TwitterOutlined />} />
-                </BaseButtonsForm.Item>
+                <label>
+                  <BaseButtonsForm.Item name="twitter">
+                    <ClipboardInput valueToCopy={twitter} addonBefore={<TwitterOutlined />} />
+                  </BaseButtonsForm.Item>
+                </label>
               );
             }}
           </BaseButtonsForm.Item>
@@ -34,17 +36,19 @@ export const SocialLinksItem: React.FC = () => {
               const linkedin = getFieldValue('linkedin');
 
               return (
-                <BaseButtonsForm.Item
-                  name="linkedin"
-                  rules={[
-                    {
-                      pattern: new RegExp(websitePattern),
-                      message: t('profile.nav.personalInfo.notValidWebsite'),
-                    },
-                  ]}
-                >
-                  <OpenURLInput href={linkedin} target="_blank" addonBefore={<LinkedinIcon />} />
-                </BaseButtonsForm.Item>
+                <label>
+                  <BaseButtonsForm.Item
+                    name="linkedin"
+                    rules={[
+                      {
+                        pattern: new RegExp(websitePattern),
+                        message: t('profile.nav.personalInfo.notValidWebsite'),
+                      },
+                    ]}
+                  >
+                    <OpenURLInput href={linkedin} target="_blank" addonBefore={<LinkedinIcon />} />
+                  </BaseButtonsForm.Item>
+                </label>
               );
             }}
           </BaseButtonsForm.Item>
@@ -55,17 +59,20 @@ export const SocialLinksItem: React.FC = () => {
               const facebook = getFieldValue('facebook');
 
               return (
-                <BaseButtonsForm.Item
-                  name="facebook"
-                  rules={[
-                    {
-                      pattern: new RegExp(websitePattern),
-                      message: t('profile.nav.personalInfo.notValidWebsite'),
-                    },
-                  ]}
-                >
-                  <OpenURLInput href={facebook} target="_blank" addonBefore={<FacebookIcon />} />
-                </BaseButtonsForm.Item>
+                <label>
+                  {' '}
+                  <BaseButtonsForm.Item
+                    name="facebook"
+                    rules={[
+                      {
+                        pattern: new RegExp(websitePattern),
+                        message: t('profile.nav.personalInfo.notValidWebsite'),
+                      },
+                    ]}
+                  >
+                    <OpenURLInput href={facebook} target="_blank" addonBefore={<FacebookIcon />} />
+                  </BaseButtonsForm.Item>
+                </label>
               );
             }}
           </BaseButtonsForm.Item>

src/pages/uiComponentsPages/forms/AutoCompletesPage.tsx

@@ -88,26 +88,32 @@ const AutoCompletesPage: React.FC = () => {
   return (
     <Col>
       <S.Card title={t('autoCompletes.basic')}>
-        <AutoComplete
-          options={options}
-          style={{ width: 200 }}
-          onSearch={handleSearch}
-          placeholder={t('autoCompletes.inputHere')}
-        />
+        <label>
+          <AutoComplete
+            options={options}
+            style={{ width: 200 }}
+            onSearch={handleSearch}
+            placeholder={t('autoCompletes.inputHere')}
+          />
+        </label>
       </S.Card>
       <S.Card title={t('autoCompletes.customOptions')}>
-        <AutoComplete style={{ width: 200 }} onSearch={handleCustomSearch} placeholder={t('autoCompletes.inputHere')}>
-          {result.map((email: string) => (
-            <Option key={email} value={email}>
-              {email}
-            </Option>
-          ))}
-        </AutoComplete>
+        <label>
+          <AutoComplete style={{ width: 200 }} onSearch={handleCustomSearch} placeholder={t('autoCompletes.inputHere')}>
+            {result.map((email: string) => (
+              <Option key={email} value={email}>
+                {email}
+              </Option>
+            ))}
+          </AutoComplete>
+        </label>
       </S.Card>
       <S.Card title={t('autoCompletes.categories')}>
-        <AutoComplete dropdownClassName="certain-category-search-dropdown" options={categories}>
-          <SearchInput placeholder={t('autoCompletes.inputHere')} prefix={null} />
-        </AutoComplete>
+        <label>
+          <AutoComplete dropdownClassName="certain-category-search-dropdown" options={categories}>
+            <SearchInput placeholder={t('autoCompletes.inputHere')} prefix={null} />
+          </AutoComplete>
+        </label>
       </S.Card>
     </Col>
   );

src/styles/GlobalStyle.ts

@@ -57,15 +57,12 @@ export default createGlobalStyle`
   }
 
   .ant-picker-cell {
-    color: ${(props) => props.theme.colors.text.superLight};
-
-    &:hover .ant-picker-cell-inner {
-      background: ${(props) => props.theme.colors.main.secondaryBackground} !important;
-    }
+    color: ${(props) => props.theme.colors.text.main};
   }
 
-  .ant-picker-cell-in-view {
+  .ant-picker-cell-in-view .ant-picker-calendar-date-value {
     color: ${(props) => props.theme.colors.text.main};
+    font-weight: ${(props) => props.theme.commonFontWeight.bold};
   }
 
   .ant-picker svg {

src/styles/themes/light/light-variables.less

@@ -4,14 +4,17 @@
 @component-background: #fff;
 @text-color: #404040;
 @border-color-base: #bec0c6;
+@success-color: #076626;
+@warning-color: #ffb155;
+@error-color: #ed0505;
 
 // Disabled state
 @disabled-bg: #c5d3e0;
 
 // Layout
 @layout-body-background: #f0f2f5;
 @layout-header-background: transparent;
-@layout-sider-background: linear-gradient(261.31deg, #006CCF -29.57%, #00509A 121.11%);
+@layout-sider-background: linear-gradient(261.31deg, #006ccf -29.57%, #00509a 121.11%);
 
 // Input
 @input-placeholder-color: #404040;

src/styles/themes/light/lightTheme.ts

@@ -77,10 +77,10 @@ const colors = {
     primary: '#01509A',
     primaryGradient: 'linear-gradient(261.31deg, #006CCF -29.57%, #00509A 121.11%)',
     light: '#C5D3E0',
-    secondary: '#0085FF',
-    error: '#FF5252',
+    secondary: '#0475dd',
+    error: '#ed0505',
     warning: '#FFB155',
-    success: '#57D682',
+    success: '#076626',
     angularGradient:
       'conic-gradient(from -35.18deg at 50% 50%, #006CCF -154.36deg, #FF5252 24.13deg, #FFB155 118.76deg, #006CCF 205.64deg, #FF5252 384.13deg)',
     mainBackground: commonColors.white,