chore(AutoComplete): fix NoResultItem contrast ratio (#3957)

francinelucca · primer-css · web-flow · commit 3baaad2b69e9 · 2026-02-27T17:22:47.000Z
Co-authored-by: primer-css &lt;primer-css@users.noreply.github.com&gt;
diff --git a/.changeset/sixty-starfishes-jump.md b/.changeset/sixty-starfishes-jump.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+chore(AutoComplete): fix NoResultItem contrast ratio
diff --git a/app/components/primer/beta/auto_complete/no_result_item.rb b/app/components/primer/beta/auto_complete/no_result_item.rb
@@ -1,21 +1,31 @@
-module Primer 
+# frozen_string_literal: true
+
+module Primer
   module Beta
     class AutoComplete
-      class NoResultItem < Item
+      # Use `NoResultItem` to display a message when no autocomplete results are found.
+      # Renders as a simple div inside the overlay, not as a list item.
+      class NoResultItem < Primer::Component
+        status :beta
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(**system_arguments)
-          super(
-            role: :presentation,
-            aria: merge_aria(
-              { aria: { hidden: true } },
-              system_arguments
-            ),
-            value: "",
-            disabled: true,
-            'data-no-result-found': true,
-            **system_arguments
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:"data-no-result-found"] = true
+          @system_arguments[:"aria-hidden"] = true
+
+          @system_arguments[:classes] = class_names(
+            "p-2",
+            "color-fg-muted",
+            system_arguments[:classes]
           )
         end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
       end
     end
   end
-end
+end
diff --git a/static/arguments.json b/static/arguments.json
@@ -3904,7 +3904,14 @@
     "short_name": "AutoCompleteNoResultItem",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-    "parameters": []
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
   },
   {
     "component": "Avatar",
diff --git a/static/info_arch.json b/static/info_arch.json
@@ -11879,6 +11879,32 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
+        "description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": false,
+        "component": "AutoComplete::NoResultItem",
+        "status": "beta",
+        "a11y_reviewed": false,
+        "short_name": "AutoCompleteNoResultItem",
+        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
+        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ],
+        "slots": [],
+        "methods": [],
+        "previews": [],
+        "subcomponents": []
+      },
       {
         "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
         "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
@@ -11971,62 +11997,6 @@
         "methods": [],
         "previews": [],
         "subcomponents": []
-      },
-      {
-        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
-        "description": "",
-        "accessibility_docs": null,
-        "is_form_component": false,
-        "is_published": true,
-        "requires_js": false,
-        "component": "AutoComplete::NoResultItem",
-        "status": "beta",
-        "a11y_reviewed": false,
-        "short_name": "AutoCompleteNoResultItem",
-        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
-        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
-        "parameters": [],
-        "slots": [
-          {
-            "name": "leading_visual",
-            "description": "The leading visual rendered before the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "trailing_visual",
-            "description": "The trailing visual rendered after the link.",
-            "parameters": [
-              {
-                "name": "kwargs",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
-              }
-            ]
-          },
-          {
-            "name": "description",
-            "description": "Optional description",
-            "parameters": [
-              {
-                "name": "system_arguments",
-                "type": "Hash",
-                "default": "N/A",
-                "description": "{{link_to_system_arguments_docs}}"
-              }
-            ]
-          }
-        ],
-        "methods": [],
-        "previews": [],
-        "subcomponents": []
       }
     ]
   },
diff --git a/test/components/beta/auto_complete/item_test.rb b/test/components/beta/auto_complete/item_test.rb
@@ -91,10 +91,10 @@ def test_renders_with_inline_description
   end
 
   def test_renders_no_results
-    render_inline(Primer::Beta::AutoComplete::NoResultItem.new(value: "", )) do |component|
+    render_inline(Primer::Beta::AutoComplete::NoResultItem.new) do
       "No results"
     end
 
-    assert_selector("[role=\"presentation\"][data-autocomplete-value=\"\"][aria-disabled=\"true\"].ActionListItem", text: "No results")
+    assert_selector("div[data-no-result-found][aria-hidden=\"true\"]", text: "No results")
   end
 end
diff --git a/test/components/component_test.rb b/test/components/component_test.rb
@@ -43,7 +43,7 @@ class PrimerComponentTest < Minitest::Test
     end],
     [Primer::Alpha::AutoComplete, { label_text: "Fruits", src: "Foo", list_id: "Bar", input_id: "input-id", input_name: "input-name" }],
     [Primer::Alpha::AutoComplete::Item, { value: "Foo" }],
-    [Primer::Beta::AutoComplete::NoResultItem, { value: "Foo" }],
+    [Primer::Beta::AutoComplete::NoResultItem, {}],
     [Primer::Beta::AutoComplete, { label_text: "Fruits", src: "Foo", list_id: "Bar", input_id: "input-id", input_name: "input-name" }],
     [Primer::Beta::AutoComplete::Item, { value: "Foo" }],
     [Primer::Beta::Avatar, { alt: "github", src: "https://github.com/github.png" }],

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/view-components": patch
 +---
++
 +chore(AutoComplete): fix NoResultItem contrast ratio