diff --git a/projects/aca-content/src/lib/components/details/details.component.scss b/projects/aca-content/src/lib/components/details/details.component.scss index 873bfb1bc3..778bead773 100644 --- a/projects/aca-content/src/lib/components/details/details.component.scss +++ b/projects/aca-content/src/lib/components/details/details.component.scss @@ -5,6 +5,12 @@ app-details-manager { outline: none; border-radius: 4px; + &:focus { + background-color: var(--theme-selected-background-color); + outline: 2px solid var(--theme-blue-button-color); + border-radius: 4px; + } + &:focus-visible { outline: 2px solid var(--theme-blue-button-color); border-radius: 4px; diff --git a/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts b/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts index 5d3d51f2eb..d9dae1918c 100644 --- a/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts +++ b/projects/aca-content/src/lib/components/toolbar/toggle-info-drawer/toggle-info-drawer.component.ts @@ -44,9 +44,19 @@ import { MatIconModule } from '@angular/material/icon'; [attr.title]="'APP.ACTIONS.DETAILS' | translate" (click)="onClick()" > - menu_open + view_sidebar `, + styles: [ + ` + .app-toggle-info-drawer button:focus { + border: 2px solid var(--theme-blue-button-color); + border-radius: 6px; + outline: none; + background-color: var(--theme-selected-background-color); + } + ` + ], encapsulation: ViewEncapsulation.None, host: { class: 'app-toggle-info-drawer' } })