fix accessability issues in color

pages/filters.tsx

@@ -25,9 +25,8 @@ export const getServerSideProps: GetServerSideProps = async ({ query }) => ({
   },
 })
 
-const poiCategoryColorArray: [PoiCategory, string][] = Array.from(
-  POI_CATEGORY_COLOR_MAP
-)
+const poiCategoryColorArray: [PoiCategory, { fill: string; border: string }][] =
+  Array.from(POI_CATEGORY_COLOR_MAP)
 
 const defaultActivePoiIds = Object.values(POI_CATEGORY_ID_MAP)
 
@@ -73,7 +72,7 @@ export const Filters: FC<{
             hasMobileSize ? 'mt-0' : 'mt-4'
           )}
         >
-          {poiCategoryColorArray.map(([category, color]) => {
+          {poiCategoryColorArray.map(([category, { fill, border }]) => {
             const poiId = POI_CATEGORY_ID_MAP[category]
             return (
               <div key={category} className="mt-2 mr-2">
@@ -132,7 +131,7 @@ export const Filters: FC<{
                     )
                   }}
                 >
-                  <PoiLegendItem label={category} color={color} />
+                  <PoiLegendItem label={category} fill={fill} border={border} />
                 </FilterChip>
               </div>
             )

pages/search.tsx

@@ -49,7 +49,7 @@ const SearchSuggestionItem: FC<SearchSuggestionItemPropType> = ({
         'transform -translate-y-2 mr-3'
       )}
       style={{
-        backgroundColor: POI_DATA.fillColorMap.get(properties.category),
+        backgroundColor: POI_DATA.fillColorMap.get(properties.category)?.fill,
       }}
     />
     <div

src/components/MapPointLayer/index.tsx

@@ -7,7 +7,7 @@ export interface MapPointLayerType extends Omit<LayerProps, 'type' | 'paint'> {
     url: SourceProps['url']
     layerName: string
   }
-  fillColorMap: Map<number | string, string>
+  fillColorMap: Map<number | string, { fill: string; border: string }>
   fillColorProperty: string
   activePropertyKeys?: string[]
 }

src/components/PoiLegendItem/PoiLegendItem.tsx

@@ -3,7 +3,7 @@ import { PoiLegendItem } from '.'
 
 describe('PoiLegendItem', () => {
   it('renders a legend item', () => {
-    render(<PoiLegendItem label="some label" color="#ff0000" />)
+    render(<PoiLegendItem label="some label" fill="#ff0000" border="#000000" />)
 
     const label = screen.getByText(/some label/i)
     expect(label).toBeInTheDocument()

src/components/PoiLegendItem/index.tsx

@@ -2,19 +2,22 @@ import { FC, HTMLAttributes } from 'react'
 
 export interface PoiLegendItemType extends HTMLAttributes<HTMLElement> {
   label: string
-  color: string
+  fill: string
+  border: string
 }
 
 export const PoiLegendItem: FC<PoiLegendItemType> = ({
   label,
-  color,
+  fill,
+  border,
   ...otherProps
 }) => {
   return (
     <div className="flex items-center" {...otherProps}>
       <span
-        className="inline-block w-4 h-4 self-baseline rounded-full shadow-md border-4 border-white"
-        style={{ backgroundColor: color }}
+        // here the size of the circle and the border are set
+        className="inline-block w-4 h-4 self-baseline rounded-full shadow-md border-4"
+        style={{ backgroundColor: fill, borderColor: border }}
       ></span>
       <span className="ml-1 text-gray-700 text-sm">{label}</span>
     </div>

src/modules/RefreshmentMap/content.tsx

@@ -169,19 +169,94 @@ export type PoiCategory =
   | 'Toilette'
   | 'Öffentlicher "Kühler Raum"'
 
-export const POI_CATEGORY_COLOR_MAP: Map<PoiCategory, string> = new Map([
-  ['Badestelle', colors['poi-darkblue']],
-  ['Strandbad', colors['poi-darkblue']],
-  ['Freibad', colors['poi-darkblue']],
-  ['Schwimmhalle', colors['poi-darkblue']],
-  ['Wasserspielplatz', colors['poi-pink']],
-  ['Trinkbrunnen', colors['poi-lightblue']],
-  ['Brunnen', colors['poi-turquoise']],
-  ['Gruenanlage', colors['poi-green']],
-  ['Sitzbank', colors['poi-yellow']],
-  ['Picknicktisch', colors['poi-red']],
-  ['Toilette', colors['poi-orange']],
-  ['Öffentlicher "Kühler Raum"', colors['poi-darkgrey']],
+export const POI_CATEGORY_COLOR_MAP: Map<
+  PoiCategory,
+  { fill: string; border: string }
+> = new Map([
+  [
+    'Badestelle',
+    {
+      fill: colors['poi-darkblue'],
+      border: colors['poi-border-darkblue'],
+    },
+  ],
+  [
+    'Strandbad',
+    {
+      fill: colors['poi-darkblue'],
+      border: colors['poi-border-darkblue'],
+    },
+  ],
+  [
+    'Freibad',
+    {
+      fill: colors['poi-darkblue'],
+      border: colors['poi-border-darkblue'],
+    },
+  ],
+  [
+    'Schwimmhalle',
+    {
+      fill: colors['poi-darkblue'],
+      border: colors['poi-border-darkblue'],
+    },
+  ],
+  [
+    'Trinkbrunnen',
+    {
+      fill: colors['poi-lightblue'],
+      border: colors['poi-border-lightblue'],
+    },
+  ],
+  [
+    'Brunnen',
+    {
+      fill: colors['poi-turquoise'],
+      border: colors['poi-border-turquoise'],
+    },
+  ],
+  [
+    'Wasserspielplatz',
+    {
+      fill: colors['poi-pink'],
+      border: colors['poi-border-pink'],
+    },
+  ],
+  [
+    'Gruenanlage',
+    {
+      fill: colors['poi-green'],
+      border: colors['poi-border-green'],
+    },
+  ],
+  [
+    'Sitzbank',
+    {
+      fill: colors['poi-yellow'],
+      border: colors['poi-border-yellow'],
+    },
+  ],
+  [
+    'Picknicktisch',
+    {
+      fill: colors['poi-red'],
+      border: colors['poi-border-red'],
+    },
+  ],
+  [
+    'Toilette',
+    {
+      fill: colors['poi-orange'],
+      border: colors['poi-border-orange'],
+    },
+  ],
+  [
+    'Öffentlicher "Kühler Raum"',
+    {
+      fill: colors['poi-darkgrey'],
+      border: colors['poi-border-darkgrey'],
+    },
+  ],
 ])
 
 type PoiCategoryId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
@@ -203,7 +278,7 @@ export const POI_CATEGORY_ID_MAP: { [key in PoiCategory]: PoiCategoryId } = {
 
 export interface PoiDataType extends MapPointLayerType {
   id: string
-  fillColorMap: Map<PoiCategory, string>
+  fillColorMap: Map<PoiCategory, { fill: string; border: string }>
   activePropertyKeys: Partial<PoiCategory>[]
 }
 

src/style/colors.js

@@ -26,14 +26,23 @@ const colors = {
   'poi-green': '#85B858',
   'poi-darkblue': '#1D80C3',
   'poi-lightblue': '#6CC2EF',
-  'poi-pink': '#DB8DFF',
-  'poi-yellow': '#FED914',
+  'poi-pink': '#B58CFF',
+  'poi-yellow': '#F4CD01',
   'poi-red': '#F63333',
   'poi-orange': '#FFA500',
-  'poi-turquoise': '#83E5E2',
+  'poi-turquoise': '#6BE0DC',
   'night-indicator-sky': '#4F6D95',
   'night-indicator-moon': '#FFFADD',
-  'poi-darkgrey': '#323232',
+  'poi-darkgrey': '#808080',
+  'poi-border-darkblue': '#AEDEFF',
+  'poi-border-lightblue': '#D1EFFF',
+  'poi-border-turquoise': '#CCFFFD',
+  'poi-border-pink': '#E8DBFF',
+  'poi-border-green': '#E4FFCC',
+  'poi-border-yellow': '#FFF2AE',
+  'poi-border-red': '#FFCCCC',
+  'poi-border-orange': '#FFE2AE',
+  'poi-border-darkgrey': '#D6D6D6',
 }
 
 module.exports = colors

test/pages/stories/__snapshots__/search.stories.storyshot

@@ -595,7 +595,7 @@ exports[`Storyshots Pages/Search Default 1`] = `
                   className="rounded-full w-4 h-4 border-4 border-white shadow-md transform -translate-y-2 mr-3"
                   style={
                     Object {
-                      "backgroundColor": "#DB8DFF",
+                      "backgroundColor": "#B58CFF",
                     }
                   }
                 />