Fix icon only button accessibility

This commit is contained in:
Chocobozzz 2024-11-25 11:29:18 +01:00
parent 6922bcce45
commit d6eb99edb2
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
4 changed files with 14 additions and 4 deletions

View File

@ -20,7 +20,10 @@
} @else {
<my-notification-dropdown class="margin-button"></my-notification-dropdown>
<my-button theme="tertiary" rounded="true" class="margin-button" icon="cog" ptRouterLink="/my-account"></my-button>
<my-button
i18n-title title="Go to the manage your account page"
theme="tertiary" rounded="true" class="margin-button" icon="cog" ptRouterLink="/my-account"
></my-button>
<div
class="logged-in-container" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"

View File

@ -1,13 +1,13 @@
@if (ptRouterLink || ptQueryParams) {
<a
class="action-button"
[ngClass]="classes" [ngbTooltip]="title"
[ngClass]="classes" [ngbTooltip]="tooltip" [title]="title"
[routerLink]="ptRouterLink" [queryParams]="ptQueryParams" [queryParamsHandling]="ptQueryParamsHandling" [routerLinkActive]="ptRouterLinkActive"
>
<ng-container *ngTemplateOutlet="content"></ng-container>
</a>
} @else {
<button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="title">
<button type="button" class="action-button" [ngClass]="classes" [disabled]="disabled" [ngbTooltip]="tooltip" [title]="title">
<ng-container *ngTemplateOutlet="content"></ng-container>
</button>
}

View File

@ -50,6 +50,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
@Input() ptRouterLinkActive = ''
@Input() title: string
@Input() tooltip: string
@Input({ transform: booleanAttribute }) active = false
@Input({ transform: booleanAttribute }) loading = false

View File

@ -1,3 +1,9 @@
<my-link class="d-flex" internalLink="/login" [href]="getExternalLoginHref()" [className]="className" [icon]="icon ? 'sign-in' : undefined">
<my-link
i18n-title title="Go to the login page"
class="d-flex"
internalLink="/login" [href]="getExternalLoginHref()"
[className]="className"
[icon]="icon ? 'sign-in' : undefined"
>
{{ label }}
</my-link>