From 7a917b10e10d486f7b5d715f5accb516f2c99531 Mon Sep 17 00:00:00 2001
From: Philip Colares Carneiro <philip.colares@gmail.com>
Date: Thu, 11 Jun 2026 13:54:14 +0100
Subject: [PATCH] fix A11y issue that lock user in register model button

Signed-off-by: Philip Colares Carneiro <philip.colares@gmail.com>
---
 .../cypress/cypress/pages/modelCatalog.ts     |  4 +++
 .../modelCatalog/modelCatalogDetails.cy.ts    | 18 ++++++++++++
 .../modelCatalog/screens/ModelDetailsPage.tsx | 28 ++++++++++++-------
 3 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts
index 10d2cdff7f..6caa905123 100644
--- a/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts
+++ b/clients/ui/frontend/src/__tests__/cypress/cypress/pages/modelCatalog.ts
@@ -488,6 +488,10 @@ class ModelCatalog {
     return cy.findByTestId('register-model-button');
   }
 
+  findRegisterCatalogModelTooltip() {
+    return cy.findByTestId('register-catalog-model-tooltip');
+  }
+
   findModelTypeSelect() {
     return cy.findByTestId('register-model-type-select');
   }
diff --git a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogDetails.cy.ts b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogDetails.cy.ts
index e848a7eba4..d852821201 100644
--- a/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogDetails.cy.ts
+++ b/clients/ui/frontend/src/__tests__/cypress/cypress/tests/mocked/modelCatalog/modelCatalogDetails.cy.ts
@@ -271,6 +271,24 @@ describe('Model Catalog Details Page - Edge Cases', () => {
     cy.findAllByText('N/A').should('have.length.at.least', 1);
   });
 
+  it('should show disabled register button with tooltip when no model registries exist', () => {
+    cy.intercept('GET', '/model-registry/api/v1/model_registry*', mockModArchResponse([])).as(
+      'getEmptyModelRegistries',
+    );
+
+    setupModelCatalogIntercepts({});
+    interceptArtifactsList();
+
+    modelCatalog.visit();
+    modelCatalog.findLoadingState().should('not.exist');
+    modelCatalog.findModelCatalogDetailLink().first().click();
+    modelCatalog.findBreadcrumb().should('exist');
+
+    modelCatalog.findRegisterModelButton().should('have.attr', 'aria-disabled', 'true');
+    modelCatalog.findRegisterModelButton().trigger('mouseenter');
+    modelCatalog.findRegisterCatalogModelTooltip().should('be.visible');
+  });
+
   it('should show error alert when artifacts fail to load', () => {
     setupModelCatalogIntercepts({});
 
diff --git a/clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelDetailsPage.tsx b/clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelDetailsPage.tsx
index fce1c4edea..3855d563af 100644
--- a/clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelDetailsPage.tsx
+++ b/clients/ui/frontend/src/app/pages/modelCatalog/screens/ModelDetailsPage.tsx
@@ -13,6 +13,7 @@ import {
   StackItem,
   Button,
   Popover,
+  Tooltip,
   ActionListGroup,
   Skeleton,
   Label,
@@ -57,17 +58,24 @@ const ModelDetailsPage: React.FC<ModelDetailsPageProps> = ({ tab }) => {
     encodeURIComponent(`${decodedParams.modelName}`),
   );
 
-  const registerButtonPopover = (headerContent: string, bodyContent: string) => (
-    <Popover
-      headerContent={headerContent}
-      triggerAction="hover"
-      data-testid="register-catalog-model-popover"
-      bodyContent={<div>{bodyContent}</div>}
+  const registerButtonTooltip = (headerContent: string, bodyContent: string) => (
+    <Tooltip
+      content={
+        headerContent ? (
+          <div>
+            <strong>{headerContent}</strong>
+            <div>{bodyContent}</div>
+          </div>
+        ) : (
+          bodyContent
+        )
+      }
+      data-testid="register-catalog-model-tooltip"
     >
       <Button variant="primary" isAriaDisabled data-testid="register-model-button">
         Register model
       </Button>
-    </Popover>
+    </Tooltip>
   );
 
   const registerModelButton = () => {
@@ -76,7 +84,7 @@ const ModelDetailsPage: React.FC<ModelDetailsPageProps> = ({ tab }) => {
     }
 
     if (artifactsLoadError) {
-      return registerButtonPopover(
+      return registerButtonTooltip(
         'Unable to load model artifacts',
         'Model registration is unavailable due to an error loading model artifacts. Please try again later.',
       );
@@ -91,12 +99,12 @@ const ModelDetailsPage: React.FC<ModelDetailsPageProps> = ({ tab }) => {
     }
 
     return modelRegistries.length === 0 ? (
-      registerButtonPopover(
+      registerButtonTooltip(
         'Request access to a model registry',
         'To request a new model registry, or to request permission to access an existing model registry, contact your administrator.',
       )
     ) : artifacts.items.length === 0 || !hasModelArtifacts(artifacts.items) ? (
-      registerButtonPopover('', 'Model location is unavailable')
+      registerButtonTooltip('', 'Model location is unavailable')
     ) : (
       <Button
         data-testid="register-model-button"