diff --git a/.changeset/perfect-jobs-pretend.md b/.changeset/perfect-jobs-pretend.md
new file mode 100644
index 0000000000..ef41995243
--- /dev/null
+++ b/.changeset/perfect-jobs-pretend.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Revert tab-container-element upgrade
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/default.png
index 670dfed3c1..c5cc37dd9a 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/focused.png
index 8ef3e9cb03..45cb73a576 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/default/focused.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/default.png
index 2ae61cfd8b..e5de502c89 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/focused.png
index 5f237d9b4b..28a536f730 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_actions/focused.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/default.png
index e786b7dec9..87d5acb961 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/default.png differ
diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/focused.png
index 9b4a20ca44..188ee20cde 100644
Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/underline_panels/with_icons_and_counters/focused.png differ
diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss
index 4cdd0fc0bf..4262602bb5 100644
--- a/app/components/primer/alpha/tab_nav.pcss
+++ b/app/components/primer/alpha/tab_nav.pcss
@@ -13,11 +13,6 @@
   overflow: hidden;
 }
 
-.tabnav::part(tablist-wrapper) {
-  margin-bottom: var(--stack-gap-normal);
-  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
-}
-
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
@@ -71,11 +66,6 @@
   }
 }
 
-tab-container .tabnav-tab {
-  margin-bottom: -1px;
-}
-
-
 /* Tabnav extras
 **
 ** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
diff --git a/app/components/primer/alpha/tab_panels.html.erb b/app/components/primer/alpha/tab_panels.html.erb
index 6fcea7255f..eb54e588ab 100644
--- a/app/components/primer/alpha/tab_panels.html.erb
+++ b/app/components/primer/alpha/tab_panels.html.erb
@@ -1,9 +1,13 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= extra if @align == :left %>
-  <% tabs.each do |tab| %>
-    <%= tab %>
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= extra if @align == :left %>
+    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    <% end %>
+    <%= extra if @align == :right %>
   <% end %>
-  <%= extra if @align == :right %>
   <% tabs.each do |tab| %>
     <%= tab.panel %>
   <% end %>
diff --git a/app/components/primer/alpha/tab_panels.rb b/app/components/primer/alpha/tab_panels.rb
index d25a424d14..fceb9f8284 100644
--- a/app/components/primer/alpha/tab_panels.rb
+++ b/app/components/primer/alpha/tab_panels.rb
@@ -26,7 +26,7 @@ class TabPanels < Primer::Component
         Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
-          list: false,
+          list: true,
           panel_id: "panel-#{id}",
           **system_arguments
         )
@@ -43,14 +43,23 @@ class TabPanels < Primer::Component
 
       # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
       # @param align [Symbol] <%= one_of(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(label:, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
         @align = EXTRA_ALIGN_DEFAULT
+        @wrapper_arguments = wrapper_arguments
 
-        @system_arguments = { **deny_tag_argument(**system_arguments), **deny_tag_argument(**wrapper_arguments) }
-        @system_arguments[:tag] = :"tab-container"
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
         @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
-        @system_arguments[:"aria-label"] = label
+
+        @body_arguments = deny_tag_argument(**body_arguments)
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
       end
 
       def before_render
diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
index 799b59ec75..2e70e1e794 100644
--- a/app/components/primer/alpha/underline_nav.pcss
+++ b/app/components/primer/alpha/underline_nav.pcss
@@ -21,13 +21,7 @@
   }
 }
 
-.UnderlineNav::part(tablist-wrapper) {
-  width: 100%;
-  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
-  padding: var(--control-medium-gap) 0;
-}
-
-.UnderlineNav-body,.UnderlineNav::part(tablist) {
+.UnderlineNav-body {
   display: flex;
   align-items: center;
   gap: var(--control-medium-gap);
diff --git a/app/components/primer/alpha/underline_panels.html.erb b/app/components/primer/alpha/underline_panels.html.erb
index f8465ea449..b681d0c4c7 100644
--- a/app/components/primer/alpha/underline_panels.html.erb
+++ b/app/components/primer/alpha/underline_panels.html.erb
@@ -1,16 +1,18 @@
-<%= render Primer::BaseComponent.new(**@wrapper_arguments) do %>
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>
     <% end %>
-    <% tabs.each do |tab| %>
-      <%= tab %>
+    <%= render body do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
     <% end %>
     <% if @align == :left %>
       <%= actions %>
     <% end %>
-    <% tabs.each do |tab| %>
-      <%= tab.panel %>
-    <% end %>
+  <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
   <% end %>
 <% end %>
diff --git a/app/components/primer/alpha/underline_panels.pcss b/app/components/primer/alpha/underline_panels.pcss
deleted file mode 100644
index b7497bf6b8..0000000000
--- a/app/components/primer/alpha/underline_panels.pcss
+++ /dev/null
@@ -1,4 +0,0 @@
-tab-container.UnderlineNav {
-  box-shadow: none;
-  flex-direction: column;
-}
diff --git a/app/components/primer/alpha/underline_panels.rb b/app/components/primer/alpha/underline_panels.rb
index b60b384fed..3c9361aab7 100644
--- a/app/components/primer/alpha/underline_panels.rb
+++ b/app/components/primer/alpha/underline_panels.rb
@@ -18,7 +18,7 @@ class UnderlinePanels < Primer::Component
         Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
-          list: false,
+          list: true,
           icon_classes: "UnderlineNav-octicon",
           panel_id: "panel-#{id}",
           **system_arguments
@@ -43,16 +43,24 @@ class UnderlinePanels < Primer::Component
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
         @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-        @wrapper_arguments = deny_tag_argument(**wrapper_arguments)
-        @wrapper_arguments[:tag] = :div
+        @wrapper_arguments = wrapper_arguments
 
         @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :"tab-container"
+        @system_arguments[:tag] = :div
         @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
-        @system_arguments[:"aria-label"] = label
 
         @body_arguments = deny_tag_argument(**body_arguments)
-        @body_arguments[:tag] = :div
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
       end
     end
   end
diff --git a/app/components/primer/primer.pcss b/app/components/primer/primer.pcss
index e860a572c8..2fe5587638 100644
--- a/app/components/primer/primer.pcss
+++ b/app/components/primer/primer.pcss
@@ -12,7 +12,6 @@
 @import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
-@import "./alpha/underline_panels.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./alpha/menu.pcss";
 
diff --git a/package-lock.json b/package-lock.json
index c65e6eda17..8de50c8710 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@github/image-crop-element": "^5.0.0",
         "@github/include-fragment-element": "^6.1.1",
         "@github/relative-time-element": "^4.0.0",
-        "@github/tab-container-element": "^4.5.0",
+        "@github/tab-container-element": "^3.1.2",
         "@oddbird/popover-polyfill": "^0.4.0",
         "@primer/behaviors": "^1.3.4"
       },
@@ -2181,9 +2181,9 @@
       "integrity": "sha512-wTXunu3hmuGljA5CHaaoUIKV0oI35wno0FKJl2yqKplTRnsCA5bPNj4bDeVIubkuskql6jwionWLlGM1Y6QLaw=="
     },
     "node_modules/@github/tab-container-element": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-4.8.0.tgz",
-      "integrity": "sha512-LxPe4RSNdmfXcjM5APzbwjzyD3aDOqtoKpKgGc7aXucp8t6SWetbJ5lNoZSRCNtKugUkOLnKY1+Zr5DcdbHrhg=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz",
+      "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -2976,12 +2976,6 @@
         "@primer/behaviors": "^1.3.4"
       }
     },
-    "node_modules/@primer/view-components/node_modules/@github/tab-container-element": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.4.0.tgz",
-      "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==",
-      "dev": true
-    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "15.2.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.2.3.tgz",
@@ -12822,9 +12816,9 @@
       "integrity": "sha512-wTXunu3hmuGljA5CHaaoUIKV0oI35wno0FKJl2yqKplTRnsCA5bPNj4bDeVIubkuskql6jwionWLlGM1Y6QLaw=="
     },
     "@github/tab-container-element": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-4.8.0.tgz",
-      "integrity": "sha512-LxPe4RSNdmfXcjM5APzbwjzyD3aDOqtoKpKgGc7aXucp8t6SWetbJ5lNoZSRCNtKugUkOLnKY1+Zr5DcdbHrhg=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz",
+      "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g=="
     },
     "@humanwhocodes/config-array": {
       "version": "0.11.14",
@@ -13415,14 +13409,6 @@
         "@github/tab-container-element": "^3.1.2",
         "@oddbird/popover-polyfill": "^0.4.0",
         "@primer/behaviors": "^1.3.4"
-      },
-      "dependencies": {
-        "@github/tab-container-element": {
-          "version": "3.4.0",
-          "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.4.0.tgz",
-          "integrity": "sha512-Yx70pO8A0p7Stnm9knKkUNX8i4bjuwDYZarRkM8JH0Z+ffhpe++oNAPbzGI9GEcGugRHvKuSC6p4YOdoHtTniQ==",
-          "dev": true
-        }
       }
     },
     "@rollup/plugin-node-resolve": {
diff --git a/package.json b/package.json
index 7d270c8c93..6b0df93331 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@github/image-crop-element": "^5.0.0",
     "@github/include-fragment-element": "^6.1.1",
     "@github/relative-time-element": "^4.0.0",
-    "@github/tab-container-element": "^4.5.0",
+    "@github/tab-container-element": "^3.1.2",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
   },
diff --git a/test/components/alpha/tab_panels_test.rb b/test/components/alpha/tab_panels_test.rb
index 48f1f9d199..1c501a09dd 100644
--- a/test/components/alpha/tab_panels_test.rb
+++ b/test/components/alpha/tab_panels_test.rb
@@ -31,8 +31,16 @@ def test_renders_tabs_and_panels_with_relevant_aria_attributes
     end
 
     assert_selector("tab-container") do
-      assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
-      assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
+      assert_selector("div.tabnav") do
+        assert_selector("ul.tabnav-tabs[aria-label='label']") do
+          assert_selector("li") do
+            assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
+          end
+          assert_selector("li") do
+            assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
+          end
+        end
+      end
       assert_selector("div#panel-tab-1[aria-labelledby='tab-1']", text: "Panel 1")
       assert_selector("div#panel-tab-2[aria-labelledby='tab-2']", text: "Panel 2", visible: false)
     end
@@ -62,8 +70,16 @@ def test_renders_extra_content
       component.with_extra { "extra" }
     end
     assert_selector("tab-container") do
-      assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
-      assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
+      assert_selector("div.tabnav") do
+        assert_selector("ul.tabnav-tabs[aria-label='label']") do
+          assert_selector("li") do
+            assert_selector("button#tab-1.tabnav-tab[aria-selected='true']", text: "Tab 1")
+          end
+          assert_selector("li") do
+            assert_selector("button#tab-2.tabnav-tab", text: "Tab 2")
+          end
+        end
+      end
       assert_selector("div#panel-tab-1[aria-labelledby='tab-1']", text: "Panel 1")
       assert_selector("div#panel-tab-2[aria-labelledby='tab-2']", text: "Panel 2", visible: false)
       assert_text("extra")
diff --git a/test/components/alpha/underline_panels_test.rb b/test/components/alpha/underline_panels_test.rb
index c577fac714..63a0d2bf40 100644
--- a/test/components/alpha/underline_panels_test.rb
+++ b/test/components/alpha/underline_panels_test.rb
@@ -20,13 +20,21 @@ def test_renders_panels_and_tab_container
       end
     end
 
-    assert_selector("tab-container.UnderlineNav") do
-      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
-      assert_selector("div.UnderlineNav-actions", text: "Actions content")
+    assert_selector("tab-container") do
+      assert_selector("div.UnderlineNav") do
+        assert_selector("ul.UnderlineNav-body[role='tablist'][aria-label='label']") do
+          assert_selector("li[role='presentation']") do
+            assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+          end
+          assert_selector("li[role='presentation']") do
+            assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+          end
+        end
+        assert_selector("div.UnderlineNav-actions", text: "Actions content")
+      end
+      assert_selector("div[role='tabpanel']", text: "Panel 1")
+      assert_selector("div[role='tabpanel']", text: "Panel 2", visible: false)
     end
-    assert_selector("div[role='tabpanel']", text: "Panel 1")
-    assert_selector("div[role='tabpanel']", text: "Panel 2", visible: false)
   end
 
   def test_customizes_tab_container
@@ -37,7 +45,7 @@ def test_customizes_tab_container
       end
     end
 
-    assert_selector("div.m-2.custom-class")
+    assert_selector("tab-container.m-2.custom-class")
   end
 
   def test_raises_if_multiple_tabs_are_selected
@@ -101,9 +109,15 @@ def test_align_falls_back_to_default
 
     refute_selector(".UnderlineNav--right")
 
-    assert_selector("tab-container.UnderlineNav") do
-      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+    assert_selector("div.UnderlineNav") do
+      assert_selector("ul.UnderlineNav-body[aria-label='label']") do
+        assert_selector("li[role='presentation']") do
+          assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+        end
+        assert_selector("li[role='presentation']") do
+          assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+        end
+      end
       assert_selector("div.UnderlineNav-actions", text: "Actions content")
     end
   end
@@ -123,9 +137,15 @@ def test_adds_underline_nav_right_when_align_right_is_set
       end
     end
 
-    assert_selector("tab-container.UnderlineNav.UnderlineNav--right") do
-      assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-      assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+    assert_selector("div.UnderlineNav.UnderlineNav--right") do
+      assert_selector("ul.UnderlineNav-body[aria-label='label']") do
+        assert_selector("li[role='presentation']") do
+          assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+        end
+        assert_selector("li[role='presentation']") do
+          assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+        end
+      end
       assert_selector("div.UnderlineNav-actions", text: "Actions content")
     end
   end
@@ -144,6 +164,8 @@ def test_puts_actions_first_if_align_right_and_actions_exist
         "Actions content"
       end
     end
+
+    assert_selector(".UnderlineNav > .UnderlineNav-body:last-child")
   end
 
   def test_renders_tab_icon_with_correct_classes
diff --git a/test/css/component_specific_selectors_test.rb b/test/css/component_specific_selectors_test.rb
index da2e9b7aad..d82cf8f43e 100644
--- a/test/css/component_specific_selectors_test.rb
+++ b/test/css/component_specific_selectors_test.rb
@@ -50,7 +50,6 @@ class ComponentSpecificSelectorsTest < Minitest::Test
     ],
     Primer::Alpha::TabNav => [
       ".tabnav-tab.selected",
-      "tab-container .tabnav-tab",
       ".tabnav-extra",
       ".tabnav-btn"
     ],
diff --git a/test/system/alpha/tab_panels_test.rb b/test/system/alpha/tab_panels_test.rb
index 158dabfa51..3736a777a4 100644
--- a/test/system/alpha/tab_panels_test.rb
+++ b/test/system/alpha/tab_panels_test.rb
@@ -6,12 +6,22 @@ module Alpha
   class IntegrationTabPanelsTest < System::TestCase
     def assert_tab_panels_rendered
       assert_selector("tab-container") do
-        assert_selector("button#tab-1.tabnav-tab[role='tab'][aria-selected='true']", text: "Tab 1")
-        assert_selector("button#tab-2.tabnav-tab[role='tab']", text: "Tab 2")
-        assert_selector("button#tab-3.tabnav-tab[role='tab']", text: "Tab 3")
+        assert_selector("div.tabnav") do
+          assert_selector("ul.tabnav-tabs[role='tablist']") do
+            assert_selector("li[role='presentation']") do
+              assert_selector("button#tab-1.tabnav-tab[role='tab'][aria-selected='true']", text: "Tab 1")
+            end
+            assert_selector("li[role='presentation']") do
+              assert_selector("button#tab-2.tabnav-tab[role='tab']", text: "Tab 2")
+            end
+            assert_selector("li[role='presentation']") do
+              assert_selector("button#tab-3.tabnav-tab[role='tab']", text: "Tab 3")
+            end
+          end
+        end
         assert_selector("div#panel-tab-1[role='tabpanel']", text: "Panel 1")
-        refute_selector("div#panel-tab-2[role='tabpanel']", text: "Panel 2")
-        refute_selector("div#panel-tab-3[role='tabpanel']", text: "Panel 3")
+        assert_selector("div#panel-tab-2[role='tabpanel']", text: "Panel 2", visible: false)
+        assert_selector("div#panel-tab-3[role='tabpanel']", text: "Panel 3", visible: false)
       end
     end
 
@@ -27,7 +37,7 @@ def assert_selects_tab(tab)
 
     def assert_shows_panel(panel)
       (1..3).each do |num|
-        assert_selector("div[role='tabpanel']", text: "Panel #{num}", visible: panel == num)
+        assert_selector("div[role='tabpanel']#{'[hidden]' unless panel == num}", text: "Panel #{num}", visible: panel == num)
       end
     end
 
diff --git a/test/system/alpha/underline_panels_test.rb b/test/system/alpha/underline_panels_test.rb
index 7538462426..2ec4e4f7ce 100644
--- a/test/system/alpha/underline_panels_test.rb
+++ b/test/system/alpha/underline_panels_test.rb
@@ -5,10 +5,20 @@
 module Alpha
   class IntegrationUnderlinePanelsTest < System::TestCase
     def assert_underline_panels_rendered
-      assert_selector("tab-container.UnderlineNav") do
-        assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
-        assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
-        assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 3")
+      assert_selector("tab-container") do
+        assert_selector("div.UnderlineNav") do
+          assert_selector("ul.UnderlineNav-body[role='tablist']") do
+            assert_selector("li[role='presentation']") do
+              assert_selector("button.UnderlineNav-item[role='tab'][aria-selected='true']", text: "Tab 1")
+            end
+            assert_selector("li[role='presentation']") do
+              assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 2")
+            end
+            assert_selector("li[role='presentation']") do
+              assert_selector("button.UnderlineNav-item[role='tab']", text: "Tab 3")
+            end
+          end
+        end
         assert_selector("div[role='tabpanel']", text: "Panel 1")
         assert_selector("div[role='tabpanel']", text: "Panel 2", visible: false)
         assert_selector("div[role='tabpanel']", text: "Panel 3", visible: false)
@@ -27,7 +37,7 @@ def assert_selects_tab(tab)
 
     def assert_shows_panel(panel)
       (1..3).each do |num|
-        assert_selector("div[role='tabpanel']", text: "Panel #{num}", visible: panel == num)
+        assert_selector("div[role='tabpanel']#{'[hidden]' unless panel == num}", text: "Panel #{num}", visible: panel == num)
       end
     end