Skip to content

Commit

Permalink
Merge pull request #13921 from eece/issue-13908
Browse files Browse the repository at this point in the history
fix(splitbutton): Accessibility does not appear to work as documented…
  • Loading branch information
cetincakiroglu authored Oct 25, 2023
2 parents 29bd828 + f91eee8 commit e5b282a
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 8 deletions.
15 changes: 15 additions & 0 deletions src/app/components/splitbutton/splitbutton.interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,18 @@ export interface SplitButtonTemplates {
*/
dropdownicon(): TemplateRef<any>;
}
/**
* Defines ButtonProps interface.
*/
export interface ButtonProps {
ariaLabel?: string;
}
/**
* Defines MenuButtonProps interface.
*/
export interface MenuButtonProps {
ariaLabel?: string;
ariaHasPopup?: boolean;
ariaExpanded?: boolean;
ariaControls?: string;
}
21 changes: 15 additions & 6 deletions src/app/components/splitbutton/splitbutton.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { ButtonModule } from 'primeng/button';
import { ChevronDownIcon } from 'primeng/icons/chevrondown';
import { TieredMenu, TieredMenuModule } from 'primeng/tieredmenu';
import { UniqueComponentId } from 'primeng/utils';
import { ButtonProps, MenuButtonProps } from './splitbutton.interface';

type SplitButtonIconPosition = 'left' | 'right';
/**
Expand All @@ -16,12 +17,12 @@ type SplitButtonIconPosition = 'left' | 'right';
template: `
<div #container [ngClass]="'p-splitbutton p-component'" [ngStyle]="style" [class]="styleClass">
<ng-container *ngIf="contentTemplate; else defaultButton">
<button class="p-splitbutton-defaultbutton" type="button" pButton [icon]="icon" [iconPos]="iconPos" (click)="onDefaultButtonClick($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-label]="label">
<button class="p-splitbutton-defaultbutton" type="button" pButton [icon]="icon" [iconPos]="iconPos" (click)="onDefaultButtonClick($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-label]="buttonProps?.['aria-label'] || label">
<ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
</button>
</ng-container>
<ng-template #defaultButton>
<button #defaultbtn class="p-splitbutton-defaultbutton" type="button" pButton [icon]="icon" [iconPos]="iconPos" [label]="label" (click)="onDefaultButtonClick($event)" [disabled]="disabled" [attr.tabindex]="tabindex"></button>
<button #defaultbtn class="p-splitbutton-defaultbutton" type="button" pButton [icon]="icon" [iconPos]="iconPos" [label]="label" (click)="onDefaultButtonClick($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.aria-label]="buttonProps?.['aria-label']"></button>
</ng-template>
<button
type="button"
Expand All @@ -30,10 +31,10 @@ type SplitButtonIconPosition = 'left' | 'right';
(click)="onDropdownButtonClick($event)"
(keydown)="onDropdownButtonKeydown($event)"
[disabled]="disabled"
[attr.aria-label]="expandAriaLabel"
[attr.aria-aria-haspopup]="true"
[attr.aria-expanded]="isExpanded()"
[attr.aria-controls]="ariaId"
[attr.aria-label]="menuButtonProps?.['aria-label'] || expandAriaLabel"
[attr.aria-aria-haspopup]="menuButtonProps?.['aria-haspopup'] || true"
[attr.aria-expanded]="menuButtonProps?.['aria-expanded'] || isExpanded()"
[attr.aria-controls]="menuButtonProps?.['aria-controls'] || ariaId"
>
<ChevronDownIcon *ngIf="!dropdownIconTemplate" />
<ng-template *ngTemplateOutlet="dropdownIconTemplate"></ng-template>
Expand Down Expand Up @@ -134,6 +135,14 @@ export class SplitButton {
* @group Props
*/
@Input() hideTransitionOptions: string = '.1s linear';
/**
* Button Props
*/
@Input() buttonProps: ButtonProps | undefined;
/**
* Menu Button Props
*/
@Input() menuButtonProps: MenuButtonProps | undefined;
/**
* Callback to invoke when default command button is clicked.
* @param {MouseEvent} event - Mouse event.
Expand Down
4 changes: 2 additions & 2 deletions src/app/showcase/doc/splitbutton/accessibilitydoc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -136,8 +136,8 @@ export class AccessibilityDoc {

code: Code = {
basic: `<p-splitButton
buttonProps="{'aria-label': 'Default Action'}"
menuButtonProps="{'aria-label': 'More Options'}"
[buttonProps]="{'aria-label': 'Default Action'}"
[menuButtonProps]="{'aria-label': 'More Options'}"
></p-splitButton>`
};
}

1 comment on commit e5b282a

@vercel
Copy link

@vercel vercel bot commented on e5b282a Oct 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.