chore: fix weird button styling (#10113)

frontend/src/component/admin/apiToken/CreateApiToken/CreateApiToken.test.tsx

@@ -41,7 +41,7 @@ test('Enabled new token button when limits, version and permission allow for it'
 
     await waitFor(async () => {
         const button = await screen.findByText('Create token');
-        expect(button).not.toBeDisabled();
+        expect(button).not.toHaveAttribute('aria-disabled');
     });
 });
 
@@ -54,5 +54,5 @@ test('Token limit reached', async () => {
     await screen.findByText('You have reached the limit for API tokens');
 
     const button = await screen.findByText('Create token');
-    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
 });

frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.test.tsx

@@ -57,6 +57,6 @@ test('should not allow you to create API tokens when you have reached the limit'
 
     await waitFor(async () => {
         const button = await screen.findByRole('button');
-        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute('aria-disabled', 'true');
     });
 });

frontend/src/component/common/PermissionButton/PermissionButton.tsx

@@ -15,6 +15,9 @@ import {
 const StyledButton = styled(Button)({
     justifySelf: 'start',
     alignSelf: 'start',
+    '&.Mui-disabled': {
+        pointerEvents: 'auto',
+    },
 });
 
 export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
@@ -96,10 +99,12 @@ const BasePermissionButton = React.forwardRef<
             environmentId,
             tooltipProps,
             hideLockIcon,
+            className,
             ...rest
         },
         ref,
     ) => {
+        const disableButton = disabled || !access;
         const id = useId();
         const endIcon = getEndIcon(access, rest.endIcon, hideLockIcon);
 
@@ -109,20 +114,21 @@ const BasePermissionButton = React.forwardRef<
                 title={formatAccessText(access, tooltipProps?.title)}
                 arrow
             >
-                <span>
                 <StyledButton
                     ref={ref}
-                        onClick={onClick}
+                    onClick={disableButton ? undefined : onClick}
-                        disabled={disabled || !access}
+                    aria-disabled={disableButton || undefined}
                     aria-labelledby={id}
                     variant={variant}
                     color={color}
+                    className={
+                        disableButton ? `${className} Mui-disabled` : className
+                    }
                     {...rest}
                     endIcon={endIcon}
                 >
                     {children}
                 </StyledButton>
-                </span>
             </TooltipResolver>
         );
     },

frontend/src/component/environments/CreateEnvironment/CreateEnvironment.test.tsx

@@ -31,7 +31,7 @@ test('show limit reached info', async () => {
     const createButton = await screen.findByText('Create environment', {
         selector: 'button',
     });
-    expect(createButton).toBeDisabled();
+    expect(createButton).toHaveAttribute('aria-disabled', 'true');
 });
 
 test('show approaching limit info', async () => {

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.test.tsx

@@ -61,6 +61,6 @@ describe('FeatureOverviewEnvironment', () => {
         );
 
         const button = await screen.findByText('Add strategy');
-        expect(button).toBeDisabled();
+        expect(button).toHaveAttribute('aria-disabled', 'true');
     });
 });

frontend/src/component/featureTypes/FeatureTypeEdit/FeatureTypeForm/FeatureTypeForm.test.tsx

@@ -29,7 +29,10 @@ describe('FeatureTypeForm', () => {
         );
         expect(screen.getByLabelText('Expected lifetime')).toBeDisabled();
         expect(screen.getByLabelText("doesn't expire")).toBeDisabled();
-        expect(screen.getByText('Save feature flag type')).toBeDisabled();
+        expect(screen.getByText('Save feature flag type')).toHaveAttribute(
+            'aria-disabled',
+            'true',
+        );
     });
 
     it('should check "doesn\'t expire" when lifetime is 0', () => {
@@ -87,6 +90,9 @@ describe('FeatureTypeForm', () => {
                 loading={false}
             />,
         );
-        expect(screen.getByText('Save feature flag type')).toBeDisabled();
+        expect(screen.getByText('Save feature flag type')).toHaveAttribute(
+            'aria-disabled',
+            'true',
+        );
     });
 });

frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.test.tsx

@@ -46,5 +46,5 @@ test('Project limit reached', async () => {
     const button = await screen.findByRole('button', {
         name: 'Create project',
     });
-    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
 });

frontend/src/component/project/Project/Import/Import.test.tsx

@@ -148,5 +148,5 @@ test('Show validation errors', async () => {
     await screen.findByText('itemF');
 
     const importButton = screen.getByText('Import configuration');
-    expect(importButton).toBeDisabled();
+    expect(importButton).toHaveAttribute('aria-disabled', 'true');
 });

frontend/src/component/project/ProjectList/ProjectList.test.tsx

@@ -26,10 +26,10 @@ test('Enabled new project button when version and permission allow for it and li
     });
 
     const button = await screen.findByText('New project');
-    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
 
     await waitFor(async () => {
         const button = await screen.findByText('New project');
-        expect(button).not.toBeDisabled();
+        expect(button).not.toHaveAttribute('aria-disabled', 'true');
     });
 });

frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap

@@ -73,10 +73,9 @@ exports[`renders an empty list correctly 1`] = `
               <hr
                 className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
               />
-              <span>
               <button
                 aria-labelledby="useId-0"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1ind840-MuiButtonBase-root-MuiButton-root"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-9qsbea-MuiButtonBase-root-MuiButton-root"
                 disabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -99,7 +98,6 @@ exports[`renders an empty list correctly 1`] = `
                   className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
               </button>
-              </span>
             </div>
           </div>
         </div>