[ENG-9627] Project Overview: OSF Storage button does not have sufficient size or spacing. CenterForOpenScience#828

- Ticket: [ENG-9627]
- Feature flag: n/a

## Summary of Changes
1. Fixed accessibility issue with spacing.
2. Fixed accessibility issue with landmark.

Author: nsemets

src/app/core/components/layout/layout.component.html

@@ -1,4 +1,4 @@
-<div class="layout" [class.layout-desktop]="isWeb()" [class.layout-tablet]="!isWeb()">
+<main class="layout" [class.layout-desktop]="isWeb()" [class.layout-tablet]="!isWeb()">
   @if (isWeb()) {
     <osf-sidenav></osf-sidenav>
   }
@@ -19,7 +19,7 @@
 
     <osf-footer></osf-footer>
   </div>
-</div>
+</main>
 
 <p-confirm-dialog
   id="dialog"

src/app/features/project/overview/components/files-widget/files-widget.component.html

@@ -18,16 +18,14 @@ <h2>{{ 'project.overview.files.filesPreview' | translate }}</h2>
     <p-tabs [value]="currentRootFolder()?.folder?.id || ''" (valueChange)="onStorageChange($event)" scrollable>
       <p-tablist>
         @for (option of storageAddons(); track option.folder.id) {
-          <p-tab class="p-2" [value]="option.folder.id">
-            <p-button
-              severity="contrast"
-              variant="text"
-              [styleClass]="option.folder.id === currentRootFolder()?.folder?.id ? 'text-600' : 'text-500'"
-              [disabled]="isFilesLoading()"
-              [label]="option.label"
-              [raised]="option.folder.id === currentRootFolder()?.folder?.id"
+          <p-tab class="addon-tab p-2" [value]="option.folder.id" [disabled]="isFilesLoading()">
+            <div
+              class="addon-option border-round-lg font-bold"
+              [class.p-button-raised]="option.folder.id === currentRootFolder()?.folder?.id"
+              [class.selected]="option.folder.id === currentRootFolder()?.folder?.id"
             >
-            </p-button>
+              {{ option.label }}
+            </div>
           </p-tab>
         }
       </p-tablist>

src/app/features/project/overview/components/files-widget/files-widget.component.scss

@@ -2,3 +2,19 @@
   border: 1px solid var(--grey-2);
   border-radius: 0.75rem;
 }
+
+.addon-tab:hover {
+  .addon-option {
+    background-color: var(--grey-3);
+  }
+}
+
+.addon-option {
+  color: var(--grey-4);
+  line-height: 1.5rem;
+  padding: 0.625rem 1rem;
+
+  &.selected {
+    color: var(--dark-blue-1);
+  }
+}

src/app/features/project/overview/components/files-widget/files-widget.component.ts

@@ -2,7 +2,6 @@ import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
-import { Button } from 'primeng/button';
 import { Skeleton } from 'primeng/skeleton';
 import { TabsModule } from 'primeng/tabs';
 
@@ -45,7 +44,7 @@ import { ViewOnlyLinkHelperService } from '@osf/shared/services/view-only-link-h
 
 @Component({
   selector: 'osf-files-widget',
-  imports: [TranslatePipe, SelectComponent, TabsModule, FilesTreeComponent, Button, Skeleton],
+  imports: [TranslatePipe, SelectComponent, TabsModule, FilesTreeComponent, Skeleton],
   templateUrl: './files-widget.component.html',
   styleUrl: './files-widget.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/styles/_variables.scss

@@ -91,7 +91,7 @@ $base-font-size: 16px;
   --p-form-field-hover-border-color: var(--grey-1);
   --p-form-field-disabled-background: var(--white);
   --p-form-field-disabled-color: var(--grey-1);
-  --p-form-field-placeholder-color: var(--grey-1);
+  --p-form-field-placeholder-color: var(--grey-4);
   --p-list-option-color: var(--dark-blue-1);
   --p-list-option-focus-color: var(--dark-blue-1);
   --p-list-option-focus-background: var(--bg-blue-3);