Question
Coforge
GB
Last activity: 9 Jan 2025 10:11 EST
Customizing Aria-Labels for table filters to be unique to each column
In Pega, the aria-label for all table filters is currently set to 'Click to Filter,' making it the same for all filter icons. Because of this, Dragon users are unable to focus on the specific filter icon they want to use.
Can anyone suggest how to customize the aria-label to include the column name (e.g., 'Filter Case ID') so that each filter icon has a unique value corresponding to its column?
Thank you in advance
Accepted Solution
Updated: 9 Jan 2025 10:11 EST
Pegasystems Inc.
GB
To customize the aria-label for table filters to include the column name, follow these steps:
- Identify the Filter Icon Control: Locate the control or section where the filter icon is defined in your Pega application.
- Modify the aria-label Attribute: Update the aria-label attribute to dynamically include the column name. You can use a property reference to include the column name in the aria-label.
- Example Implementation: - Open the section or control rule where the table is defined. - Locate the filter icon element. - Update the aria-label attribute to include the column name. For example: <button aria-label="Filter {ColumnName}" ...>Filter</button> - Replace {ColumnName} with the appropriate property reference that holds the column name.
- Test the Changes: Ensure that the changes are correctly applied and that screen readers like Dragon can now distinguish between different filter icons based on the column name.
By following these steps, each filter icon will have a unique aria-label corresponding to its column, improving accessibility for screen reader users.
⚠ This is a GenAI-powered tool. All generated answers require validation against the provided references.
Pega Platform 8.5.1 Patch Resolved Issues
To customize the aria-label for table filters to include the column name, follow these steps:
- Identify the Filter Icon Control: Locate the control or section where the filter icon is defined in your Pega application.
- Modify the aria-label Attribute: Update the aria-label attribute to dynamically include the column name. You can use a property reference to include the column name in the aria-label.
- Example Implementation: - Open the section or control rule where the table is defined. - Locate the filter icon element. - Update the aria-label attribute to include the column name. For example: <button aria-label="Filter {ColumnName}" ...>Filter</button> - Replace {ColumnName} with the appropriate property reference that holds the column name.
- Test the Changes: Ensure that the changes are correctly applied and that screen readers like Dragon can now distinguish between different filter icons based on the column name.
By following these steps, each filter icon will have a unique aria-label corresponding to its column, improving accessibility for screen reader users.
⚠ This is a GenAI-powered tool. All generated answers require validation against the provided references.
Pega Platform 8.5.1 Patch Resolved Issues
Pega Platform 8.3.4 Patch Resolved Issues
Table column filter popup value doesn't showing properly
Accessible navigation in tables
Field Value not displayed in Table filter pop up after selecting Optimize code