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
-                    <StyledButton
+                    ref={ref}
-                        ref={ref}
+                    onClick={disableButton ? undefined : onClick}
-                        onClick={onClick}
+                    aria-disabled={disableButton || undefined}
-                        disabled={disabled || !access}
+                    aria-labelledby={id}
-                        aria-labelledby={id}
+                    variant={variant}
-                        variant={variant}
+                    color={color}
-                        color={color}
+                    className={
-                        {...rest}
+                        disableButton ? `${className} Mui-disabled` : className
-                        endIcon={endIcon}
+                    }
-                    >
+                    {...rest}
-                        {children}
+                    endIcon={endIcon}
-                    </StyledButton>
+                >
-                </span>
+                    {children}
+                </StyledButton>
             </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,33 +73,31 @@ exports[`renders an empty list correctly 1`] = `
               <hr
                 className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
               />
-              <span>
+              <button
-                <button
+                aria-labelledby="useId-0"
-                  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-9qsbea-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-1ind840-MuiButtonBase-root-MuiButton-root"
+                disabled={false}
-                  disabled={false}
+                onBlur={[Function]}
-                  onBlur={[Function]}
+                onClick={[Function]}
-                  onClick={[Function]}
+                onContextMenu={[Function]}
-                  onContextMenu={[Function]}
+                onDragLeave={[Function]}
-                  onDragLeave={[Function]}
+                onFocus={[Function]}
-                  onFocus={[Function]}
+                onKeyDown={[Function]}
-                  onKeyDown={[Function]}
+                onKeyUp={[Function]}
-                  onKeyUp={[Function]}
+                onMouseDown={[Function]}
-                  onMouseDown={[Function]}
+                onMouseLeave={[Function]}
-                  onMouseLeave={[Function]}
+                onMouseUp={[Function]}
-                  onMouseUp={[Function]}
+                onTouchEnd={[Function]}
-                  onTouchEnd={[Function]}
+                onTouchMove={[Function]}
-                  onTouchMove={[Function]}
+                onTouchStart={[Function]}
-                  onTouchStart={[Function]}
+                tabIndex={0}
-                  tabIndex={0}
+                type="button"
-                  type="button"
+              >
-                >
+                New tag type
-                  New tag type
+                <span
-                  <span
+                  className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
-                  />
+              </button>
-                </button>
-              </span>
             </div>
           </div>
         </div>