Skip to content

Commit

Permalink
feat: button-dialog and data-view-controls accessibility (#509)
Browse files Browse the repository at this point in the history
* feat: button-dialog and data-view-controls accessibility

* fix: lint

* fix: tooltip instead of title

* fix: removed hoverevent for tooltip
  • Loading branch information
markuczy authored Sep 27, 2024
1 parent f54c93f commit 2adece9
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 12 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
[disabled]="primaryButtonDisabled$ | async"
[pTooltip]="dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null"
[tooltipPosition]="dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''"
[attr.aria-label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters"
></button>
</div>
<div>
Expand All @@ -28,6 +29,7 @@
[disabled]="secondaryButtonDisabled$ | async"
[pTooltip]="dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null"
[tooltipPosition]="dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''"
[attr.aria-label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters"
></button>
</div>
<div *ngFor="let button of rightCustomButtons">
Expand All @@ -52,5 +54,6 @@
[disabled]="resolveCustomButtonDisabled((customButtonsDisabled$ | async) ?? {}, button.id)"
[pTooltip]="button.tooltipKey ? (button.tooltipKey | translate) : null"
[tooltipPosition]="button.tooltipPosition ?? ''"
[attr.aria-label]="button.key | translate:button.parameters"
></button>
</ng-template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import { importProvidersFrom } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { Meta, applicationConfig, argsToTemplate, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'
import { StorybookTranslateModule } from '../../storybook-translate.module'
import { ButtonDialogComponent } from './button-dialog.component'
import { ButtonModule } from 'primeng/button'
import { PrimeIcons } from 'primeng/api'
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'

export default {
title: 'ButtonDialogComponent',
component: ButtonDialogComponent,
decorators: [
applicationConfig({
providers: [
importProvidersFrom(BrowserModule),
importProvidersFrom(BrowserAnimationsModule),
DynamicDialogConfig,
DynamicDialogRef,
],
}),
moduleMetadata({
declarations: [ButtonDialogComponent],
imports: [StorybookTranslateModule, ButtonModule],
}),
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
],
} as Meta<ButtonDialogComponent>

export const ButtonDialogWithInlineContentDefaultButtons = {
render: (args: any) => ({
props: {
...args,
},
template: `
<ocx-button-dialog>
<p>My message to display</p>
</ocx-button-dialog>
`,
}),
args: {},
}

export const ButtonDialogWithInlineContent = {
render: (args: any) => ({
props: {
...args,
},
template: `
<ocx-button-dialog ${argsToTemplate(args)}>
<p>My message to display</p>
</ocx-button-dialog>
`,
}),
args: {
config: {
primaryButtonDetails: {
key: 'KEY',
icon: PrimeIcons.BOOK,
},
secondaryButtonIncluded: true,
secondaryButtonDetails: {
key: 'Times',
icon: PrimeIcons.TIMES,
},
},
},
}

export const ButtonDialogWithCustomButtons = {
render: (args: any) => ({
props: {
...args,
},
template: `
<ocx-button-dialog ${argsToTemplate(args)}>
<p>My message to display</p>
</ocx-button-dialog>
`,
}),
args: {
config: {
primaryButtonDetails: {
key: 'KEY',
icon: PrimeIcons.BOOK,
},
secondaryButtonIncluded: true,
secondaryButtonDetails: {
key: 'Times',
icon: PrimeIcons.TIMES,
},
customButtons: [
{
id: 'custom-1',
alignment: 'left',
key: 'custom 1',
},
{
id: 'custom-2',
alignment: 'right',
key: 'custom 2',
},
],
},
},
}
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,10 @@ export class ButtonDialogComponent implements OnInit {
leftCustomButtons: ButtonDialogCustomButtonDetails[] = []
rightCustomButtons: ButtonDialogCustomButtonDetails[] = []

constructor(public dynamicDialogConfig: DynamicDialogConfig, public dynamicDialogRef: DynamicDialogRef) {}
constructor(
public dynamicDialogConfig: DynamicDialogConfig,
public dynamicDialogRef: DynamicDialogRef
) {}

ngOnInit(): void {
this.loadComponent()
Expand Down Expand Up @@ -179,6 +182,7 @@ export class ButtonDialogComponent implements OnInit {
this.dialogData.config.secondaryButtonDetails = this.config.secondaryButtonDetails
}
}
this.dialogData.config.customButtons = this.config.customButtons
this.setupCustomButtons(this.dialogData)
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
[responsive]="false"
[sourceStyle]="{ height: '300px' }"
[targetStyle]="{ height: '300px' }"
[upButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.UP' | translate)"
[topButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.TOP' | translate)"
[downButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.DOWN' | translate)"
[bottomButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.BOTTOM' | translate)"
[rightButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.RIGHT' | translate)"
[allRightButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_RIGHT' | translate)"
[leftButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.LEFT' | translate)"
[allLeftButtonAriaLabel]="('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.ARIA_LABELS.ALL_LEFT' | translate)"
(onMoveToTarget)="setInactive($event.items)"
(onMoveToSource)="setActive($event.items)"
(onMoveAllToTarget)="setInactive($event.items)"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,12 @@
*ngIf="viewingModes.length > 1"
[options]="viewingModes"
[(ngModel)]="selectedViewMode"
optionLabel="icon"
optionLabel="id"
(onChange)="viewModeChange($event.value)"
>
<ng-template let-item pTemplate>
<i [class]="item.icon" [title]="item.title || (item.titleKey | translate)"></i>
<i [class]="item.icon" [pTooltip]="item.tooltip || (item.tooltipKey | translate)" tooltipPosition="top"></i>
<label style="display: none" id="{{item.id}}">{{item.labelKey | translate}}</label>
</ng-template>
</p-selectButton>

Expand All @@ -27,7 +28,9 @@
type="button"
(click)="toggleColumns()"
pButton
[title]="translations?.toggleColumnButtonTooltip || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
[pTooltip]="translations?.toggleColumnButtonTooltip || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
tooltipPosition="top"
[attr.aria-label]="translations?.toggleColumnButtonTooltip || ('OCX_CUSTOM_GROUP_COLUMN_SELECTOR.OPEN_BUTTON_DETAIL' | translate)"
icon="pi pi-cog"
></button>
</div>
Expand All @@ -43,15 +46,19 @@
type="text"
class="search-filter-input data-view-control-border"
pInputText
[title]="translations?.filterInputTooltip || (filterColumns.length > 0 ? ('Filter by ' + filterColumns.join(', ')) : 'Filter')"
[pTooltip]="translations?.filterInputTooltip || (filterColumns.length > 0 ? ('Filter by ' + filterColumns.join(', ')) : 'Filter')"
tooltipPosition="top"
(input)="searchFilterInput($event)"
/>
<label for="data-view-control-filter">{{ translations?.filterInputPlaceholder || 'Filter' }}</label>
</span>
<span
tabindex="0"
id="data-view-control-filter_clear"
class="p-inputgroup-addon pseudo-button bg-primary data-view-control-border cursor-pointer"
(click)="onClearFilter()"
(keydown.enter)="onClearFilter()"
(keydown.space)="onClearFilter()"
>
<i class="pi pi-filter-slash"></i>
</span>
Expand All @@ -66,6 +73,7 @@
styleClass="data-view-control-border min-w-min w-7rem"
[options]="sortingOptions"
(onChange)="selectSorting($event)"
[ariaLabel]="('OCX_LIST_GRID_SORT.DROPDOWN.ARIA_LABEL' | translate)"
></p-dropdown>
<label for="data-view-control-sortby" class="white-space-nowrap"
>{{ translations?.sortDropdownTooltip || 'Sort by' }}</label
Expand All @@ -76,7 +84,9 @@
onIcon="pi pi-sort-amount-up"
offIcon="pi pi-sort-amount-down"
(onChange)="sortDirection($event)"
[title]="!selectedSortDirection ? (translations?.sortOrderTooltips?.ascending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE' | translate)) : (translations?.sortOrderTooltips?.descending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TITLE' | translate))"
[pTooltip]="!selectedSortDirection ? (translations?.sortOrderTooltips?.ascending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE' | translate)) : (translations?.sortOrderTooltips?.descending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TITLE' | translate))"
tooltipPosition="top"
[ariaLabel]="!selectedSortDirection ? (translations?.sortOrderTooltips?.ascending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.ASCENDING_TITLE' | translate)) : (translations?.sortOrderTooltips?.descending || ('OCX_LIST_GRID_SORT.TOGGLE_BUTTON.DESCENDING_TITLE' | translate))"
></p-toggleButton>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,35 @@ interface ViewingModes {
}

type ViewMode = {
id: string
icon: PrimeIcon
mode: string
titleKey: string
labelKey: string
tooltipKey: string
}

const ALL_VIEW_MODES: ViewMode[] = [
{ icon: PrimeIcons.LIST, mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' },
{ icon: PrimeIcons.TH_LARGE, mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' },
{ icon: PrimeIcons.TABLE, mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' },
{
id: 'ocx-data-layout-selection-list',
icon: PrimeIcons.LIST,
mode: 'list',
tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST',
labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST',
},
{
id: 'ocx-data-layout-selection-grid',
icon: PrimeIcons.TH_LARGE,
mode: 'grid',
tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID',
labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID',
},
{
id: 'ocx-data-layout-selection-table',
icon: PrimeIcons.TABLE,
mode: 'table',
tooltipKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE',
labelKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE',
},
]

interface DefaultColumnDefinition {
Expand Down Expand Up @@ -138,7 +158,7 @@ export class DataViewControlsComponent implements OnInit, OnChanges {
activeColumnIds: string[] = []
inactiveColumnIds: string[] = []
selectedSortingOption = ''
selectedSortDirection: boolean | undefined = false
selectedSortDirection: boolean | undefined = false

viewingModes: ViewingModes[] = []

Expand All @@ -153,7 +173,10 @@ export class DataViewControlsComponent implements OnInit, OnChanges {
disabled: [],
}

constructor(private dialogService: DialogService, private translate: TranslateService) {}
constructor(
private dialogService: DialogService,
private translate: TranslateService
) {}

ngOnInit(): void {
this.defaultCols = this.generateDefaultColumnDefinitions(this.columnDefinitions)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { importProvidersFrom } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { Meta, StoryFn, applicationConfig, moduleMetadata } from '@storybook/angular'
import { StorybookTranslateModule } from '../../storybook-translate.module'
import { LoadingIndicatorComponent } from './loading-indicator.component'

export default {
title: 'LoadaingIndicatorComponent',
component: LoadingIndicatorComponent,
decorators: [
applicationConfig({
providers: [importProvidersFrom(BrowserModule), importProvidersFrom(BrowserAnimationsModule)],
}),
moduleMetadata({
declarations: [LoadingIndicatorComponent],
imports: [StorybookTranslateModule],
}),
],
} as Meta<LoadingIndicatorComponent>

const Template: StoryFn<LoadingIndicatorComponent> = (args: LoadingIndicatorComponent) => ({
props: args,
})

export const Basic = {
render: Template,
args: {},
}
Loading

0 comments on commit 2adece9

Please sign in to comment.