From 83dd6e1972259038c609cd1c46f5e9b4b886212f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Tue, 30 Jan 2024 19:03:04 +0100
Subject: [PATCH 01/18] add Tooltip to ChartLegend buttons

---
 packages/react-ui/src/localization/en.js     |  4 +++
 packages/react-ui/src/localization/es.js     |  4 +++
 packages/react-ui/src/localization/id.js     |  4 +++
 packages/react-ui/src/widgets/ChartLegend.js | 28 +++++++++++++++-----
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/react-ui/src/localization/en.js b/packages/react-ui/src/localization/en.js
index 3a9ec15a9..0ab4e6c73 100644
--- a/packages/react-ui/src/localization/en.js
+++ b/packages/react-ui/src/localization/en.js
@@ -79,6 +79,10 @@ const locales = {
         clear: 'Clear',
         selectedItems: '{items, plural, one{# selected} other{# selected}}',
         allSelected: 'All'
+      },
+      chartLegend: {
+        next: 'Next page',
+        prev: 'Previous page'
       }
     }
   }
diff --git a/packages/react-ui/src/localization/es.js b/packages/react-ui/src/localization/es.js
index de111fd05..9ad1e3f64 100644
--- a/packages/react-ui/src/localization/es.js
+++ b/packages/react-ui/src/localization/es.js
@@ -79,6 +79,10 @@ const locales = {
         clear: 'Limpiar',
         selectedItems: '{items, plural, one {# seleccionado} other {# seleccionados}}',
         allSelected: 'Todos seleccionados'
+      },
+      chartLegend: {
+        next: 'Página siguente',
+        prev: 'Página anterior'
       }
     }
   }
diff --git a/packages/react-ui/src/localization/id.js b/packages/react-ui/src/localization/id.js
index 395e5bb11..5235aeb14 100644
--- a/packages/react-ui/src/localization/id.js
+++ b/packages/react-ui/src/localization/id.js
@@ -80,6 +80,10 @@ const locales = {
         clear: 'Bersihkan',
         selectedItems: '{items, plural, one{# terpilih} other{# terpilih}}',
         allSelected: 'Semua terpilih'
+      },
+      chartLegend: {
+        next: 'Next page',
+        prev: 'Previous page'
       }
     }
   }
diff --git a/packages/react-ui/src/widgets/ChartLegend.js b/packages/react-ui/src/widgets/ChartLegend.js
index 129dfa249..2bf433822 100644
--- a/packages/react-ui/src/widgets/ChartLegend.js
+++ b/packages/react-ui/src/widgets/ChartLegend.js
@@ -1,8 +1,11 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Box, styled, IconButton, useTheme } from '@mui/material';
+import { useIntl } from 'react-intl';
+
+import { Box, styled, IconButton, useTheme, Tooltip } from '@mui/material';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
 
 import Typography from '../components/atoms/Typography';
+import useImperativeIntl from '../hooks/useImperativeIntl';
 
 const Legend = styled(Box)(({ theme }) => ({
   position: 'relative',
@@ -68,6 +71,9 @@ export default function ChartLegend({ series, selectedCategories, onCategoryClic
   const containerRef = useRef(null);
   const showMoreButtonsRef = useRef(null);
 
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+
   const handleClickRight = () => {
     setOffset(offset + 1);
   };
@@ -153,12 +159,20 @@ export default function ChartLegend({ series, selectedCategories, onCategoryClic
       {(overflowing || offset > 0) && (
         <ShowMoreButtons ref={showMoreButtonsRef}>
           <OverflowVeil />
-          <IconButton size='small' disabled={offset === 0} onClick={handleClickLeft}>
-            <ChevronLeft />
-          </IconButton>
-          <IconButton size='small' disabled={!overflowing} onClick={handleClickRight}>
-            <ChevronRight />
-          </IconButton>
+          <Tooltip
+            title={intlConfig.formatMessage({ id: 'c4r.widgets.chartLegend.next' })}
+          >
+            <IconButton size='small' disabled={offset === 0} onClick={handleClickLeft}>
+              <ChevronLeft />
+            </IconButton>
+          </Tooltip>
+          <Tooltip
+            title={intlConfig.formatMessage({ id: 'c4r.widgets.chartLegend.prev' })}
+          >
+            <IconButton size='small' disabled={!overflowing} onClick={handleClickRight}>
+              <ChevronRight />
+            </IconButton>
+          </Tooltip>
         </ShowMoreButtons>
       )}
     </Legend>

From b26f230b0d2a5b2f73e396af78a1274fa4beb75c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Fri, 2 Feb 2024 17:54:32 +0100
Subject: [PATCH 02/18] fix interactive elements in PieWidget and TimeSeries

---
 packages/react-ui/src/widgets/ChartLegend.js       | 10 ++++++++++
 .../src/widgets/PieWidgetUI/PieWidgetUI.js         | 12 +++++++++++-
 .../src/widgets/RangeWidgetUI/RangeWidgetUI.js     | 14 +++++++++++++-
 .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js       |  7 +++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/src/widgets/ChartLegend.js b/packages/react-ui/src/widgets/ChartLegend.js
index 2bf433822..e0bffc28f 100644
--- a/packages/react-ui/src/widgets/ChartLegend.js
+++ b/packages/react-ui/src/widgets/ChartLegend.js
@@ -82,6 +82,12 @@ export default function ChartLegend({ series, selectedCategories, onCategoryClic
     setOffset(Math.max(offset - 1));
   };
 
+  const onCategoryPress = (e, categoryName) => {
+    if (e.keyCode === 13) {
+      onCategoryClick(categoryName);
+    }
+  };
+
   const updateMaxWidth = useCallback(() => {
     const overflowing =
       containerRef.current &&
@@ -139,7 +145,11 @@ export default function ChartLegend({ series, selectedCategories, onCategoryClic
           return (
             <Item
               key={i}
+              tabIndex={0}
               onClick={onCategoryClick ? () => onCategoryClick(category.name) : undefined}
+              onKeyDown={
+                onCategoryClick ? (e) => onCategoryPress(e, category.name) : undefined
+              }
               style={{
                 pointerEvents:
                   !onCategoryClick || category.name === 'Others' ? 'none' : undefined
diff --git a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
index db6bc97f8..e07b04491 100644
--- a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
+++ b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
@@ -199,6 +199,11 @@ function PieWidgetUI({
   const handleClearSelectedCategories = () => {
     onSelectedCategoriesChange([]);
   };
+  const handleClearPress = (e) => {
+    if (e.keyCode === 13) {
+      handleClearSelectedCategories();
+    }
+  };
 
   if (showSkeleton) return <PieSkeleton height={height} />;
 
@@ -215,7 +220,12 @@ function PieWidgetUI({
               : intlConfig.formatMessage({ id: 'c4r.widgets.pie.allSelected' })}
           </Typography>
           {selectedCategories.length > 0 && (
-            <Link variant='caption' onClick={handleClearSelectedCategories}>
+            <Link
+              variant='caption'
+              onClick={handleClearSelectedCategories}
+              onKeyDown={handleClearPress}
+              tabIndex={0}
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.pie.clear' })}
             </Link>
           )}
diff --git a/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
index 971476dc6..2535e72d8 100644
--- a/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
+++ b/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
@@ -164,6 +164,12 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange, isLoadin
     changeSliderValues([min, max]);
   };
 
+  const onKeyDownHandler = (e) => {
+    if (e.key === 13) {
+      resetSlider();
+    }
+  };
+
   if (showSkeleton) {
     return <RangeSkeleton />;
   }
@@ -173,7 +179,13 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange, isLoadin
       <ClearWrapper>
         {hasBeenModified && (
           <Typography variant='caption' color='primary'>
-            <ClearButton onClick={resetSlider} underline='hover'>
+            <ClearButton
+              onClick={resetSlider}
+              onKeyDown={onKeyDownHandler}
+              tabIndex={0}
+              component='button'
+              underline='hover'
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.range.clear' })}
             </ClearButton>
           </Typography>
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
index ea3f9b0a9..22491fa9d 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
@@ -304,6 +304,11 @@ function TimeSeriesWidgetUIContent({
     setTimeWindow([]);
     onSelectedCategoriesChange?.([]);
   };
+  const handleClearPress = (e) => {
+    if (e.keyCode === 13) {
+      handleClear();
+    }
+  };
 
   const handleCategoryClick = useCallback(
     (category) => {
@@ -340,6 +345,8 @@ function TimeSeriesWidgetUIContent({
           variant='caption'
           style={{ cursor: 'pointer' }}
           onClick={handleClear}
+          onKeyDown={handleClearPress}
+          tabIndex={0}
           underline='hover'
         >
           {intl.formatMessage({ id: 'c4r.widgets.timeSeries.clear' })}

From cab24cb9cd63737d9ee00d1b5094d9d97bf717f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Mon, 5 Feb 2024 15:21:09 +0100
Subject: [PATCH 03/18] add keyboard support for widgets

---
 .../src/widgets/BarWidgetUI/BarWidgetUI.js    | 12 +++-
 .../CategoryWidgetUI/CategoryWidgetUI.js      | 64 +++++++++++++++++--
 packages/react-ui/src/widgets/ChartLegend.js  |  2 +-
 .../HistogramWidgetUI/HistogramWidgetUI.js    | 13 +++-
 .../src/widgets/PieWidgetUI/PieWidgetUI.js    |  2 +-
 .../widgets/RangeWidgetUI/RangeWidgetUI.js    |  6 +-
 .../TimeSeriesWidgetUI/TimeSeriesWidgetUI.js  |  2 +-
 .../src/hooks/useGeocoderWidgetController.js  |  2 +-
 8 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/packages/react-ui/src/widgets/BarWidgetUI/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI/BarWidgetUI.js
index 0c9e08927..b5523550c 100644
--- a/packages/react-ui/src/widgets/BarWidgetUI/BarWidgetUI.js
+++ b/packages/react-ui/src/widgets/BarWidgetUI/BarWidgetUI.js
@@ -248,6 +248,11 @@ function BarWidgetUI(props) {
       onSelectedBarsChange([], []);
     }
   };
+  const handleClearPress = (e) => {
+    if (e.key === 'Enter') {
+      clearBars();
+    }
+  };
 
   const clickEvent = useCallback(
     (params) => {
@@ -311,7 +316,12 @@ function BarWidgetUI(props) {
               : intlConfig.formatMessage({ id: 'c4r.widgets.bar.all' })}
           </Typography>
           {selectedBars && selectedBars.length > 0 && (
-            <SelectAllButton onClick={() => clearBars()} underline='hover'>
+            <SelectAllButton
+              onClick={() => clearBars()}
+              onKeyDown={handleClearPress}
+              underline='hover'
+              tabIndex={0}
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.bar.clear' })}
             </SelectAllButton>
           )}
diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.js
index 3e74f4bdf..6ccee369c 100644
--- a/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.js
+++ b/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.js
@@ -92,15 +92,30 @@ function CategoryWidgetUI(props) {
   const handleClearClicked = () => {
     props.onSelectedCategoriesChange([]);
   };
+  const handleClearPress = (e) => {
+    if (e.key === 'Enter') {
+      handleClearClicked();
+    }
+  };
 
   const handleUnblockClicked = () => {
     props.onSelectedCategoriesChange([]);
     setBlockedCategories([]);
   };
+  const handleUnblockPress = (e) => {
+    if (e.key === 'Enter') {
+      handleUnblockClicked();
+    }
+  };
 
   const handleBlockClicked = () => {
     setBlockedCategories(sortBlockedSameAsData(selectedCategories));
   };
+  const handleBlockPress = (e) => {
+    if (e.key === 'Enter') {
+      handleBlockClicked();
+    }
+  };
 
   const handleApplyClicked = () => {
     const blockedCategoriesOrdered = sortBlockedSameAsData(tempBlockedCategories);
@@ -111,6 +126,11 @@ function CategoryWidgetUI(props) {
     setShowAll(false);
     setSearchValue('');
   };
+  const handleApplyPress = (e) => {
+    if (e.key === 'Enter') {
+      handleApplyClicked();
+    }
+  };
 
   const handleCancelClicked = () => {
     setSearchValue('');
@@ -303,6 +323,12 @@ function CategoryWidgetUI(props) {
       };
     }, []);
 
+    const handleCategoryPress = (e) => {
+      if (e.key === 'Enter') {
+        onCategoryClick();
+      }
+    };
+
     const unselected =
       !showAll &&
       selectedCategories.length > 0 &&
@@ -313,13 +339,18 @@ function CategoryWidgetUI(props) {
         direction='row'
         spacing={1}
         onClick={filterable ? onCategoryClick : () => {}}
+        onKeyDown={handleCategoryPress}
         selectable={filterable}
         unselected={unselected}
         name={data.name === REST_CATEGORY ? REST_CATEGORY : ''}
+        tabIndex={filterable && showAll ? 0 : -1}
       >
         {filterable && showAll && (
           <Grid item>
-            <Checkbox checked={tempBlockedCategories.indexOf(data.name) !== -1} />
+            <Checkbox
+              checked={tempBlockedCategories.indexOf(data.name) !== -1}
+              tabIndex={-1}
+            />
           </Grid>
         )}
         <Grid container item xs>
@@ -371,21 +402,41 @@ function CategoryWidgetUI(props) {
               : intlConfig.formatMessage({ id: 'c4r.widgets.category.all' })}
           </Typography>
           {showAll ? (
-            <LinkAsButton onClick={handleApplyClicked} underline='hover'>
+            <LinkAsButton
+              onClick={handleApplyClicked}
+              onKeyDown={handleApplyPress}
+              underline='hover'
+              tabIndex={0}
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.category.apply' })}
             </LinkAsButton>
           ) : blockedCategories.length > 0 ? (
-            <LinkAsButton onClick={handleUnblockClicked} underline='hover'>
+            <LinkAsButton
+              onClick={handleUnblockClicked}
+              onKeyDown={handleUnblockPress}
+              underline='hover'
+              tabIndex={0}
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.category.unlock' })}
             </LinkAsButton>
           ) : (
             selectedCategories.length > 0 && (
               <Grid container direction='row' justifyContent='flex-end' item xs>
-                <LinkAsButton onClick={handleBlockClicked} underline='hover'>
+                <LinkAsButton
+                  onClick={handleBlockClicked}
+                  onKeyDown={handleBlockPress}
+                  underline='hover'
+                  tabIndex={0}
+                >
                   {intlConfig.formatMessage({ id: 'c4r.widgets.category.lock' })}
                 </LinkAsButton>
                 <Divider orientation='vertical' flexItem />
-                <LinkAsButton onClick={handleClearClicked} underline='hover'>
+                <LinkAsButton
+                  onClick={handleClearClicked}
+                  onKeyDown={handleClearPress}
+                  underline='hover'
+                  tabIndex={0}
+                >
                   {intlConfig.formatMessage({ id: 'c4r.widgets.category.clear' })}
                 </LinkAsButton>
               </Grid>
@@ -408,6 +459,9 @@ function CategoryWidgetUI(props) {
                 </InputAdornment>
               )
             }}
+            inputProps={{
+              tabIndex: 0
+            }}
           />
         </OptionsSelectedBar>
       )}
diff --git a/packages/react-ui/src/widgets/ChartLegend.js b/packages/react-ui/src/widgets/ChartLegend.js
index e0bffc28f..8179b492e 100644
--- a/packages/react-ui/src/widgets/ChartLegend.js
+++ b/packages/react-ui/src/widgets/ChartLegend.js
@@ -83,7 +83,7 @@ export default function ChartLegend({ series, selectedCategories, onCategoryClic
   };
 
   const onCategoryPress = (e, categoryName) => {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       onCategoryClick(categoryName);
     }
   };
diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
index 3d0bedcd5..114bda1ba 100644
--- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
+++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
@@ -270,6 +270,12 @@ function HistogramWidgetUI({
     0
   );
 
+  const handleClearPress = (e) => {
+    if (e.key === 'Enter') {
+      onSelectedBarsChange([]);
+    }
+  };
+
   if (showSkeleton) return <HistogramSkeleton height={height} />;
 
   return (
@@ -285,7 +291,12 @@ function HistogramWidgetUI({
               : intlConfig.formatMessage({ id: 'c4r.widgets.histogram.all' })}
           </Typography>
           {selectedBars.length > 0 && (
-            <ClearButton onClick={() => onSelectedBarsChange([])} underline='hover'>
+            <ClearButton
+              onClick={() => onSelectedBarsChange([])}
+              onKeyDown={handleClearPress}
+              underline='hover'
+              tabIndex={0}
+            >
               {intlConfig.formatMessage({ id: 'c4r.widgets.histogram.clear' })}
             </ClearButton>
           )}
diff --git a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
index e07b04491..2ba7b0006 100644
--- a/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
+++ b/packages/react-ui/src/widgets/PieWidgetUI/PieWidgetUI.js
@@ -200,7 +200,7 @@ function PieWidgetUI({
     onSelectedCategoriesChange([]);
   };
   const handleClearPress = (e) => {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       handleClearSelectedCategories();
     }
   };
diff --git a/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
index 2535e72d8..e32aa08b1 100644
--- a/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
+++ b/packages/react-ui/src/widgets/RangeWidgetUI/RangeWidgetUI.js
@@ -164,8 +164,8 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange, isLoadin
     changeSliderValues([min, max]);
   };
 
-  const onKeyDownHandler = (e) => {
-    if (e.key === 13) {
+  const handleClearPress = (e) => {
+    if (e.key === 'Enter') {
       resetSlider();
     }
   };
@@ -181,7 +181,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange, isLoadin
           <Typography variant='caption' color='primary'>
             <ClearButton
               onClick={resetSlider}
-              onKeyDown={onKeyDownHandler}
+              onKeyDown={handleClearPress}
               tabIndex={0}
               component='button'
               underline='hover'
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
index 22491fa9d..b899f6bb8 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js
@@ -305,7 +305,7 @@ function TimeSeriesWidgetUIContent({
     onSelectedCategoriesChange?.([]);
   };
   const handleClearPress = (e) => {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       handleClear();
     }
   };
diff --git a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
index 7e24e1b0b..3ad91adbe 100644
--- a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
+++ b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
@@ -43,7 +43,7 @@ export default function useGeocoderWidgetController(props = {}) {
   };
 
   const handleKeyPress = async (e) => {
-    if (e.keyCode === 13) {
+    if (e.key === 'Enter') {
       // Force blur to hide virtual keyboards on mobile and search
       e.target.blur();
     }

From 48af7e7da6a58ed16ede8b938d9d6467ccf63c83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Tue, 6 Feb 2024 14:28:45 +0100
Subject: [PATCH 04/18] focus-visible

---
 .../src/theme/sections/components/dataDisplay.js       |  6 ++++++
 .../react-ui/src/theme/sections/components/forms.js    | 10 ++++++++++
 .../react-ui/src/theme/sections/components/surfaces.js |  3 +++
 packages/react-ui/src/theme/sections/cssBaseline.js    |  6 ++++++
 4 files changed, 25 insertions(+)

diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js
index fcd242e4d..66b9595e0 100644
--- a/packages/react-ui/src/theme/sections/components/dataDisplay.js
+++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js
@@ -59,6 +59,12 @@ export const dataDisplayOverrides = {
               }
             }
           }
+        },
+
+        '& .MuiListItemButton-root': {
+          '&:focus-visible': {
+            backgroundColor: 'transparent'
+          }
         }
       })
     }
diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index e021e262b..6b8eba561 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -194,6 +194,11 @@ export const formsOverrides = {
           },
           '&.Mui-disabled::placeholder': {
             color: theme.palette.text.disabled
+          },
+          // Remove focus on keyboard navigation as the parent element has focus
+          '&:focus-visible': {
+            outline: 'none !important',
+            boxShadow: 'none !important'
           }
         },
 
@@ -332,6 +337,11 @@ export const formsOverrides = {
             },
             '&.Mui-disabled::placeholder': {
               color: theme.palette.text.disabled
+            },
+            // Remove focus on keyboard navigation as the parent element has focus
+            '&:focus-visible': {
+              outline: 'none !important',
+              boxShadow: 'none !important'
             }
           },
 
diff --git a/packages/react-ui/src/theme/sections/components/surfaces.js b/packages/react-ui/src/theme/sections/components/surfaces.js
index 1d94adb19..423636b9f 100644
--- a/packages/react-ui/src/theme/sections/components/surfaces.js
+++ b/packages/react-ui/src/theme/sections/components/surfaces.js
@@ -65,6 +65,9 @@ export const surfacesOverrides = {
         '&.Mui-disabled': {
           opacity: 1,
           color: theme.palette.text.disabled
+        },
+        '&.Mui-focusVisible': {
+          backgroundColor: 'transparent'
         }
       }),
       expandIconWrapper: ({ theme }) => ({
diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js
index 1f90ce66b..9e6af3681 100644
--- a/packages/react-ui/src/theme/sections/cssBaseline.js
+++ b/packages/react-ui/src/theme/sections/cssBaseline.js
@@ -3,6 +3,12 @@ import { commonPalette } from './palette';
 import { themeTypography } from './typography';
 
 export const CssBaseline = {
+  // Accessibility focus (keyboard only)
+  '*:focus-visible': {
+    outline: `2px solid ${commonPalette.primary.main} !important`,
+    boxShadow: `0 0 0 4px ${commonPalette.primary.background} !important`
+  },
+
   // Custom scrollbars
   '*::-webkit-scrollbar': {
     position: 'fixed'

From d22d48b3280e2a3d60c06f2f26984ad3e025615b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Tue, 6 Feb 2024 18:55:24 +0100
Subject: [PATCH 05/18] add cursor not-allowed to disabled form elements

---
 packages/react-ui/src/theme/sections/components/forms.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index 6b8eba561..24cac0356 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -202,6 +202,14 @@ export const formsOverrides = {
           }
         },
 
+        '&.Mui-disabled': {
+          cursor: 'not-allowed',
+
+          '& .Mui-disabled': {
+            cursor: 'not-allowed'
+          }
+        },
+
         '&.MuiInputBase-formControl::after': {
           top: 0,
           transform: 'none',

From 05f56d19caf901f8fd90311c7d065f36cfb5a950 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Wed, 7 Feb 2024 16:51:21 +0100
Subject: [PATCH 06/18] wrapper widget ui and appbar

---
 packages/react-ui/src/widgets/WrapperWidgetUI.js            | 4 +++-
 .../react-ui/storybook/stories/organisms/AppBar.stories.js  | 6 +++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
index 2d2673901..1ed76968c 100644
--- a/packages/react-ui/src/widgets/WrapperWidgetUI.js
+++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -69,7 +69,8 @@ const HeaderButton = styled(Button, {
   alignItems: 'flex-start',
   justifyContent: 'flex-start',
   height: 'auto',
-  minHeight: theme.spacing(4),
+  minHeight: 'auto',
+  marginBottom: theme.spacing(1),
   cursor: expandable ? 'pointer' : 'default',
 
   '& .MuiButton-startIcon': {
@@ -198,6 +199,7 @@ function WrapperWidgetUI(props) {
             props.expandable && <Icon>{expanded ? <HideButton /> : <ShowButton />}</Icon>
           }
           onClick={handleExpandClick}
+          tabIndex={props.expandable ? 0 : -1}
         >
           <Tooltip title={props.title}>
             <Text expanded={props.expanded} align='left' variant='subtitle1'>
diff --git a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
index a679c32d1..de1caa950 100644
--- a/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
+++ b/packages/react-ui/storybook/stories/organisms/AppBar.stories.js
@@ -157,7 +157,11 @@ const commonArgs = {
   brandText: 'CARTO',
   secondaryText: 'Some text',
   showBurgerMenu: true,
-  brandLogo: <img src='/carto-logo.svg' alt='' />
+  brandLogo: (
+    <a href='/'>
+      <img src='/carto-logo.svg' alt='' />
+    </a>
+  )
 };
 export const Basic = Template.bind({});
 Basic.args = { ...commonArgs };

From 0808569a161f93385e86d5e704de3f9b847b7774 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Wed, 7 Feb 2024 18:25:45 +0100
Subject: [PATCH 07/18] fix tabs and chart legend

---
 .../react-ui/src/theme/sections/components/navigation.js     | 4 ++++
 packages/react-ui/src/widgets/ChartLegend.js                 | 5 ++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
index 0365dddcb..04cdd25db 100644
--- a/packages/react-ui/src/theme/sections/components/navigation.js
+++ b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -107,6 +107,10 @@ export const navigationOverrides = {
         '&:hover': {
           borderBottomColor: theme.palette.text.primary
         },
+        '&:focus-visible': {
+          outline: `none !important`,
+          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`
+        },
         '&.Mui-selected': {
           pointerEvents: 'none',
 
diff --git a/packages/react-ui/src/widgets/ChartLegend.js b/packages/react-ui/src/widgets/ChartLegend.js
index 8179b492e..a0598c7a4 100644
--- a/packages/react-ui/src/widgets/ChartLegend.js
+++ b/packages/react-ui/src/widgets/ChartLegend.js
@@ -18,7 +18,10 @@ const ItemsContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
   overflowX: 'hidden',
-  gap: theme.spacing(2)
+  gap: theme.spacing(2),
+  // Accessibility tweak to display focus indicator properly
+  padding: theme.spacing(0.5),
+  margin: theme.spacing(-0.5)
 }));
 
 const Item = styled(Box)(({ theme }) => ({

From 2fbca50973351d16b908ad1a3d86c77df3e7693d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Thu, 8 Feb 2024 09:55:01 +0100
Subject: [PATCH 08/18] changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7fe13794b..6d1bd9402 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Keyboard accessibility improvements in Widgets and DS components [#835](https://github.com/CartoDB/carto-react/pull/835)
+
 ## 2.3
 
 ### 2.3.10 (2024-01-31)

From 9942b0c1f939f25a0722a4993d0926d637de5a62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Thu, 8 Feb 2024 11:39:44 +0100
Subject: [PATCH 09/18] Design QA

---
 .../src/theme/sections/components/forms.js    |  6 ++
 .../theme/sections/components/navigation.js   |  8 +-
 .../src/theme/sections/components/surfaces.js |  3 +-
 .../src/theme/sections/cssBaseline.js         |  3 +-
 .../stories/organisms/Menu.stories.js         | 95 +++++++++++++++++--
 5 files changed, 105 insertions(+), 10 deletions(-)

diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index 24cac0356..4f7ac95a7 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -531,6 +531,12 @@ export const formsOverrides = {
         '&:focus': {
           background: 'transparent'
         },
+        // Remove focus on keyboard navigation as the parent element has focus
+        '&:focus-visible': {
+          outline: 'none !important',
+          boxShadow: 'none !important'
+        },
+
         '& .MuiTypography-root': {
           whiteSpace: 'nowrap',
           overflow: 'hidden',
diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
index 04cdd25db..702fb1edd 100644
--- a/packages/react-ui/src/theme/sections/components/navigation.js
+++ b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -1,7 +1,7 @@
 import { ICON_SIZE_MEDIUM } from '../../themeConstants';
 
 export const navigationOverrides = {
-  // Menu
+  // Menu Item
   MuiMenuItem: {
     styleOverrides: {
       root: ({ theme }) => ({
@@ -19,6 +19,9 @@ export const navigationOverrides = {
         '&:focus-visible': {
           // Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747
           backgroundColor: 'transparent',
+          outline: `none !important`,
+          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`,
+          borderRadius: theme.shape.borderRadius,
 
           '&:hover': {
             backgroundColor: theme.palette.action.hover
@@ -109,7 +112,8 @@ export const navigationOverrides = {
         },
         '&:focus-visible': {
           outline: `none !important`,
-          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`
+          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`,
+          borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`
         },
         '&.Mui-selected': {
           pointerEvents: 'none',
diff --git a/packages/react-ui/src/theme/sections/components/surfaces.js b/packages/react-ui/src/theme/sections/components/surfaces.js
index 423636b9f..dc5d0a9ba 100644
--- a/packages/react-ui/src/theme/sections/components/surfaces.js
+++ b/packages/react-ui/src/theme/sections/components/surfaces.js
@@ -67,7 +67,8 @@ export const surfacesOverrides = {
           color: theme.palette.text.disabled
         },
         '&.Mui-focusVisible': {
-          backgroundColor: 'transparent'
+          backgroundColor: 'transparent',
+          borderRadius: theme.shape.borderRadius
         }
       }),
       expandIconWrapper: ({ theme }) => ({
diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js
index 9e6af3681..81156e10e 100644
--- a/packages/react-ui/src/theme/sections/cssBaseline.js
+++ b/packages/react-ui/src/theme/sections/cssBaseline.js
@@ -6,7 +6,8 @@ export const CssBaseline = {
   // Accessibility focus (keyboard only)
   '*:focus-visible': {
     outline: `2px solid ${commonPalette.primary.main} !important`,
-    boxShadow: `0 0 0 4px ${commonPalette.primary.background} !important`
+    boxShadow: `0 0 0 4px ${commonPalette.primary.background} !important`,
+    borderRadius: '4px'
   },
 
   // Custom scrollbars
diff --git a/packages/react-ui/storybook/stories/organisms/Menu.stories.js b/packages/react-ui/storybook/stories/organisms/Menu.stories.js
index 53f82dda6..17917c03d 100644
--- a/packages/react-ui/storybook/stories/organisms/Menu.stories.js
+++ b/packages/react-ui/storybook/stories/organisms/Menu.stories.js
@@ -1,5 +1,13 @@
-import React from 'react';
-import { Divider, ListItemIcon, ListItemText, MenuItem, MenuList } from '@mui/material';
+import React, { useState } from 'react';
+import {
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  MenuList,
+  Menu,
+  Box
+} from '@mui/material';
 import {
   CloudOutlined,
   ContentCopyOutlined,
@@ -38,7 +46,79 @@ const options = {
 };
 export default options;
 
-const Template = ({ label, ...args }) => {
+const TemplateMenu = ({ label, ...args }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const open = Boolean(anchorEl);
+
+  const openDropdown = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const closeDropdown = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Box pb={12}>
+      <Button
+        variant='outlined'
+        id='menu-button'
+        aria-controls='menu'
+        aria-haspopup='true'
+        aria-expanded={open ? 'true' : undefined}
+        onClick={openDropdown}
+        isOpen={open}
+      >
+        Open menu
+      </Button>
+      <Menu
+        {...args}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={closeDropdown}
+        id='menu'
+        MenuListProps={{ 'aria-labelledby': 'menu-button' }}
+      >
+        <MenuItem>
+          <ListItemIcon>
+            <ContentCutOutlined />
+          </ListItemIcon>
+          <ListItemText>{label}</ListItemText>
+          <Typography variant='body2' color='text.secondary'>
+            ⌘X
+          </Typography>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <ContentCopyOutlined />
+          </ListItemIcon>
+          <ListItemText>{label}</ListItemText>
+          <Typography variant='body2' color='text.secondary'>
+            ⌘C
+          </Typography>
+        </MenuItem>
+        <MenuItem>
+          <ListItemIcon>
+            <ContentPasteOutlined />
+          </ListItemIcon>
+          <ListItemText>{label}</ListItemText>
+          <Typography variant='body2' color='text.secondary'>
+            ⌘V
+          </Typography>
+        </MenuItem>
+        <Divider />
+        <MenuItem>
+          <ListItemIcon>
+            <CloudOutlined />
+          </ListItemIcon>
+          <ListItemText>{label}</ListItemText>
+        </MenuItem>
+      </Menu>
+    </Box>
+  );
+};
+const TemplateMenuList = ({ label, ...args }) => {
   return (
     <MenuList {...args}>
       <MenuItem>
@@ -105,7 +185,10 @@ const DocTemplate = () => {
 
 const commonArgs = { label: 'Label', dense: false };
 
-export const Playground = Template.bind({});
-Playground.args = { ...commonArgs };
-
 export const Guide = DocTemplate.bind({});
+
+export const MenuWrapper = TemplateMenu.bind({});
+MenuWrapper.args = { ...commonArgs };
+
+export const MenuListWrapper = TemplateMenuList.bind({});
+MenuListWrapper.args = { ...commonArgs };

From 780c773fa028e5809a2331005db99cb8033f1d1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Thu, 8 Feb 2024 14:01:14 +0100
Subject: [PATCH 10/18] fix focus in FeatureSelectionUIGeometryChips

---
 .../FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips.js
index 23ded43c0..c2b3de9b3 100644
--- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips.js
+++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI/FeatureSelectionUIGeometryChips.js
@@ -9,7 +9,7 @@ const ChipList = styled(List)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   marginLeft: theme.spacing(1.5),
-  padding: 0,
+  padding: theme.spacing(0.5),
   overflowX: 'auto',
   maxWidth: '100%',
   scrollbarWidth: 'none',

From 0aeecdf38cd8e1c5369858e612060c2c64677bd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Thu, 8 Feb 2024 16:42:39 +0100
Subject: [PATCH 11/18] PoC for skip navigation in widgets

---
 packages/react-ui/src/localization/en.js      |  3 +-
 packages/react-ui/src/localization/es.js      |  3 +-
 packages/react-ui/src/localization/id.js      |  3 +-
 .../react-ui/src/widgets/WrapperWidgetUI.js   | 38 ++++++++++++-
 .../widgetsUI/WrapperWidgetUI.stories.js      | 57 ++++++++++---------
 .../src/hooks/useGeocoderWidgetController.js  |  2 +-
 6 files changed, 75 insertions(+), 31 deletions(-)

diff --git a/packages/react-ui/src/localization/en.js b/packages/react-ui/src/localization/en.js
index 0ab4e6c73..9823f58ee 100644
--- a/packages/react-ui/src/localization/en.js
+++ b/packages/react-ui/src/localization/en.js
@@ -83,7 +83,8 @@ const locales = {
       chartLegend: {
         next: 'Next page',
         prev: 'Previous page'
-      }
+      },
+      skip: 'Skip to next widget'
     }
   }
 };
diff --git a/packages/react-ui/src/localization/es.js b/packages/react-ui/src/localization/es.js
index 9ad1e3f64..6b545106e 100644
--- a/packages/react-ui/src/localization/es.js
+++ b/packages/react-ui/src/localization/es.js
@@ -83,7 +83,8 @@ const locales = {
       chartLegend: {
         next: 'Página siguente',
         prev: 'Página anterior'
-      }
+      },
+      skip: 'Saltar al siguiente widget'
     }
   }
 };
diff --git a/packages/react-ui/src/localization/id.js b/packages/react-ui/src/localization/id.js
index 5235aeb14..bd7a1f742 100644
--- a/packages/react-ui/src/localization/id.js
+++ b/packages/react-ui/src/localization/id.js
@@ -84,7 +84,8 @@ const locales = {
       chartLegend: {
         next: 'Next page',
         prev: 'Previous page'
-      }
+      },
+      skip: 'Skip to next widget'
     }
   }
 };
diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
index 1ed76968c..08e239e12 100644
--- a/packages/react-ui/src/widgets/WrapperWidgetUI.js
+++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -8,12 +8,16 @@ import {
   Icon,
   IconButton,
   LinearProgress,
+  Link,
   Menu,
   MenuItem,
   Tooltip,
   styled
 } from '@mui/material';
 import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material';
+import { useIntl } from 'react-intl';
+import useImperativeIntl from '../hooks/useImperativeIntl';
+import uniqueId from 'lodash/uniqueId';
 import Typography from '../components/atoms/Typography';
 
 /*
@@ -131,9 +135,25 @@ const PaperMenu = styled(Menu)(({ theme }) => ({
   }
 }));
 
+const AccessibleLink = styled(Link)(({ theme }) => ({
+  position: 'absolute',
+  left: '-999px',
+  width: '1px',
+  height: '1px',
+
+  '&:focus-visible': {
+    position: 'static',
+    width: 'auto',
+    height: 'auto'
+  }
+}));
+
 function WrapperWidgetUI(props) {
   const wrapper = createRef();
 
+  const intl = useIntl();
+  const intlConfig = useImperativeIntl(intl);
+
   const [expandedInt, setExpandedInt] = useState(true);
   const externalExpanded =
     typeof props.expanded === 'boolean' && typeof props.onExpandedChange === 'function';
@@ -150,6 +170,9 @@ function WrapperWidgetUI(props) {
     optionsIcon = <MoreVert />
   } = props;
 
+  // Accessibility attributes
+  const [id] = useState(uniqueId());
+
   const handleExpandClick = () => {
     if (props.expandable) {
       setExpanded(!expanded);
@@ -190,8 +213,20 @@ function WrapperWidgetUI(props) {
   }
 
   return (
-    <Root margin={props.margin} component='section' aria-label={props.title}>
+    <Root
+      margin={props.margin}
+      component='section'
+      aria-label={props.title}
+      role='section'
+    >
       {props.isLoading ? <LoadingBar /> : null}
+
+      <AccessibleLink href={`#${Number(id) + 1}`} id={id} variant='caption'>
+        {intlConfig.formatMessage({
+          id: `c4r.widgets.skip`
+        })}
+      </AccessibleLink>
+
       <Header container expanded={props.expanded}>
         <HeaderButton
           expandable={props.expandable}
@@ -267,6 +302,7 @@ function WrapperWidgetUI(props) {
           )}
         </HeaderItems>
       </Header>
+
       {/* TODO: check collapse error */}
       <Collapse ref={wrapper} in={expanded} timeout='auto' unmountOnExit>
         <Box {...props.contentProps}>
diff --git a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js
index 3bcd918a3..c1e00b6cf 100644
--- a/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js
+++ b/packages/react-ui/storybook/stories/widgetsUI/WrapperWidgetUI.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlProvider } from 'react-intl';
 import ColorizeIcon from '@mui/icons-material/Colorize';
 import MenuIcon from '@mui/icons-material/Menu';
 import AddLocationIcon from '@mui/icons-material/AddLocation';
@@ -31,14 +32,16 @@ const options = {
 export default options;
 
 const Template = (args) => (
-  <WrapperWidgetUI {...args}>
-    <div>Your Content</div>
-  </WrapperWidgetUI>
+  <IntlProvider locale='en'>
+    <WrapperWidgetUI {...args}>
+      <div>Your Content</div>
+    </WrapperWidgetUI>
+  </IntlProvider>
 );
 
 const ResponsiveTemplate = (args) => {
   return (
-    <>
+    <IntlProvider locale='en'>
       <Label variant='body1' mb={3}>
         {'Limited width'}
       </Label>
@@ -54,7 +57,7 @@ const ResponsiveTemplate = (args) => {
       <WrapperWidgetUI {...args}>
         <div>Your Content</div>
       </WrapperWidgetUI>
-    </>
+    </IntlProvider>
   );
 };
 
@@ -192,27 +195,29 @@ WithActionsTooltip.args = {
 };
 
 export const BigScrollableContent = (args) => (
-  <WrapperWidgetUI {...args}>
-    <div>
-      <p>
-        Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam, mi nibh
-        fames rhoncus id ultricies. Faucibus enim commodo morbi amet sit eget. Ut
-        pellentesque tellus iaculis diam. Ornare convallis dictum purus quisque nisl.
-      </p>
-      <p>
-        Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
-        tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
-        Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
-        eget accumsan sem. Aliquam tincidunt turpis et leo ac.
-      </p>
-      <p>
-        Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
-        tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
-        Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
-        eget accumsan sem. Aliquam tincidunt turpis et leo ac.
-      </p>
-    </div>
-  </WrapperWidgetUI>
+  <IntlProvider locale='en'>
+    <WrapperWidgetUI {...args}>
+      <div>
+        <p>
+          Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam, mi nibh
+          fames rhoncus id ultricies. Faucibus enim commodo morbi amet sit eget. Ut
+          pellentesque tellus iaculis diam. Ornare convallis dictum purus quisque nisl.
+        </p>
+        <p>
+          Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
+          tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
+          Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
+          eget accumsan sem. Aliquam tincidunt turpis et leo ac.
+        </p>
+        <p>
+          Vivamus imperdiet, urna eu blandit lobortis, tortor risus sodales urna, sit amet
+          tempor eros elit faucibus nulla. Donec vel tellus nec nibh molestie hendrerit.
+          Donec nulla massa, interdum ut nisl non, sollicitudin condimentum leo. Integer
+          eget accumsan sem. Aliquam tincidunt turpis et leo ac.
+        </p>
+      </div>
+    </WrapperWidgetUI>
+  </IntlProvider>
 );
 BigScrollableContent.args = {
   title: 'Big scrollable content',
diff --git a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
index 3ad91adbe..7e24e1b0b 100644
--- a/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
+++ b/packages/react-widgets/src/hooks/useGeocoderWidgetController.js
@@ -43,7 +43,7 @@ export default function useGeocoderWidgetController(props = {}) {
   };
 
   const handleKeyPress = async (e) => {
-    if (e.key === 'Enter') {
+    if (e.keyCode === 13) {
       // Force blur to hide virtual keyboards on mobile and search
       e.target.blur();
     }

From 7e6c1e2026780063e95f41322b3b667187a789ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Thu, 8 Feb 2024 17:24:10 +0100
Subject: [PATCH 12/18] rollback wrapperwidgetui links

---
 packages/react-ui/src/localization/en.js      |  3 +-
 packages/react-ui/src/localization/es.js      |  3 +-
 packages/react-ui/src/localization/id.js      |  3 +-
 .../react-ui/src/widgets/WrapperWidgetUI.js   | 29 -------------------
 4 files changed, 3 insertions(+), 35 deletions(-)

diff --git a/packages/react-ui/src/localization/en.js b/packages/react-ui/src/localization/en.js
index 9823f58ee..0ab4e6c73 100644
--- a/packages/react-ui/src/localization/en.js
+++ b/packages/react-ui/src/localization/en.js
@@ -83,8 +83,7 @@ const locales = {
       chartLegend: {
         next: 'Next page',
         prev: 'Previous page'
-      },
-      skip: 'Skip to next widget'
+      }
     }
   }
 };
diff --git a/packages/react-ui/src/localization/es.js b/packages/react-ui/src/localization/es.js
index 6b545106e..9ad1e3f64 100644
--- a/packages/react-ui/src/localization/es.js
+++ b/packages/react-ui/src/localization/es.js
@@ -83,8 +83,7 @@ const locales = {
       chartLegend: {
         next: 'Página siguente',
         prev: 'Página anterior'
-      },
-      skip: 'Saltar al siguiente widget'
+      }
     }
   }
 };
diff --git a/packages/react-ui/src/localization/id.js b/packages/react-ui/src/localization/id.js
index bd7a1f742..5235aeb14 100644
--- a/packages/react-ui/src/localization/id.js
+++ b/packages/react-ui/src/localization/id.js
@@ -84,8 +84,7 @@ const locales = {
       chartLegend: {
         next: 'Next page',
         prev: 'Previous page'
-      },
-      skip: 'Skip to next widget'
+      }
     }
   }
 };
diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
index 08e239e12..f7c95e6ca 100644
--- a/packages/react-ui/src/widgets/WrapperWidgetUI.js
+++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -8,16 +8,12 @@ import {
   Icon,
   IconButton,
   LinearProgress,
-  Link,
   Menu,
   MenuItem,
   Tooltip,
   styled
 } from '@mui/material';
 import { ExpandLess, ExpandMore, MoreVert } from '@mui/icons-material';
-import { useIntl } from 'react-intl';
-import useImperativeIntl from '../hooks/useImperativeIntl';
-import uniqueId from 'lodash/uniqueId';
 import Typography from '../components/atoms/Typography';
 
 /*
@@ -135,25 +131,9 @@ const PaperMenu = styled(Menu)(({ theme }) => ({
   }
 }));
 
-const AccessibleLink = styled(Link)(({ theme }) => ({
-  position: 'absolute',
-  left: '-999px',
-  width: '1px',
-  height: '1px',
-
-  '&:focus-visible': {
-    position: 'static',
-    width: 'auto',
-    height: 'auto'
-  }
-}));
-
 function WrapperWidgetUI(props) {
   const wrapper = createRef();
 
-  const intl = useIntl();
-  const intlConfig = useImperativeIntl(intl);
-
   const [expandedInt, setExpandedInt] = useState(true);
   const externalExpanded =
     typeof props.expanded === 'boolean' && typeof props.onExpandedChange === 'function';
@@ -170,9 +150,6 @@ function WrapperWidgetUI(props) {
     optionsIcon = <MoreVert />
   } = props;
 
-  // Accessibility attributes
-  const [id] = useState(uniqueId());
-
   const handleExpandClick = () => {
     if (props.expandable) {
       setExpanded(!expanded);
@@ -221,12 +198,6 @@ function WrapperWidgetUI(props) {
     >
       {props.isLoading ? <LoadingBar /> : null}
 
-      <AccessibleLink href={`#${Number(id) + 1}`} id={id} variant='caption'>
-        {intlConfig.formatMessage({
-          id: `c4r.widgets.skip`
-        })}
-      </AccessibleLink>
-
       <Header container expanded={props.expanded}>
         <HeaderButton
           expandable={props.expandable}

From e18fd33c8527770f2212c29de4383dec8087dc82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Fri, 9 Feb 2024 10:16:45 +0100
Subject: [PATCH 13/18] cleanup

---
 packages/react-ui/src/widgets/WrapperWidgetUI.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
index f7c95e6ca..bd4b0b159 100644
--- a/packages/react-ui/src/widgets/WrapperWidgetUI.js
+++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -190,12 +190,7 @@ function WrapperWidgetUI(props) {
   }
 
   return (
-    <Root
-      margin={props.margin}
-      component='section'
-      aria-label={props.title}
-      role='section'
-    >
+    <Root margin={props.margin} component='section' aria-label={props.title}>
       {props.isLoading ? <LoadingBar /> : null}
 
       <Header container expanded={props.expanded}>

From 8c9158439052d7056db931621889070143bfa57e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Fri, 9 Feb 2024 10:18:32 +0100
Subject: [PATCH 14/18] cleanup

---
 packages/react-ui/src/widgets/WrapperWidgetUI.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
index bd4b0b159..06ef08bce 100644
--- a/packages/react-ui/src/widgets/WrapperWidgetUI.js
+++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -192,7 +192,6 @@ function WrapperWidgetUI(props) {
   return (
     <Root margin={props.margin} component='section' aria-label={props.title}>
       {props.isLoading ? <LoadingBar /> : null}
-
       <Header container expanded={props.expanded}>
         <HeaderButton
           expandable={props.expandable}

From 9e994b63d9973fc1702cf2ab88c1febf4b990faf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Fri, 9 Feb 2024 12:26:00 +0100
Subject: [PATCH 15/18] adapt autocomplete arrow

---
 packages/react-ui/src/theme/sections/components/forms.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index 4f7ac95a7..d45b00e28 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -556,13 +556,10 @@ export const formsOverrides = {
       size: 'small',
       fullWidth: true,
       popupIcon: <ArrowDropIcon />,
-      clearIcon: <CancelIcon />,
+      clearIcon: <CancelIcon date-testid='cancel-icon-autocomplete' />,
       ChipProps: { color: 'default' },
       limitTags: 1,
       componentsProps: {
-        popupIndicator: {
-          disabled: true
-        },
         paper: {
           elevation: 8
         }
@@ -655,7 +652,11 @@ export const formsOverrides = {
       popupIndicator: ({ theme }) => ({
         width: ICON_SIZE_MEDIUM,
         height: ICON_SIZE_MEDIUM,
+        cursor: 'text',
 
+        '&:hover': {
+          backgroundColor: 'transparent'
+        },
         '&.MuiButtonBase-root': {
           color: theme.palette.text.secondary
         },

From 95233d73fecb6fb7079ee38fb973b120315050ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Mon, 12 Feb 2024 13:40:07 +0100
Subject: [PATCH 16/18] fix typo

---
 packages/react-ui/src/theme/sections/components/forms.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
index d45b00e28..26e909c48 100644
--- a/packages/react-ui/src/theme/sections/components/forms.js
+++ b/packages/react-ui/src/theme/sections/components/forms.js
@@ -556,7 +556,7 @@ export const formsOverrides = {
       size: 'small',
       fullWidth: true,
       popupIcon: <ArrowDropIcon />,
-      clearIcon: <CancelIcon date-testid='cancel-icon-autocomplete' />,
+      clearIcon: <CancelIcon data-testid='cancel-icon-autocomplete' />,
       ChipProps: { color: 'default' },
       limitTags: 1,
       componentsProps: {

From d696ff94b38e05d0ffbe563d924497d5a3d97388 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Mon, 12 Feb 2024 15:53:15 +0100
Subject: [PATCH 17/18] CR minor typos

---
 packages/react-ui/src/localization/es.js                      | 2 +-
 packages/react-ui/src/theme/sections/components/navigation.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-ui/src/localization/es.js b/packages/react-ui/src/localization/es.js
index 9ad1e3f64..7168d0df7 100644
--- a/packages/react-ui/src/localization/es.js
+++ b/packages/react-ui/src/localization/es.js
@@ -81,7 +81,7 @@ const locales = {
         allSelected: 'Todos seleccionados'
       },
       chartLegend: {
-        next: 'Página siguente',
+        next: 'Página siguiente',
         prev: 'Página anterior'
       }
     }
diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
index 702fb1edd..09b3a6a63 100644
--- a/packages/react-ui/src/theme/sections/components/navigation.js
+++ b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -20,7 +20,7 @@ export const navigationOverrides = {
           // Solves a known Mui issue: https://github.com/mui/material-ui/issues/23747
           backgroundColor: 'transparent',
           outline: `none !important`,
-          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`,
+          boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main} !important`,
           borderRadius: theme.shape.borderRadius,
 
           '&:hover': {
@@ -112,7 +112,7 @@ export const navigationOverrides = {
         },
         '&:focus-visible': {
           outline: `none !important`,
-          boxShadow: ` inset 0 0 0 2px ${theme.palette.primary.main} !important`,
+          boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main} !important`,
           borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0 0`
         },
         '&.Mui-selected': {

From f73ca81afc47376e5a459c8e72a8585e497c603c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Tue, 13 Feb 2024 11:12:01 +0100
Subject: [PATCH 18/18] fix focus styles in category widget

---
 .../src/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.js   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.js b/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.js
index 4a11a9908..68a01494a 100644
--- a/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.js
+++ b/packages/react-ui/src/widgets/CategoryWidgetUI/CategoryWidgetUI.styled.js
@@ -28,6 +28,10 @@ export const CategoryItemGroup = styled(Grid, {
 
         '&:hover .progressbar div': {
           backgroundColor: theme.palette.secondary.dark
+        },
+        '&:focus-visible': {
+          outline: `none !important`,
+          boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main} !important`
         }
       }),
     ...(name === REST_CATEGORY && {