mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-10-08 14:51:32 +00:00
[ADF-4865] Upload Dialog - row actions not accessible by keyboard alone (#5051)
* access upload dialog information by keyboard * upload files actions keyboard accessibility * aria labels translation keys * refractor styling * toggle action icons * update docs * e2e * e2e update action reference
This commit is contained in:
committed by
Eugenio Romano
parent
2360ccc6d5
commit
ef09b077c4
@@ -0,0 +1,62 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright 2019 Alfresco Software, Ltd.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Directive, HostListener } from '@angular/core';
|
||||
|
||||
@Directive({
|
||||
selector: '[adf-toggle-icon]',
|
||||
exportAs: 'toggleIcon'
|
||||
})
|
||||
export class ToggleIconDirective {
|
||||
private isFocus: boolean = false;
|
||||
private toggle: boolean = false;
|
||||
|
||||
@HostListener('mouseenter') onMouseEnter() {
|
||||
if (!this.isFocus) {
|
||||
this.toggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('mouseleave') onMouseLeave() {
|
||||
if (!this.isFocus) {
|
||||
this.toggle = false;
|
||||
}
|
||||
|
||||
if (this.isFocus && this.toggle) {
|
||||
this.isFocus = false;
|
||||
this.toggle = false;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('focus') onFocus() {
|
||||
this.isFocus = true;
|
||||
this.toggle = true;
|
||||
}
|
||||
|
||||
@HostListener('blur') onBlur() {
|
||||
this.isFocus = false;
|
||||
this.toggle = false;
|
||||
}
|
||||
|
||||
get isToggled(): boolean {
|
||||
return this.toggle;
|
||||
}
|
||||
|
||||
get isFocused(): boolean {
|
||||
return this.isFocus;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user