fix: Option description has sufficient color contrast in dark mode

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",

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>
     );
   }

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;

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}
         />

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;
 }

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,24 +85,35 @@ 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;
   }
 
   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}

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 {

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']}>

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>
   );

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'

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}',