[Lens] (Accessibility) Added focus state and accessible name to suggestions (#84653)

* [Lens] (Accessibility) Added focus state and accessible name to suggestions

* Apply suggestions from code review

* Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx

padding oops

* cr

x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx

@@ -1143,7 +1143,7 @@ describe('editor_frame', () => {
           .find(EuiPanel)
           .map((el) => el.parents(EuiToolTip).prop('content'))
       ).toEqual([
-        'Current',
+        'Current visualization',
         'Suggestion1',
         'Suggestion2',
         'Suggestion3',

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss

@@ -16,6 +16,7 @@
   // Padding / negative margins to make room for overflow shadow
   padding-left: $euiSizeXS;
   margin-left: -$euiSizeXS;
+  padding-bottom: $euiSizeXS;
 }
 
 .lnsSuggestionPanel__button {
@@ -27,13 +28,31 @@
   margin-left: $euiSizeXS / 2;
   margin-bottom: $euiSizeXS / 2;
 
+  &:focus {
+    @include euiFocusRing;
+    transform: none !important; // sass-lint:disable-line no-important
+  }
+
   .lnsSuggestionPanel__expressionRenderer {
     position: static; // Let the progress indicator position itself against the button
   }
 }
 
 .lnsSuggestionPanel__button-isSelected {
-  @include euiFocusRing;
+  background-color: $euiColorLightestShade !important; // sass-lint:disable-line no-important
+  border-color: $euiColorMediumShade;
+
+  &:not(:focus) {
+    box-shadow: none !important; // sass-lint:disable-line no-important
+  }
+
+  &:focus {
+    @include euiFocusRing;
+  }
+
+  &:hover {
+    transform: none !important; // sass-lint:disable-line no-important
+  }
 }
 
 .lnsSuggestionPanel__suggestionIcon {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx

@@ -98,7 +98,7 @@ describe('suggestion_panel', () => {
         .find('[data-test-subj="lnsSuggestion"]')
         .find(EuiPanel)
         .map((el) => el.parents(EuiToolTip).prop('content'))
-    ).toEqual(['Current', 'Suggestion1', 'Suggestion2']);
+    ).toEqual(['Current visualization', 'Suggestion1', 'Suggestion2']);
   });
 
   describe('uncommitted suggestions', () => {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx

@@ -136,6 +136,8 @@ const SuggestionPreview = ({
           paddingSize="none"
           data-test-subj="lnsSuggestion"
           onClick={onSelect}
+          aria-current={!!selected}
+          aria-label={preview.title}
         >
           {preview.expression || preview.error ? (
             <PreviewRenderer
@@ -356,7 +358,7 @@ export function SuggestionPanel({
                 visualizationMap[currentVisualizationId].getDescription(currentVisualizationState)
                   .icon || 'empty',
               title: i18n.translate('xpack.lens.suggestions.currentVisLabel', {
-                defaultMessage: 'Current',
+                defaultMessage: 'Current visualization',
               }),
             }}
             ExpressionRenderer={AutoRefreshExpressionRenderer}

x-pack/plugins/translations/translations/ja-JP.json

@@ -10790,7 +10790,6 @@
     "xpack.lens.shared.nestedLegendLabel": "ネスト済み",
     "xpack.lens.sugegstion.refreshSuggestionLabel": "更新",
     "xpack.lens.suggestion.refreshSuggestionTooltip": "選択したビジュアライゼーションに基づいて、候補を更新します。",
-    "xpack.lens.suggestions.currentVisLabel": "現在",
     "xpack.lens.visTypeAlias.title": "レンズビジュアライゼーション",
     "xpack.lens.visTypeAlias.type": "レンズ",
     "xpack.lens.xyChart.addLayer": "レイヤーを追加",

x-pack/plugins/translations/translations/zh-CN.json

@@ -10803,7 +10803,6 @@
     "xpack.lens.shared.nestedLegendLabel": "嵌套",
     "xpack.lens.sugegstion.refreshSuggestionLabel": "刷新",
     "xpack.lens.suggestion.refreshSuggestionTooltip": "基于选定可视化刷新建议。",
-    "xpack.lens.suggestions.currentVisLabel": "当前",
     "xpack.lens.visTypeAlias.title": "Lens 可视化",
     "xpack.lens.visTypeAlias.type": "Lens",
     "xpack.lens.xyChart.addLayer": "添加图层",