[ACS-10239] Add aria hidden to visual separators (#5007)

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -33,7 +33,7 @@
               {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.INHERIT_RULES' | translate }}
             </mat-slide-toggle>
 
-            <mat-divider vertical class="aca-manage-rules__actions-bar__vertical-divider" />
+            <mat-divider vertical class="aca-manage-rules__actions-bar__vertical-divider" aria-hidden="true" />
 
             <div class="aca-manage-rules__actions-bar__buttons">
               <button
@@ -54,7 +54,7 @@
             </div>
 
           </mat-toolbar>
-          <mat-divider />
+          <mat-divider aria-hidden="true" />
 
           <div class="aca-manage-rules__container" *ngIf="isMainRuleSetNotEmpty || isInheritedRuleSetsNotEmpty; else emptyContent">
             <aca-rule-list

projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html

@@ -14,7 +14,7 @@
     </ng-container>
 
     <ng-container *ngSwitchCase="'separator'">
-      <mat-divider />
+      <mat-divider aria-hidden="true" />
     </ng-container>
 
     <ng-container *ngSwitchCase="'custom'">

projects/aca-content/src/lib/components/context-menu/context-menu.component.html

@@ -11,7 +11,7 @@
       </ng-container>
 
       <ng-container *ngSwitchCase="'separator'">
-        <mat-divider />
+        <mat-divider aria-hidden="true" />
       </ng-container>
 
       <ng-container *ngSwitchCase="'menu'">

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-input-container/search-ai-input-container.component.html

@@ -5,6 +5,7 @@
   [usedInAiResultsPage]="usedInAiResultsPage" />
 <mat-divider
   [vertical]="true"
+  aria-hidden="true"
   class="aca-search-ai-input-container-divider" />
 <button
   mat-icon-button

projects/aca-content/src/lib/components/knowledge-retrieval/search-ai/search-ai-results/search-ai-results.component.html

@@ -45,7 +45,7 @@
               <mat-icon>copy</mat-icon>
             </button>
             <ng-container *ngIf="nodes?.length">
-              <mat-divider class="aca-search-ai-response-container-body-divider" />
+              <mat-divider class="aca-search-ai-response-container-body-divider" aria-hidden="true" />
               <div class="aca-search-ai-response-container-body-references-container">
                 <p class="aca-search-ai-response-container-body-references-container-header">
                   {{ 'KNOWLEDGE_RETRIEVAL.SEARCH.RESULTS_PAGE.REFERENCED_DOCUMENTS_HEADER' | translate }}

projects/aca-content/src/lib/components/search/search-results/search-results.component.html

@@ -19,7 +19,7 @@
               <p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
               <adf-search-form />
             </div>
-            <mat-divider [vertical]="true" class="aca-content__divider" />
+            <mat-divider [vertical]="true" class="aca-content__divider" aria-hidden="true" />
             <div class="aca-content__advanced-filters">
               <div class="aca-content__advanced-filters--header">
                 <p>{{ 'APP.BROWSE.SEARCH.ADVANCED_FILTERS' | translate }}</p>

projects/aca-content/src/lib/components/view-profile/view-profile.component.html

@@ -63,18 +63,18 @@
       }
     </div>
     @if (generalSectionDropdown) {
-      <mat-divider class="app-divider" />
+      <mat-divider class="app-divider" aria-hidden="true" />
       <div class="app-general-dropdown">
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
           <p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
           <p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -92,7 +92,7 @@
               id="app-view-profile-job-title">
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -110,7 +110,7 @@
               id="app-view-profile-location">
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -135,7 +135,7 @@
             </mat-error>
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -205,7 +205,7 @@
       }
     </div>
     @if (contactSectionDropdown) {
-      <mat-divider class="app-divider" />
+      <mat-divider class="app-divider" aria-hidden="true" />
       <div class="app-general-dropdown">
         <div class="app-general-dropdown-details">
           <label
@@ -224,7 +224,7 @@
               id="app-view-profile-company-name">
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -242,7 +242,7 @@
               id="app-view-profile-company-address">
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -260,7 +260,7 @@
               id="app-view-profile-company-post-code">
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"
@@ -284,7 +284,7 @@
             </mat-error>
           }
         </div>
-        <mat-divider class="app-general-dropdown-divider" />
+        <mat-divider class="app-general-dropdown-divider" aria-hidden="true" />
         <div class="app-general-dropdown-details">
           <label
             class="app-profile-general-dropdown-heading"

projects/aca-content/src/lib/dialogs/folder-details/folder-information.component.html

@@ -2,33 +2,33 @@
   <adf-icon value="folder" class="aca-folder-icon" fontSet="material-icons"/>
   <div class="aca-folder-title" data-automation-id="folder-info-name">{{ folderDetails.name }}</div>
 </div>
-<mat-divider/>
+<mat-divider aria-hidden="true"/>
 <div class="aca-folder-info-body">
   <div class="aca-folder-info-item">
     <div class="aca-folder-info-item-label">{{ 'APP.FOLDER_INFO.NUMBER_OF_FILES' | translate }}</div>
     <div class="aca-folder-info-item-value"
          data-automation-id="folder-info-number-of-files">{{ folderDetails.numberOfFiles }}</div>
   </div>
-  <mat-divider/>
+  <mat-divider aria-hidden="true"/>
   <div class="aca-folder-info-item">
     <div class="aca-folder-info-item-label">{{ 'APP.FOLDER_INFO.SIZE' | translate }}</div>
     <div class="aca-folder-info-item-value"
          data-automation-id="folder-info-size">{{ folderDetails.size }}</div>
   </div>
-  <mat-divider/>
+  <mat-divider aria-hidden="true"/>
   <div class="aca-folder-info-item">
     <div class="aca-folder-info-item-label">{{ 'APP.FOLDER_INFO.LOCATION' | translate }}</div>
     <div class="aca-folder-info-item-value"
          data-automation-id="folder-info-location">{{ folderDetails.location }}</div>
   </div>
-  <mat-divider/>
+  <mat-divider aria-hidden="true"/>
   <div class="aca-folder-info-item">
     <div class="aca-folder-info-item-label">{{ 'APP.FOLDER_INFO.CREATED' | translate }}</div>
     <div class="aca-folder-info-item-value"
          data-automation-id="folder-info-creation-date"
          [title]="folderDetails.created | adfLocalizedDate">{{ folderDetails.created | adfTimeAgo }}</div>
   </div>
-  <mat-divider/>
+  <mat-divider aria-hidden="true"/>
   <div class="aca-folder-info-item">
     <div class="aca-folder-info-item-label">{{ 'APP.FOLDER_INFO.MODIFIED' | translate }}</div>
     <div class="aca-folder-info-item-value"

projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -13,7 +13,7 @@
   </ng-container>
 
   <ng-container *ngSwitchCase="'separator'">
-    <mat-divider />
+    <mat-divider aria-hidden="true" />
   </ng-container>
 
   <ng-container *ngSwitchCase="'custom'">