From 8cd76f7cff475794c1bffd08e98d11be286b4e3c Mon Sep 17 00:00:00 2001
From: Aleksandra Danilina <akdanili@amazon.com>
Date: Wed, 25 Jan 2023 14:12:56 +0100
Subject: [PATCH 1/2] fix: Option description has sufficient color contrast in
 dark mode

---
 src/autosuggest/autosuggest-option.tsx        |  2 +-
 src/internal/components/option/constants.scss |  1 +
 src/internal/components/option/index.tsx      | 20 ++++++-
 src/internal/components/option/interfaces.ts  |  2 +
 .../components/option/option-parts.tsx        | 54 ++++++++++++++-----
 src/internal/components/option/styles.scss    |  8 +++
 src/select/parts/item.tsx                     |  7 ++-
 src/select/parts/multiselect-item.tsx         |  8 ++-
 style-dictionary/utils/token-names.ts         |  2 +-
 style-dictionary/visual-refresh/colors.ts     |  1 +
 10 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/src/autosuggest/autosuggest-option.tsx b/src/autosuggest/autosuggest-option.tsx
index 4e312994fb..4009cf03ff 100644
--- a/src/autosuggest/autosuggest-option.tsx
+++ b/src/autosuggest/autosuggest-option.tsx
@@ -61,7 +61,7 @@ const AutosuggestOption = (
 
     optionContent = (
       <div {...a11yProperties}>
-        <OptionComponent option={option} highlightText={highlightText} />
+        <OptionComponent option={option} highlightedOption={highlighted} highlightText={highlightText} />
       </div>
     );
   }
diff --git a/src/internal/components/option/constants.scss b/src/internal/components/option/constants.scss
index f4d0eca5a5..01690004c7 100644
--- a/src/internal/components/option/constants.scss
+++ b/src/internal/components/option/constants.scss
@@ -7,3 +7,4 @@
 @use '../../styles/tokens' as awsui;
 
 $tags-description-color: awsui.$color-text-dropdown-item-secondary;
+$tags-description-color-hover: awsui.$color-text-dropdown-item-secondary-hover;
diff --git a/src/internal/components/option/index.tsx b/src/internal/components/option/index.tsx
index b64b740930..80e1cca222 100644
--- a/src/internal/components/option/index.tsx
+++ b/src/internal/components/option/index.tsx
@@ -25,6 +25,8 @@ const Option = ({
   highlightText,
   triggerVariant = false,
   isGroupOption = false,
+  highlightedOption = false,
+  selectedOption = false,
   ...restProps
 }: OptionProps) => {
   if (!option) {
@@ -76,10 +78,24 @@ const Option = ({
           />
           <LabelTag labelTag={option.labelTag} highlightText={highlightText} triggerVariant={triggerVariant} />
         </span>
-        <Description description={option.description} highlightText={highlightText} triggerVariant={triggerVariant} />
-        <Tags tags={option.tags} highlightText={highlightText} triggerVariant={triggerVariant} />
+        <Description
+          description={option.description}
+          highlightedOption={highlightedOption}
+          selectedOption={selectedOption}
+          highlightText={highlightText}
+          triggerVariant={triggerVariant}
+        />
+        <Tags
+          tags={option.tags}
+          highlightedOption={highlightedOption}
+          selectedOption={selectedOption}
+          highlightText={highlightText}
+          triggerVariant={triggerVariant}
+        />
         <FilteringTags
           filteringTags={option.filteringTags}
+          highlightedOption={highlightedOption}
+          selectedOption={selectedOption}
           highlightText={highlightText}
           triggerVariant={triggerVariant}
         />
diff --git a/src/internal/components/option/interfaces.ts b/src/internal/components/option/interfaces.ts
index 52db0595b7..6ca579e31c 100644
--- a/src/internal/components/option/interfaces.ts
+++ b/src/internal/components/option/interfaces.ts
@@ -40,5 +40,7 @@ export interface OptionProps extends BaseComponentProps {
   option?: InternalOptionDefinition;
   triggerVariant?: boolean;
   highlightText?: string;
+  highlightedOption?: boolean;
+  selectedOption?: boolean;
   isGroupOption?: boolean;
 }
diff --git a/src/internal/components/option/option-parts.tsx b/src/internal/components/option/option-parts.tsx
index 48d10e819e..a6c88a9b13 100644
--- a/src/internal/components/option/option-parts.tsx
+++ b/src/internal/components/option/option-parts.tsx
@@ -36,30 +36,47 @@ export const LabelTag = ({ labelTag, highlightText, triggerVariant }: LabelTagPr
 
 interface DescriptionProps {
   description?: string;
+  highlightedOption: boolean;
   highlightText?: string;
+  selectedOption: boolean;
   triggerVariant: boolean;
 }
-export const Description = ({ description, highlightText, triggerVariant }: DescriptionProps) =>
+export const Description = ({
+  description,
+  highlightedOption,
+  highlightText,
+  selectedOption,
+  triggerVariant,
+}: DescriptionProps) =>
   description ? (
-    // We do not reach AA compliance in Dark mode for highlighted state
-    // TODO: Remove aria-disabled={true} when we fix AWSUI-10333
-    <span className={clsx(styles.description, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>
+    <span
+      className={clsx(styles.description, {
+        [styles['trigger-variant']]: triggerVariant,
+        [styles.highlighted]: highlightedOption,
+        [styles.selected]: selectedOption,
+      })}
+    >
       <HighlightMatch str={description} highlightText={highlightText} />
     </span>
   ) : null;
 
 interface TagsProps {
   tags?: ReadonlyArray<string>;
+  highlightedOption: boolean;
   highlightText?: string;
+  selectedOption: boolean;
   triggerVariant: boolean;
 }
-export const Tags = ({ tags, highlightText, triggerVariant }: TagsProps) =>
+export const Tags = ({ tags, highlightedOption, highlightText, selectedOption, triggerVariant }: TagsProps) =>
   tags ? (
-    <span className={clsx(styles.tags)}>
+    <span
+      className={clsx(styles.tags, {
+        [styles.highlighted]: highlightedOption,
+        [styles.selected]: selectedOption,
+      })}
+    >
       {tags.map((tag, idx) => (
-        // We do not reach AA compliance in Dark mode for highlighted state
-        // TODO: Remove aria-disabled={true} when we fix AWSUI-10333
-        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])} aria-disabled={true}>
+        <span key={idx} className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}>
           <HighlightMatch str={tag} highlightText={highlightText} />
         </span>
       ))}
@@ -68,10 +85,18 @@ export const Tags = ({ tags, highlightText, triggerVariant }: TagsProps) =>
 
 interface FilteringTagProps {
   filteringTags?: ReadonlyArray<string>;
+  highlightedOption: boolean;
   highlightText?: string;
+  selectedOption: boolean;
   triggerVariant: boolean;
 }
-export const FilteringTags = ({ filteringTags, highlightText, triggerVariant }: FilteringTagProps) => {
+export const FilteringTags = ({
+  filteringTags,
+  highlightedOption,
+  highlightText,
+  selectedOption,
+  triggerVariant,
+}: FilteringTagProps) => {
   if (!highlightText || !filteringTags) {
     return null;
   }
@@ -79,13 +104,16 @@ export const FilteringTags = ({ filteringTags, highlightText, triggerVariant }:
   const searchElement = highlightText.toLowerCase();
 
   return (
-    <span className={clsx(styles.tags)}>
+    <span
+      className={clsx(styles.tags, {
+        [styles.highlighted]: highlightedOption,
+        [styles.selected]: selectedOption,
+      })}
+    >
       {filteringTags.map((filteringTag, key) => {
         const match = filteringTag.toLowerCase().indexOf(searchElement) !== -1;
         if (match) {
           return (
-            // We do not reach AA compliance in Dark mode for highlighted state
-            // TODO: Remove aria-disabled={true} when we fix AWSUI-10333
             <span
               className={clsx(styles.tag, triggerVariant && styles['trigger-variant'])}
               key={key}
diff --git a/src/internal/components/option/styles.scss b/src/internal/components/option/styles.scss
index eb7a076375..8b40c98e5e 100644
--- a/src/internal/components/option/styles.scss
+++ b/src/internal/components/option/styles.scss
@@ -73,6 +73,14 @@
   @include styles.font-body-s;
   color: constants.$tags-description-color;
   flex-wrap: wrap;
+
+  &.highlighted {
+    color: constants.$tags-description-color-hover;
+  }
+
+  &.selected {
+    color: constants.$tags-description-color;
+  }
 }
 
 .tags {
diff --git a/src/select/parts/item.tsx b/src/select/parts/item.tsx
index 5af6ab544a..c653f81836 100644
--- a/src/select/parts/item.tsx
+++ b/src/select/parts/item.tsx
@@ -78,7 +78,12 @@ const Item = (
         {isParent ? (
           wrappedOption.label || wrappedOption.value
         ) : (
-          <Option option={{ ...wrappedOption, disabled }} highlightText={filteringValue} />
+          <Option
+            option={{ ...wrappedOption, disabled }}
+            highlightedOption={highlighted}
+            selectedOption={selected}
+            highlightText={filteringValue}
+          />
         )}
         {!hasCheckbox && !isParent && selected && (
           <div className={styles['selected-icon']}>
diff --git a/src/select/parts/multiselect-item.tsx b/src/select/parts/multiselect-item.tsx
index 000cd9541d..39a4a16ce2 100644
--- a/src/select/parts/multiselect-item.tsx
+++ b/src/select/parts/multiselect-item.tsx
@@ -79,7 +79,13 @@ const MultiSelectItem = (
             <CheckboxIcon checked={selected} indeterminate={isParent && indeterminate} disabled={option.disabled} />
           </div>
         )}
-        <Option option={{ ...wrappedOption, disabled }} highlightText={filteringValue} isGroupOption={isParent} />
+        <Option
+          option={{ ...wrappedOption, disabled }}
+          highlightedOption={highlighted}
+          selectedOption={selected}
+          highlightText={filteringValue}
+          isGroupOption={isParent}
+        />
       </div>
     </SelectableItem>
   );
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index e49a5a2f03..e6d1ba1464 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -369,6 +369,7 @@ export type ColorsTokenName =
   | 'colorTextDropdownItemFilterMatch'
   | 'colorTextDropdownItemHighlighted'
   | 'colorTextDropdownItemSecondary'
+  | 'colorTextDropdownItemSecondaryHover'
   | 'colorTextEmpty'
   | 'colorTextExpandableSectionDefault'
   | 'colorTextExpandableSectionHover'
@@ -534,7 +535,6 @@ export type MotionTokenName =
   | 'motionEasingTransitionQuick'
   | 'motionEasingTransitionShowPaced'
   | 'motionEasingTransitionShowQuick'
-  | 'motionKeyframesFadeIn'
   | 'motionEasingResponsive'
   | 'motionEasingSticky'
   | 'motionEasingExpressive'
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index 0350c69b53..39167f35a0 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -172,6 +172,7 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorTextDropdownItemFilterMatch: { light: '{colorBlue600}', dark: '{colorBlue400}' },
   colorTextDropdownItemHighlighted: { light: '{colorGrey900}', dark: '{colorGrey200}' },
   colorTextDropdownItemSecondary: '{colorTextFormSecondary}',
+  colorTextDropdownItemSecondaryHover: { light: '{colorGrey550}', dark: 'colorGrey300' },
   colorTextEmpty: { light: '{colorGrey550}', dark: '{colorGrey300}' },
   colorTextExpandableSectionDefault: '{colorTextInteractiveActive}',
   colorTextExpandableSectionHover: '{colorTextAccent}',

From a7e5dd1daaff676cde6fb5c384342ce13bbb02b3 Mon Sep 17 00:00:00 2001
From: Aleksandra Danilina <akdanili@amazon.com>
Date: Wed, 25 Jan 2023 15:10:55 +0100
Subject: [PATCH 2/2] fix: Update snapshot

---
 src/__integ__/__snapshots__/themes.test.ts.snap | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index 5d51a26914..61dfb2cb04 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -341,6 +341,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#0073bb",
   "color-text-dropdown-item-highlighted": "#16191f",
   "color-text-dropdown-item-secondary": "#687078",
+  "color-text-dropdown-item-secondary-hover": "#687078",
   "color-text-empty": "#687078",
   "color-text-expandable-section-default": "#545b64",
   "color-text-expandable-section-hover": "#16191f",
@@ -922,6 +923,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#44b9d6",
   "color-text-dropdown-item-highlighted": "#eaeded",
   "color-text-dropdown-item-secondary": "#95a5a6",
+  "color-text-dropdown-item-secondary-hover": "colorGrey300",
   "color-text-empty": "#d5dbdb",
   "color-text-expandable-section-default": "#d5dbdb",
   "color-text-expandable-section-hover": "#fafafa",
@@ -1503,6 +1505,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#0073bb",
   "color-text-dropdown-item-highlighted": "#16191f",
   "color-text-dropdown-item-secondary": "#687078",
+  "color-text-dropdown-item-secondary-hover": "#687078",
   "color-text-empty": "#687078",
   "color-text-expandable-section-default": "#545b64",
   "color-text-expandable-section-hover": "#16191f",
@@ -2084,6 +2087,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#0073bb",
   "color-text-dropdown-item-highlighted": "#16191f",
   "color-text-dropdown-item-secondary": "#687078",
+  "color-text-dropdown-item-secondary-hover": "#687078",
   "color-text-empty": "#687078",
   "color-text-expandable-section-default": "#545b64",
   "color-text-expandable-section-hover": "#16191f",
@@ -2665,6 +2669,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#0972d3",
   "color-text-dropdown-item-highlighted": "#000716",
   "color-text-dropdown-item-secondary": "#5f6b7a",
+  "color-text-dropdown-item-secondary-hover": "#5f6b7a",
   "color-text-empty": "#5f6b7a",
   "color-text-expandable-section-default": "#000716",
   "color-text-expandable-section-hover": "#0972d3",
@@ -3246,6 +3251,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#89bdee",
   "color-text-dropdown-item-highlighted": "#e9ebed",
   "color-text-dropdown-item-secondary": "#8d99a8",
+  "color-text-dropdown-item-secondary-hover": "colorGrey300",
   "color-text-empty": "#d1d5db",
   "color-text-expandable-section-default": "#fbfbfb",
   "color-text-expandable-section-hover": "#539fe5",
@@ -3827,6 +3833,7 @@ Object {
   "color-text-dropdown-item-filter-match": "#89bdee",
   "color-text-dropdown-item-highlighted": "#e9ebed",
   "color-text-dropdown-item-secondary": "#8d99a8",
+  "color-text-dropdown-item-secondary-hover": "colorGrey300",
   "color-text-empty": "#d1d5db",
   "color-text-expandable-section-default": "#fbfbfb",
   "color-text-expandable-section-hover": "#539fe5",