Skip to content

Sc 12778/improve components to be wcag 2.2 aa compliant #155

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

Merged
merged 12 commits into from
Oct 23, 2025
Merged

Sc 12778/improve components to be wcag 2.2 aa compliant #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
39927b7
[sc-12778] add meaningful aria-label and role to svg images
haoAddsearch Oct 14, 2025
b008e66
[sc-12778] implement ARIA attributes for activeFilters, autocomplete,…
haoAddsearch Oct 15, 2025
a9b3654
[sc-12778] implement live-region for searchResults component
haoAddsearch Oct 15, 2025
81539bf
[sc-12778] fix activeFilters remove handler
haoAddsearch Oct 15, 2025
a547b39
[sc-12778] add labels (configurable) in filter groups
haoAddsearch Oct 15, 2025
415d505
[sc-12778] add label and focus indicator to sortby component
haoAddsearch Oct 15, 2025
bfa77b7
[sc-12778] refine DOM structure hierarchy & Interactive elements expo…
haoAddsearch Oct 15, 2025
14e4a39
[sc-12778] resolve CodeRabbit comments
haoAddsearch Oct 16, 2025
3109afc
[sc-12778] resolve SonarCloud issues
haoAddsearch Oct 16, 2025
eff77c6
[sc-12778] resolve PR's comments
haoAddsearch Oct 23, 2025
1dd00bb
Increase version 0.10.0
haoAddsearch Oct 23, 2025
c957861
[sc-12778] rename helper "validateOpenState" to "isCollapsed", make c…
haoAddsearch Oct 23, 2025
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
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,8 +509,9 @@ searchui.filters({
Settings that can be passed to the `filters` function:

| Key | Possible values | Default value | Description |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|---------------------| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------|
| containerId | String | n/a | ID of the HTML element that will act as a container for filters |
| label | String | n/a | Give label to filter group for better accessibility |
| type | AddSearchUI.FILTER_TYPE.CHECKBOX_GROUP, AddSearchUI.FILTER_TYPE.RADIO_GROUP, AddSearchUI.FILTER_TYPE.SELECT_LIST, AddSearchUI.FILTER_TYPE.TABS, AddSearchUI.FILTER_TYPE.TAGS, AddSearchUI.FILTER_TYPE.RANGE | n/a | Component's type |
| template | String | n/a | Override the default template with a custom [Handlebars](https://handlebarsjs.com/) template |
| clearOtherFilters | boolean | false | Clear all other filters when the value of this filter changes. Works with RADIO_GROUP, SELECT_LIST, and TABS filters |
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "addsearch-search-ui",
"version": "0.9.10",
"version": "0.10.0",
"description": "JavaScript library to develop Search UIs for the web",
"repository": {
"type": "git",
Expand Down
17 changes: 9 additions & 8 deletions src/components/activefilters/activefilters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,16 @@ export default class ActiveFilters {
}

handleFilterClick(e) {
const type = e.target.getAttribute('data-type');
const name = e.target.getAttribute('data-name');
const value = e.target.getAttribute('data-value');
const container = e.target.getAttribute('data-container');
const confFields = e.target.getAttribute('data-conf-fields')
? e.target.getAttribute('data-conf-fields').split(',')
const targetButton = e.currentTarget;
const type = targetButton.getAttribute('data-type');
const name = targetButton.getAttribute('data-name');
const value = targetButton.getAttribute('data-value');
const container = targetButton.getAttribute('data-container');
const confFields = targetButton.getAttribute('data-conf-fields')
? targetButton.getAttribute('data-conf-fields').split(',')
: [];
const rangeMin = e.target.getAttribute('data-range-min');
const rangeMax = e.target.getAttribute('data-range-max');
const rangeMin = targetButton.getAttribute('data-range-min');
const rangeMax = targetButton.getAttribute('data-range-max');

if (type === TYPE.FILTER) {
this.reduxStore.dispatch(toggleFilter(name, value, true));
Expand Down
14 changes: 13 additions & 1 deletion src/components/activefilters/activefilters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
@import "../../variables";

.addsearch-active-filters {
display: block;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;

// Reset list styles for semantic <ul>
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
}

.item {
display: inline-block;
display: flex;
Expand Down
40 changes: 25 additions & 15 deletions src/components/activefilters/precompile-templates/activefilters.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
<div class="addsearch-active-filters">
{{#each active}}
<div class="item">
<span>{{label}}</span>
<button data-type="{{type}}" data-name="{{name}}" data-value="{{value}}"
{{#if rangeMin}}data-range-min="{{rangeMin}}"{{/if}}
{{#if rangeMax}}data-range-max="{{rangeMax}}"{{/if}}
{{#if container}}data-container="{{container}}"{{/if}}
{{#if confFields}}data-conf-fields="{{confFields}}"{{/if}} >&#215;</button>
</div>
{{/each}}
{{#if clearAll}}
{{#gt active.length 1}}
<div class="item"><button data-clearall="true">Clear all</button></div>
{{/gt}}
{{/if}}
<h3 class="addsearch-sr-only">Active filters</h3>
<ul>
{{#each active}}
<li class="item">
<span>{{label}}</span>
<button aria-label="Remove {{label}} filter"
data-type="{{type}}"
data-name="{{name}}"
data-value="{{value}}"
{{#if rangeMin}}data-range-min="{{rangeMin}}"{{/if}}
{{#if rangeMax}}data-range-max="{{rangeMax}}"{{/if}}
{{#if container}}data-container="{{container}}"{{/if}}
{{#if confFields}}data-conf-fields="{{confFields}}"{{/if}}>
<span aria-hidden="true">&#215;</span>
</button>
</li>
{{/each}}
{{#if clearAll}}
{{#gt active.length 1}}
<li class="item">
<button data-clearall="true" aria-label="Clear all active filters">Clear all</button>
</li>
{{/gt}}
{{/if}}
</ul>
</div>
4 changes: 4 additions & 0 deletions src/components/aianswersresult/aianswersresult.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export default class AiAnswersresult {
answerContainer.style.maxHeight = `${answerContainer.scrollHeight}px`;
showMoreBtn.style.display = 'flex';
buttonText.textContent = 'Show less';
showMoreBtn.setAttribute('aria-expanded', 'true');

fadeOutOverlay.style.display = 'none';
chevron.style.transform = 'rotate(180deg)';
Expand All @@ -101,6 +102,7 @@ export default class AiAnswersresult {
if (answerContainer.scrollHeight > this.answerMaxHeight) {
// Only show "show more" button if the answer is longer than the max height
showMoreBtn.style.display = 'flex';
showMoreBtn.setAttribute('aria-expanded', 'false');
fadeOutOverlay.style.display = 'block';
} else {
showMoreBtn.style.display = 'none';
Expand All @@ -117,6 +119,7 @@ export default class AiAnswersresult {

answerContainer.style.maxHeight = `${this.answerMaxHeight}px`;
buttonText.textContent = 'Show more';
showMoreBtn.setAttribute('aria-expanded', 'false');
fadeOutOverlay.style.display = 'block';

chevron.style.transform = '';
Expand All @@ -128,6 +131,7 @@ export default class AiAnswersresult {

answerContainer.style.maxHeight = `${answerContainer.scrollHeight}px`;
buttonText.textContent = 'Show less';
showMoreBtn.setAttribute('aria-expanded', 'true');
fadeOutOverlay.style.display = 'none';

chevron.style.transform = 'rotate(180deg)';
Expand Down
Loading