Skip to content

fix(core): Updated aria labels for ix-icon-buttons #2361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GayatriK2002 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

fix(core): Updated aria labels for ix-icon-buttons #2361

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88466ad
updated aria labels for ix-icon-buttons
GayatriK2002 Jan 27, 2026
7142400
extracted nested ternary operation into idependent statement in pane
GayatriK2002 Jan 27, 2026
a88cf30
Merge branch 'main' into fix-3846/calendar-icon-unknow-in-screen-reader
GayatriK2002 Jan 28, 2026
976069a
fixed complementary complementary reading for pane buttons
GayatriK2002 Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/angular/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1272,14 +1272,14 @@ export declare interface IxHelperText extends Components.IxHelperText {}


@ProxyCmp({
inputs: ['a11yLabel', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant']
inputs: ['a11yLabel', 'ariaLabelButton', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant']
})
@Component({
selector: 'ix-icon-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['a11yLabel', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant'],
inputs: ['a11yLabel', 'ariaLabelButton', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant'],
standalone: false
})
export class IxIconButton {
Expand Down
4 changes: 2 additions & 2 deletions packages/angular/standalone/src/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1373,14 +1373,14 @@ export declare interface IxHelperText extends Components.IxHelperText {}

@ProxyCmp({
defineCustomElementFn: defineIxIconButton,
inputs: ['a11yLabel', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant']
inputs: ['a11yLabel', 'ariaLabelButton', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant']
})
@Component({
selector: 'ix-icon-button',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['a11yLabel', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant'],
inputs: ['a11yLabel', 'ariaLabelButton', 'disabled', 'icon', 'iconColor', 'loading', 'oval', 'size', 'type', 'variant'],
})
export class IxIconButton {
protected el: HTMLIxIconButtonElement;
Expand Down
56 changes: 56 additions & 0 deletions packages/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -709,6 +709,7 @@ export namespace Components {
interface IxChip {
/**
* ARIA label for the close button Will be set as aria-label on the nested HTML button element
* @default 'Close chip'
*/
"ariaLabelCloseButton"?: string;
/**
Expand Down Expand Up @@ -968,14 +969,17 @@ export namespace Components {
/**
* ARIA label for the calendar icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Open calendar'
*/
"ariaLabelCalendarButton"?: string;
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -1103,10 +1107,12 @@ export namespace Components {
interface IxDatePicker {
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -1207,10 +1213,12 @@ export namespace Components {
interface IxDatetimePicker {
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -1294,6 +1302,7 @@ export namespace Components {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close drawer'
*/
"ariaLabelCloseButton"?: string;
/**
Expand Down Expand Up @@ -1409,6 +1418,7 @@ export namespace Components {
/**
* ARIA label for the dropdown button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Toggle dropdown'
*/
"ariaLabelDropdownButton"?: string;
/**
Expand Down Expand Up @@ -1578,16 +1588,19 @@ export namespace Components {
/**
* ARIA label for the clear icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Clear search'
*/
"ariaLabelClearIconButton"?: string;
/**
* ARIA label for the search icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Search'
*/
"ariaLabelSearchIconButton"?: string;
/**
* ARIA label for the search input Will be set as aria-label on the nested HTML input element
* @since 3.2.0
* @default 'Search input'
*/
"ariaLabelSearchInput"?: string;
/**
Expand Down Expand Up @@ -1859,6 +1872,12 @@ export namespace Components {
* @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0
*/
"a11yLabel"?: string;
/**
* ARIA label for the icon button Will be set as aria-label on the nested HTML button element Use this instead of the deprecated a11y-label or the native aria-label attribute
* @since 4.3.0
* @default null
*/
"ariaLabelButton": string | null;
/**
* Disabled
* @default false
Expand Down Expand Up @@ -2565,6 +2584,7 @@ export namespace Components {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close modal'
*/
"ariaLabelCloseIconButton"?: string;
/**
Expand Down Expand Up @@ -2712,11 +2732,13 @@ export namespace Components {
/**
* ARIA label for the chevron left icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Previous page'
*/
"ariaLabelChevronLeftIconButton"?: string;
/**
* ARIA label for the chevron right icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Next page'
*/
"ariaLabelChevronRightIconButton"?: string;
/**
Expand Down Expand Up @@ -2764,6 +2786,7 @@ export namespace Components {
interface IxPane {
/**
* ARIA label close or collapse button
* @default 'Toggle pane'
*/
"ariaLabelCollapseCloseButton"?: string;
/**
Expand Down Expand Up @@ -3089,6 +3112,7 @@ export namespace Components {
/**
* ARIA label for the clear icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Clear selection'
*/
"ariaLabelClearIconButton"?: string;
/**
Expand Down Expand Up @@ -3409,11 +3433,13 @@ export namespace Components {
/**
* ARIA label for the chevron left icon button
* @since 3.2.0
* @default 'Previous tab'
*/
"ariaLabelChevronLeftIconButton"?: string;
/**
* ARIA label for the chevron right icon button
* @since 3.2.0
* @default 'Next tab'
*/
"ariaLabelChevronRightIconButton"?: string;
/**
Expand Down Expand Up @@ -3804,6 +3830,7 @@ export namespace Components {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close toast'
*/
"ariaLabelCloseIconButton"?: string;
/**
Expand Down Expand Up @@ -4040,6 +4067,7 @@ export namespace Components {
interface IxTreeItem {
/**
* ARIA label for the chevron icon
* @default 'Toggle tree item'
*/
"ariaLabelChevronIcon"?: string;
/**
Expand Down Expand Up @@ -6654,6 +6682,7 @@ declare namespace LocalJSX {
interface IxChip {
/**
* ARIA label for the close button Will be set as aria-label on the nested HTML button element
* @default 'Close chip'
*/
"ariaLabelCloseButton"?: string;
/**
Expand Down Expand Up @@ -6921,14 +6950,17 @@ declare namespace LocalJSX {
/**
* ARIA label for the calendar icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Open calendar'
*/
"ariaLabelCalendarButton"?: string;
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -7051,10 +7083,12 @@ declare namespace LocalJSX {
interface IxDatePicker {
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -7163,10 +7197,12 @@ declare namespace LocalJSX {
interface IxDatetimePicker {
/**
* ARIA label for the next month icon button Will be set as aria-label on the nested HTML button element
* @default 'Next month'
*/
"ariaLabelNextMonthButton"?: string;
/**
* ARIA label for the previous month icon button Will be set as aria-label on the nested HTML button element
* @default 'Previous month'
*/
"ariaLabelPreviousMonthButton"?: string;
/**
Expand Down Expand Up @@ -7262,6 +7298,7 @@ declare namespace LocalJSX {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close drawer'
*/
"ariaLabelCloseButton"?: string;
/**
Expand Down Expand Up @@ -7379,6 +7416,7 @@ declare namespace LocalJSX {
/**
* ARIA label for the dropdown button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Toggle dropdown'
*/
"ariaLabelDropdownButton"?: string;
/**
Expand Down Expand Up @@ -7555,16 +7593,19 @@ declare namespace LocalJSX {
/**
* ARIA label for the clear icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Clear search'
*/
"ariaLabelClearIconButton"?: string;
/**
* ARIA label for the search icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Search'
*/
"ariaLabelSearchIconButton"?: string;
/**
* ARIA label for the search input Will be set as aria-label on the nested HTML input element
* @since 3.2.0
* @default 'Search input'
*/
"ariaLabelSearchInput"?: string;
/**
Expand Down Expand Up @@ -7865,6 +7906,12 @@ declare namespace LocalJSX {
* @deprecated Set the native `aria-label` on the ix-icon-button host element. Will be removed in 5.0.0
*/
"a11yLabel"?: string;
/**
* ARIA label for the icon button Will be set as aria-label on the nested HTML button element Use this instead of the deprecated a11y-label or the native aria-label attribute
* @since 4.3.0
* @default null
*/
"ariaLabelButton"?: string | null;
/**
* Disabled
* @default false
Expand Down Expand Up @@ -8618,6 +8665,7 @@ declare namespace LocalJSX {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close modal'
*/
"ariaLabelCloseIconButton"?: string;
/**
Expand Down Expand Up @@ -8767,11 +8815,13 @@ declare namespace LocalJSX {
/**
* ARIA label for the chevron left icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Previous page'
*/
"ariaLabelChevronLeftIconButton"?: string;
/**
* ARIA label for the chevron right icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Next page'
*/
"ariaLabelChevronRightIconButton"?: string;
/**
Expand Down Expand Up @@ -8827,6 +8877,7 @@ declare namespace LocalJSX {
interface IxPane {
/**
* ARIA label close or collapse button
* @default 'Toggle pane'
*/
"ariaLabelCollapseCloseButton"?: string;
/**
Expand Down Expand Up @@ -9176,6 +9227,7 @@ declare namespace LocalJSX {
/**
* ARIA label for the clear icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Clear selection'
*/
"ariaLabelClearIconButton"?: string;
/**
Expand Down Expand Up @@ -9506,11 +9558,13 @@ declare namespace LocalJSX {
/**
* ARIA label for the chevron left icon button
* @since 3.2.0
* @default 'Previous tab'
*/
"ariaLabelChevronLeftIconButton"?: string;
/**
* ARIA label for the chevron right icon button
* @since 3.2.0
* @default 'Next tab'
*/
"ariaLabelChevronRightIconButton"?: string;
/**
Expand Down Expand Up @@ -9902,6 +9956,7 @@ declare namespace LocalJSX {
/**
* ARIA label for the close icon button Will be set as aria-label on the nested HTML button element
* @since 3.2.0
* @default 'Close toast'
*/
"ariaLabelCloseIconButton"?: string;
/**
Expand Down Expand Up @@ -10141,6 +10196,7 @@ declare namespace LocalJSX {
interface IxTreeItem {
/**
* ARIA label for the chevron icon
* @default 'Toggle tree item'
*/
"ariaLabelChevronIcon"?: string;
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/chip/chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export class Chip {
* ARIA label for the close button
* Will be set as aria-label on the nested HTML button element
*/
@Prop() ariaLabelCloseButton?: string;
@Prop() ariaLabelCloseButton?: string = 'Close chip';

/**
* Fire event if close button is clicked
Expand All @@ -116,7 +116,7 @@ export class Chip {
this.closeChip.emit(event);
event.stopPropagation();
}}
aria-label={this.ariaLabelCloseButton}
ariaLabelButton={this.ariaLabelCloseButton}
></ix-icon-button>
</div>
);
Expand Down
Loading
Loading