Fix icon only button accessibility
This commit is contained in:
parent
6922bcce45
commit
d6eb99edb2
|
@ -20,7 +20,10 @@
|
||||||
} @else {
|
} @else {
|
||||||
<my-notification-dropdown class="margin-button"></my-notification-dropdown>
|
<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
|
<div
|
||||||
class="logged-in-container" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
|
class="logged-in-container" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
@if (ptRouterLink || ptQueryParams) {
|
@if (ptRouterLink || ptQueryParams) {
|
||||||
<a
|
<a
|
||||||
class="action-button"
|
class="action-button"
|
||||||
[ngClass]="classes" [ngbTooltip]="title"
|
[ngClass]="classes" [ngbTooltip]="tooltip" [title]="title"
|
||||||
[routerLink]="ptRouterLink" [queryParams]="ptQueryParams" [queryParamsHandling]="ptQueryParamsHandling" [routerLinkActive]="ptRouterLinkActive"
|
[routerLink]="ptRouterLink" [queryParams]="ptQueryParams" [queryParamsHandling]="ptQueryParamsHandling" [routerLinkActive]="ptRouterLinkActive"
|
||||||
>
|
>
|
||||||
<ng-container *ngTemplateOutlet="content"></ng-container>
|
<ng-container *ngTemplateOutlet="content"></ng-container>
|
||||||
</a>
|
</a>
|
||||||
} @else {
|
} @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>
|
<ng-container *ngTemplateOutlet="content"></ng-container>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,6 +50,7 @@ export class ButtonComponent implements OnChanges, AfterViewInit {
|
||||||
@Input() ptRouterLinkActive = ''
|
@Input() ptRouterLinkActive = ''
|
||||||
|
|
||||||
@Input() title: string
|
@Input() title: string
|
||||||
|
@Input() tooltip: string
|
||||||
@Input({ transform: booleanAttribute }) active = false
|
@Input({ transform: booleanAttribute }) active = false
|
||||||
|
|
||||||
@Input({ transform: booleanAttribute }) loading = false
|
@Input({ transform: booleanAttribute }) loading = false
|
||||||
|
|
|
@ -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 }}
|
{{ label }}
|
||||||
</my-link>
|
</my-link>
|
||||||
|
|
Loading…
Reference in New Issue