Merge pull request #41 from AplinkosMinisterija/more-accessibility

more accessibility
AplinkosMinisterija · Dec 13, 2024 · 813772f · 813772f
2 parents 32739bf + 8ded518
commit 813772f
Show file tree

Hide file tree

Showing 23 changed files with 178 additions and 546 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "prettier": "@aplinkosministerija/biip-prettier-config",
   "dependencies": {
-    "@aplinkosministerija/design-system": "^1.1.14",
+    "@aplinkosministerija/design-system": "^1.2.0",
     "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.8.1",
     "@sentry/react": "^7.61.0",

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
diff --git a/src/components/containers/FormHistoryContainer.tsx b/src/components/containers/FormHistoryContainer.tsx
@@ -3,10 +3,10 @@ import { useEffect, useRef } from 'react';
 import { useInfiniteQuery } from 'react-query';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { device } from '../../styles';
+import { ButtonVariants, device } from '../../styles';
 import { FormHistory } from '../../types';
 import { intersectionObserverConfig } from '../../utils/configs';
-import { ButtonColors, HistoryTypes } from '../../utils/constants';
+import { HistoryTypes } from '../../utils/constants';
 import { formatDateAndTime } from '../../utils/format';
 import { handleErrorFromServerToast } from '../../utils/functions';
 import { formLabels } from '../../utils/texts';
@@ -20,13 +20,13 @@ interface FormHistoryContainerProps {
   name: string;
 }
 type HistoryContainerColorsType = {
-  [key in HistoryTypes]: ButtonColors | null;
+  [key in HistoryTypes]: ButtonVariants | null;
 };
 
 const historyContainerColors: HistoryContainerColorsType = {
-  [HistoryTypes.APPROVED]: ButtonColors.SUCCESS,
-  [HistoryTypes.RETURNED]: ButtonColors.PRIMARY,
-  [HistoryTypes.REJECTED]: ButtonColors.DANGER,
+  [HistoryTypes.APPROVED]: ButtonVariants.SUCCESS,
+  [HistoryTypes.RETURNED]: ButtonVariants.PRIMARY,
+  [HistoryTypes.REJECTED]: ButtonVariants.DANGER,
   [HistoryTypes.CREATED]: null,
   [HistoryTypes.UPDATED]: null,
   [HistoryTypes.DELETED]: null,
@@ -151,7 +151,7 @@ const Container = styled.div`
   }
 `;
 
-const IMG = styled.img<{ variant: ButtonColors }>`
+const IMG = styled.img<{ variant: ButtonVariants }>`
   width: 16px;
   height: 16px;
   background-color: ${({ theme, variant }) => theme.colors[variant]};

diff --git a/src/components/fields/PhotoUploadField.tsx b/src/components/fields/PhotoUploadField.tsx
@@ -7,9 +7,8 @@ import { inputLabels, validationTexts } from '../../utils/texts';
 import { validateFileTypes } from '../../utils/validation';
 import Icon from '../other/Icons';
 import Loader from '../other/Loader';
-import Modal from '../other/Modal';
 import PhotoField from './PhotoField';
-import { useKeyAction } from '@aplinkosministerija/design-system';
+import { Modal, useKeyAction } from '@aplinkosministerija/design-system';
 
 export interface PhotoUploadFieldProps {
   name: string;

diff --git a/src/components/map/DisplayMap.tsx b/src/components/map/DisplayMap.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@aplinkosministerija/design-system';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useQuery, useQueryClient } from 'react-query';
 import { createSearchParams } from 'react-router-dom';
@@ -7,7 +8,6 @@ import api from '../../api';
 import { device } from '../../styles';
 import { Url } from '../../utils/constants';
 import { handleErrorFromServerToast } from '../../utils/functions';
-import Button from '../buttons/Button';
 import Icon from '../other/Icons';
 import LoaderComponent from '../other/LoaderComponent';
 
@@ -73,7 +73,6 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps
 
   const handleToggle = (e) => {
     e.preventDefault();
-
     setShowModal(!showModal);
   };
 
@@ -99,10 +98,20 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps
 
   return (
     <>
-      {loading ? <LoaderComponent /> : null}
-      <Container showModal={showFullScreen} error={!!error}>
+      {loading && <LoaderComponent />}
+      <Container
+        role={showFullScreen ? 'dialog' : undefined}
+        aria-modal={showFullScreen}
+        showModal={showFullScreen}
+        error={!!error}
+      >
         <InnerContainer showModal={showFullScreen}>
-          <StyledButton popup={showFullScreen} type="button" onClick={handleToggle}>
+          <StyledButton
+            popup={showFullScreen}
+            type="button"
+            onClick={handleToggle}
+            aria-label={showFullScreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+          >
             <StyledIconContainer>
               <StyledIcon name={showFullScreen ? 'exitFullScreen' : 'fullscreen'} />
             </StyledIconContainer>
@@ -113,17 +122,21 @@ const DisplayMap = ({ height, error, places = [], fullScreen = false }: MapProps
             title={'Radaviečių žemėlapis'}
             ref={iframeRef}
             src={fullUrl.toString()}
-            width={'100%'}
+            width="100%"
             height={showFullScreen ? '100%' : `${height || '230px'}`}
             style={{ border: 0 }}
-            allowFullScreen={true}
+            allowFullScreen
             onLoad={handleLoadMap}
             aria-hidden="false"
-            tabIndex={1}
+            tabIndex={0}
           />
         </InnerContainer>
       </Container>
-      {error && <ErrorMessage>{error}</ErrorMessage>}
+      {error && (
+        <ErrorMessage aria-live="assertive" role="alert">
+          {error}
+        </ErrorMessage>
+      )}
     </>
   );
 };