Melhorias de acessibilidade e ajustes na tela inicial e ícones

dgadelha · Apr 30, 2024 · a5d14c7 · a5d14c7
1 parent 27ed328
commit a5d14c7
Show file tree

Hide file tree

Showing 29 changed files with 256 additions and 141 deletions.
diff --git a/angular.json b/angular.json
@@ -70,6 +70,11 @@
                 "input": "packages/ide/src/public/",
                 "output": "/"
               },
+              {
+                "glob": "*.svg",
+                "input": "./node_modules/@mdi/svg/svg/",
+                "output": "./assets/mdi/"
+              },
               "packages/ide/src/favicon.ico",
               "packages/ide/src/assets"
             ],

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ide/package.json b/packages/ide/package.json
@@ -40,7 +40,9 @@
     "@angular/platform-browser": "^17.3.3",
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
+    "@fontsource/lato": "^5.0.21",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
+    "@mdi/svg": "^7.4.47",
     "@portugol-webstudio/antlr": "*",
     "@portugol-webstudio/parser": "*",
     "@portugol-webstudio/resources": "*",

diff --git a/packages/ide/src/app/app.component.html b/packages/ide/src/app/app.component.html
@@ -14,11 +14,9 @@
   <mat-tab>
     <ng-template mat-tab-label>
       <span class="tab-icon">
-        <img
-          src="https://raw.githubusercontent.com/UNIVALI-LITE/Portugol-Studio/master/ide/src/main/resources/br/univali/ps/ui/icones/Dark/pequeno/light_pix.png"
-          alt="Ícone do Portugol"
-        />
+        <svg-icon src="assets/lightbulb.svg" svgClass="text-primary cap-my-height" svgAriaLabel="Ícone do Portugol" />
       </span>
+
       <span class="tab-text">Portugol Webstudio</span>
     </ng-template>
 
@@ -29,25 +27,37 @@
     <ng-template mat-tab-label>
       <span>
         <span class="tab-icon" [ngSwitch]="tab.type">
-          <svg-icon *ngSwitchCase="'editor'" src="assets/icon-file.svg"></svg-icon>
-          <svg-icon *ngSwitchCase="'help'" src="assets/icon-help-circle-outline.svg"></svg-icon>
+          <svg-icon *ngSwitchCase="'editor'" src="assets/mdi/file.svg" svgAriaLabel="Ícone de arquivo" />
+          <svg-icon
+            *ngSwitchCase="'help'"
+            src="assets/mdi/help-circle-outline.svg"
+            svgClass="text-quaternary"
+            svgAriaLabel="Ícone de ajuda"
+          />
         </span>
 
         <span class="tab-text">{{ tab.title }}</span>
       </span>
 
       <span class="tab-actions">
-        <button mat-icon-button matTooltip="Renomear aba" (click)="changeTabTitle(tab)" *ngIf="tab.type === 'editor'">
-          <mat-icon>drive_file_rename_outline</mat-icon>
+        <button
+          mat-icon-button
+          aria-label="Renomear aba"
+          matTooltip="Renomear aba"
+          (click)="changeTabTitle(tab)"
+          *ngIf="tab.type === 'editor'"
+        >
+          <svg-icon src="assets/mdi/rename-outline.svg" svgAriaLabel="Ícone de renomear aba" />
         </button>
 
         <button
           mat-icon-button
+          aria-label="Fechar aba"
           matTooltip="Fechar aba"
           (click)="closeTab(tab)"
           [style]="tab.type === 'editor' ? { marginLeft: 0 } : {}"
         >
-          <mat-icon>close</mat-icon>
+          <svg-icon src="assets/mdi/close.svg" svgAriaLabel="Ícone de fechar aba" />
         </button>
       </span>
     </ng-template>
@@ -66,8 +76,14 @@
 
   <mat-tab disabled>
     <ng-template mat-tab-label class="tab-add">
-      <button class="add-button" mat-icon-button matTooltip="Nova aba de editor de código" (click)="addTab()">
-        <mat-icon>add</mat-icon>
+      <button
+        class="add-button"
+        mat-icon-button
+        aria-label="Nova aba de editor de código"
+        matTooltip="Nova aba de editor de código"
+        (click)="addTab()"
+      >
+        <svg-icon src="assets/mdi/plus.svg" svgAriaLabel="Ícone de adicionar aba" />
       </button>
     </ng-template>
   </mat-tab>

diff --git a/packages/ide/src/app/app.component.scss b/packages/ide/src/app/app.component.scss
@@ -48,6 +48,8 @@
     justify-content: flex-start;
     min-width: 0;
     font-family: $font;
+    -webkit-user-select: none;
+    -moz-user-select: none;
     user-select: none;
 
     .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
@@ -97,7 +99,9 @@
       }
 
       &.mat-mdc-tab-disabled {
-        .mdc-tab__content, .mat-mdc-tab-ripple, .mdc-tab__ripple::before {
+        .mdc-tab__content,
+        .mat-mdc-tab-ripple,
+        .mdc-tab__ripple::before {
           pointer-events: all;
         }
       }
@@ -111,15 +115,8 @@
         $size: 30px;
         width: $size;
         height: $size;
-        line-height: $size;
-
-        .mat-icon {
-          $isize: $size - 10px;
-          width: $isize;
-          height: $isize;
-          font-size: $isize;
-          line-height: $isize;
-        }
+        line-height: 0;
+        --mdc-icon-button-icon-size: 20px;
       }
     }
 
@@ -148,7 +145,8 @@
       justify-content: center;
       width: 1rem;
       margin-right: 0.5rem;
-      fill: $foreground-300;
+      color: $foreground-300;
+      fill: currentColor;
     }
 
     .tab-text {
@@ -171,3 +169,7 @@
     }
   }
 }
+
+.cap-my-height {
+  height: 1.15rem;
+}
diff --git a/packages/ide/src/app/app.component.ts b/packages/ide/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { OnInit, Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { Storage, getBlob, ref } from "@angular/fire/storage";
 import { FormControl } from "@angular/forms";
 import { MatSnackBar } from "@angular/material/snack-bar";

diff --git a/packages/ide/src/app/app.module.ts b/packages/ide/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { HttpClientModule } from "@angular/common/http";
 import { APP_INITIALIZER, ErrorHandler, NgModule } from "@angular/core";
-import { provideFirebaseApp, initializeApp } from "@angular/fire/app";
+import { initializeApp, provideFirebaseApp } from "@angular/fire/app";
 import { getStorage, provideStorage } from "@angular/fire/storage";
 import { FormsModule } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
@@ -21,13 +21,13 @@ import { AngularSvgIconModule } from "angular-svg-icon";
 import { KeyboardShortcutsModule } from "ng-keyboard-shortcuts";
 import { NgxGoogleAnalyticsModule } from "ngx-google-analytics";
 
+import { environment } from "../environments/environment";
 import { AppComponent } from "./app.component";
 import { DialogOpenExampleComponent } from "./dialog-open-example/dialog-open-example.component";
 import { MonacoService } from "./monaco.service";
 import { TabEditorComponent } from "./tab-editor/tab-editor.component";
 import { TabHelpComponent } from "./tab-help/tab-help.component";
 import { TabStartComponent } from "./tab-start/tab-start.component";
-import { environment } from "../environments/environment";
 
 @NgModule({
   declarations: [AppComponent, TabEditorComponent, TabStartComponent, TabHelpComponent, DialogOpenExampleComponent],

diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.html
@@ -1,7 +1,9 @@
 <header mat-dialog-title>
   <span>Abrir Exemplo…</span>
   <s></s>
-  <button tabindex="-1" mat-dialog-close mat-icon-button><mat-icon>close</mat-icon></button>
+  <button tabindex="-1" mat-dialog-close mat-icon-button aria-label="Fechar diálogo">
+    <svg-icon src="assets/mdi/close.svg" svgAriaLabel="Ícone de fechar diálogo" />
+  </button>
 </header>
 
 <main mat-dialog-content [ngSwitch]="loading">
@@ -14,18 +16,32 @@
             <mat-tree-node *matTreeNodeDef="let node">
               <li mat-ripple (click)="loadItem(node)" [class.active]="current?.id === node.id">
                 <button mat-icon-button disabled title="Expandir/retrair">
-                  <mat-icon></mat-icon>
+                  <svg-icon />
                 </button>
                 <span>{{ node.name }}</span>
               </li>
             </mat-tree-node>
 
             <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
               <li matTreeNodeToggle>
-                <button tabindex="-1" mat-icon-button matTreeNodeToggle>
-                  <mat-icon class="mat-icon-rtl-mirror">
-                    {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
-                  </mat-icon>
+                <button
+                  tabindex="-1"
+                  mat-icon-button
+                  matTreeNodeToggle
+                  [ngSwitch]="treeControl.isExpanded(node)"
+                  aria-label="Expandir/retrair conteúdo da pasta"
+                >
+                  <svg-icon
+                    *ngSwitchCase="true"
+                    src="assets/mdi/chevron-down.svg"
+                    svgAriaLabel="Ícone de seta para baixo indicando o conteúdo expandido"
+                  />
+
+                  <svg-icon
+                    *ngSwitchCase="false"
+                    src="assets/mdi/chevron-right.svg"
+                    svgAriaLabel="Ícone de seta para direita indicando o conteúdo recolhido"
+                  />
                 </button>
 
                 <span>{{ node.name }}</span>

diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.scss
@@ -36,6 +36,8 @@ ul {
   padding-left: 1rem;
   padding-right: 1rem;
   box-sizing: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
 
   li {

diff --git a/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts b/packages/ide/src/app/dialog-open-example/dialog-open-example.component.ts
@@ -1,6 +1,6 @@
 import { NestedTreeControl } from "@angular/cdk/tree";
 import { HttpClient } from "@angular/common/http";
-import { AfterViewInit, OnDestroy, OnInit, Component, EventEmitter, Output } from "@angular/core";
+import { AfterViewInit, Component, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
 import { MatTreeNestedDataSource } from "@angular/material/tree";
 import { Subscription, retry } from "rxjs";
 

diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.html b/packages/ide/src/app/tab-editor/tab-editor.component.html
@@ -9,7 +9,7 @@
     [disabled]="executor.running || transpiling"
     title="Iniciar execução"
   >
-    <svg-icon src="assets/icon-start.svg"></svg-icon>
+    <svg-icon src="assets/icon-start.svg" svgAriaLabel="Ícone de iniciar execução" />
   </button>
 
   <button
@@ -20,17 +20,30 @@
     [disabled]="!executor.running && !transpiling"
     title="Parar execução"
   >
-    <svg-icon src="assets/icon-stop.svg"></svg-icon>
+    <svg-icon
+      src="assets/mdi/square-rounded-outline.svg"
+      svgClass="text-tertiary"
+      svgAriaLabel="Ícone de parar execução"
+    />
   </button>
 
   <div class="sidebar-divider"></div>
 
   <button mat-ripple type="button" class="sidebar-button" (click)="saveFile()" title="Salvar arquivo">
-    <svg-icon src="assets/icon-file-save.svg"></svg-icon>
+    <svg-icon
+      src="assets/mdi/content-save-outline.svg"
+      svgClass="text-quaternary"
+      svgAriaLabel="Ícone de disquete para ação de salvar arquivo"
+    />
   </button>
 
   <button mat-ripple type="button" class="sidebar-button" (click)="fileInput.click()" title="Abrir arquivo">
-    <svg-icon src="assets/icon-file-open.svg"></svg-icon>
+    <svg-icon
+      src="assets/mdi/folder-open-outline.svg"
+      svgClass="text-primary"
+      svgAriaLabel="Ícone de pasta para ação de abrir arquivo"
+    />
+
     <input #fileInput type="file" hidden accept=".por,text/plain" (change)="openFile($event)" />
   </button>
 
@@ -42,13 +55,17 @@
     (click)="shareFile()"
     title="Compartilhar código"
   >
-    <svg-icon src="assets/icon-share.svg"></svg-icon>
+    <svg-icon
+      src="assets/mdi/share-variant-outline.svg"
+      svgClass="text-secondary"
+      svgAriaLabel="Ícone de compartilhar código"
+    />
   </button>
 
   <div class="sidebar-divider"></div>
 
   <button mat-ripple type="button" class="sidebar-button" (click)="openHelp()" title="Abrir seção de Ajuda">
-    <svg-icon src="assets/icon-help-circle-outline.svg"></svg-icon>
+    <svg-icon src="assets/mdi/help-circle-outline.svg" svgClass="text-quaternary" svgAriaLabel="Ícone de ajuda" />
   </button>
 </div>
 

diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.scss b/packages/ide/src/app/tab-editor/tab-editor.component.scss
@@ -63,7 +63,8 @@
   }
 }
 
-.sidebar-button svg {
+.sidebar-button svg,
+.sidebar-button svg-icon {
   width: 1.5rem;
   height: 1.5rem;
   fill: currentColor;

diff --git a/packages/ide/src/app/tab-editor/tab-editor.component.ts b/packages/ide/src/app/tab-editor/tab-editor.component.ts
@@ -1,15 +1,15 @@
 import {
-  ElementRef,
-  OnDestroy,
-  OnInit,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
+  OnDestroy,
+  OnInit,
   Output,
   TemplateRef,
   ViewChild,
 } from "@angular/core";
-import { Storage, uploadString, ref } from "@angular/fire/storage";
+import { Storage, ref, uploadString } from "@angular/fire/storage";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { PortugolCodeError } from "@portugol-webstudio/antlr";
 import { PortugolExecutor, PortugolWebWorkersRunner } from "@portugol-webstudio/runner";