fix: key warnings and focus trap error (#6)

* fix: key warnings and focus trap error
gravity-ui · Jan 11, 2024 · 3f77648 · 3f77648
1 parent ef8f3e6
commit 3f77648
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/components/Navigation/__stories__/data.json b/src/components/Navigation/__stories__/data.json
@@ -65,28 +65,28 @@
                           "color": "blue"
                         },
                         "url": "#group_1_item_1",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
                         "slug": "item_2",
                         "title": "Group 1 Item 2",
                         "url": "#group_1_item_2",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
                         "slug": "item_3",
                         "title": "Group 1 Item 3",
                         "url": "#group_1_item_3",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
                         "slug": "item_4",
                         "title": "Group 1 Item 4",
                         "url": "#group_1_item_4",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
@@ -97,7 +97,7 @@
                           "color": "blue"
                         },
                         "url": "#group_1_item_5",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       }
                     ]
@@ -145,21 +145,21 @@
                           "color": "blue"
                         },
                         "url": "#group_1_item_1",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
                         "slug": "item_2",
                         "title": "Group 1 Item 2",
                         "url": "#group_1_item_2",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       },
                       {
                         "slug": "item_3",
                         "title": "Group 1 Item 3",
                         "url": "#group_1_item_3",
-                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
+                        "icon": "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'><g clipPath='url(#a)'><path fill='currentColor' fillRule='evenodd' d='M5.865.031a.75.75 0 0 1 .918.53l.531 1.981a5.554 5.554 0 0 1 2.384.225 2.5 2.5 0 1 1 3.535 3.535 5.496 5.496 0 0 1 .225 2.384l1.98.53a.75.75 0 0 1-.388 1.45l-1.98-.53a5.49 5.49 0 0 1-.687 1.187l1.45 1.45a.75.75 0 0 1-1.06 1.06l-1.45-1.45a5.493 5.493 0 0 1-1.188.687l.53 1.98a.75.75 0 1 1-1.448.388l-.531-1.98a5.5 5.5 0 0 1-6.144-6.143l-1.98-.532A.75.75 0 0 1 .95 5.334l1.98.531c.18-.426.411-.824.687-1.188l-1.45-1.45a.75.75 0 1 1 1.06-1.06l1.45 1.45a5.494 5.494 0 0 1 1.188-.687L5.335.95a.75.75 0 0 1 .53-.919ZM8 12a4 4 0 1 0-3.309-1.752L8.42 6.52a.75.75 0 0 1 1.06 1.06l-3.728 3.73c.64.435 1.414.69 2.248.69Z' clipRule='evenodd'/></g><defs><clipPath id='a'><path fill='currentColor' d='M0 0h16v16H0z' /></clipPath></defs></svg>",
                         "description": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium"
                       }
                     ]

diff --git a/src/components/Navigation/components/Navigation/NavigationPopup/NavigationPopup.tsx b/src/components/Navigation/components/Navigation/NavigationPopup/NavigationPopup.tsx
@@ -29,7 +29,12 @@ export const NavigationPopup = ({
     return headerRef?.current
         ? ReactDOM.createPortal(
               <FocusTrap enabled>
-                  <div className={b({['with-background']: withBackground}, className)} id={id}>
+                  <div
+                      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                      tabIndex={0}
+                      className={b({['with-background']: withBackground}, className)}
+                      id={id}
+                  >
                       <Grid containerClass={b('grid-container')}>{children}</Grid>
                   </div>
               </FocusTrap>,

diff --git a/src/components/Navigation/components/popups/LargePopup/LargePopup.tsx b/src/components/Navigation/components/popups/LargePopup/LargePopup.tsx
@@ -154,10 +154,12 @@ export const LargePopup = (props: LargePopupProps) => {
                         ) : (
                             <Fragment>
                                 {currentCategoryData.groups.map((group, index) => {
+                                    const key = group.title || group.url || index;
+
                                     return index ? (
-                                        <LargePopupSecondaryGroup {...group} />
+                                        <LargePopupSecondaryGroup {...group} key={key} />
                                     ) : (
-                                        <LargePopupGroup {...group} section={section} />
+                                        <LargePopupGroup {...group} section={section} key={key} />
                                     );
                                 })}
                             </Fragment>