A11y: Focus outline is not fully visible in several areas of the application (#93030)

.betterer.results

@@ -6828,15 +6828,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"],
       [0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"]
     ],
-    "public/app/plugins/panel/dashlist/styles.ts:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
-    ],
     "public/app/plugins/panel/datagrid/utils.ts:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],

packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx

@@ -99,14 +99,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       })
     ),
     rightWrapper: css({
-      paddingLeft: theme.spacing(0.5),
+      padding: theme.spacing(0.5),
     }),
     bottomWrapper: css({
       display: 'flex',
       flexWrap: 'wrap',
       justifyContent: 'space-between',
       width: '100%',
-      paddingLeft: theme.spacing(0.5),
+      padding: theme.spacing(0.5),
       gap: '15px 25px',
     }),
     section: css({

public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -57,7 +57,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'block',
       textOverflow: 'ellipsis',
       overflow: 'hidden',
-      padding: theme.spacing(0, 0.5),
       whiteSpace: 'nowrap',
       color: theme.colors.text.secondary,
     }),
@@ -74,6 +73,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       flex: 1,
       minWidth: 0,
       maxWidth: 'max-content',
+      padding: theme.spacing(0.5, 0.5),
 
       // logic for small screens
       // hide any breadcrumbs that aren't the second to last child (the parent)

public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx

@@ -132,7 +132,7 @@ function getStyles(theme: GrafanaTheme2, headerHeight: number | undefined) {
       label: 'canvas-content',
       display: 'flex',
       flexDirection: 'column',
-      padding: theme.spacing(0, 2),
+      padding: theme.spacing(0.5, 2),
       flexBasis: '100%',
       gridArea: 'panels',
       flexGrow: 1,

public/app/plugins/panel/dashlist/styles.ts

@@ -2,52 +2,52 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-export const getStyles = (theme: GrafanaTheme2) => ({
-  dashlistSectionHeader: css`
-    padding: ${theme.spacing(0.25, 1)};
-    margin-right: ${theme.spacing(1)};
-  `,
-  dashlistSection: css`
-    margin-bottom: ${theme.spacing(2)};
-    padding-top: 3px;
-  `,
-  dashlistLink: css`
-    display: flex;
-    cursor: pointer;
-    border-bottom: 1px solid ${theme.colors.border.weak};
-    margin-right: ${theme.spacing(1)};
-    padding: ${theme.spacing(1)};
-    align-items: center;
+export const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    dashlistSectionHeader: css({
+      padding: theme.spacing(0.25, 1),
+      marginRight: theme.spacing(1),
+    }),
+    dashlistSection: css({
+      marginBottom: theme.spacing(2),
+      paddingTop: theme.spacing(0.5),
+    }),
+    dashlistLink: css({
+      display: 'flex',
+      cursor: 'pointer',
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      margin: theme.spacing(1),
+      padding: theme.spacing(1),
+      alignItems: 'center',
 
-    &:hover {
-      a {
-        color: ${theme.colors.text.link};
-        text-decoration: underline;
-      }
-    }
-  `,
-  dashlistFolder: css`
-    color: ${theme.colors.text.secondary};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    line-height: ${theme.typography.body.lineHeight};
-  `,
-  dashlistTitle: css`
-    &::after {
-      position: absolute;
-      content: '';
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-    }
-  `,
-  dashlistLinkBody: css`
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-  dashlistItem: css`
-    position: relative;
-    list-style: none;
-  `,
-});
+      '&:hover': {
+        a: {
+          color: theme.colors.text.link,
+          textDecoration: 'underline',
+        },
+      },
+    }),
+    dashlistFolder: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize,
+      lineHeight: theme.typography.body.lineHeight,
+    }),
+    dashlistTitle: css({
+      '&::after': {
+        position: 'absolute',
+        content: '""',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+      },
+    }),
+    dashlistLinkBody: css({
+      flexGrow: 1,
+    }),
+    dashlistItem: css({
+      position: 'relative',
+      listStyle: 'none',
+    }),
+  };
+};