Skip to content

Commit 67ae99a

Browse files
haoAddsearchhaoAddsearch
authored
Merge pull request #155 from AddSearch/sc-12778/improve-components-to-be-wcag-2.2-aa-compliant
Sc 12778/improve components to be wcag 2.2 aa compliant
2 parents 6ec28d2 + c957861 commit 67ae99a

33 files changed

+388
-112
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -509,8 +509,9 @@ searchui.filters({
509509
Settings that can be passed to the `filters` function:
510510

511511
| Key | Possible values | Default value | Description |
512-
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
512+
|---------------------| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |--------------------------------------------------------------------------------------------------------------------------------------------------------|
513513
| containerId | String | n/a | ID of the HTML element that will act as a container for filters |
514+
| label | String | n/a | Give label to filter group for better accessibility |
514515
| 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 |
515516
| template | String | n/a | Override the default template with a custom [Handlebars](https://handlebarsjs.com/) template |
516517
| clearOtherFilters | boolean | false | Clear all other filters when the value of this filter changes. Works with RADIO_GROUP, SELECT_LIST, and TABS filters |

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "addsearch-search-ui",
3-
"version": "0.9.10",
3+
"version": "0.10.0",
44
"description": "JavaScript library to develop Search UIs for the web",
55
"repository": {
66
"type": "git",

‎src/components/activefilters/activefilters.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -161,15 +161,16 @@ export default class ActiveFilters {
161161
}
162162

163163
handleFilterClick(e) {
164-
const type = e.target.getAttribute('data-type');
165-
const name = e.target.getAttribute('data-name');
166-
const value = e.target.getAttribute('data-value');
167-
const container = e.target.getAttribute('data-container');
168-
const confFields = e.target.getAttribute('data-conf-fields')
169-
? e.target.getAttribute('data-conf-fields').split(',')
164+
const targetButton = e.currentTarget;
165+
const type = targetButton.getAttribute('data-type');
166+
const name = targetButton.getAttribute('data-name');
167+
const value = targetButton.getAttribute('data-value');
168+
const container = targetButton.getAttribute('data-container');
169+
const confFields = targetButton.getAttribute('data-conf-fields')
170+
? targetButton.getAttribute('data-conf-fields').split(',')
170171
: [];
171-
const rangeMin = e.target.getAttribute('data-range-min');
172-
const rangeMax = e.target.getAttribute('data-range-max');
172+
const rangeMin = targetButton.getAttribute('data-range-min');
173+
const rangeMax = targetButton.getAttribute('data-range-max');
173174

174175
if (type === TYPE.FILTER) {
175176
this.reduxStore.dispatch(toggleFilter(name, value, true));

‎src/components/activefilters/activefilters.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
@import "../../variables";
22

33
.addsearch-active-filters {
4-
display: block;
54
display: flex;
65
flex-direction: row;
76
flex-wrap: wrap;
87
align-items: flex-start;
8+
9+
// Reset list styles for semantic <ul>
10+
ul {
11+
list-style: none;
12+
margin: 0;
13+
padding: 0;
14+
display: flex;
15+
flex-direction: row;
16+
flex-wrap: wrap;
17+
align-items: flex-start;
18+
width: 100%;
19+
}
20+
921
.item {
1022
display: inline-block;
1123
display: flex;

‎src/components/activefilters/precompile-templates/activefilters.handlebars‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
11
<div class="addsearch-active-filters">
2-
{{#each active}}
3-
<div class="item">
4-
<span>{{label}}</span>
5-
<button data-type="{{type}}" data-name="{{name}}" data-value="{{value}}"
6-
{{#if rangeMin}}data-range-min="{{rangeMin}}"{{/if}}
7-
{{#if rangeMax}}data-range-max="{{rangeMax}}"{{/if}}
8-
{{#if container}}data-container="{{container}}"{{/if}}
9-
{{#if confFields}}data-conf-fields="{{confFields}}"{{/if}} >&#215;</button>
10-
</div>
11-
{{/each}}
12-
{{#if clearAll}}
13-
{{#gt active.length 1}}
14-
<div class="item"><button data-clearall="true">Clear all</button></div>
15-
{{/gt}}
16-
{{/if}}
2+
<h3 class="addsearch-sr-only">Active filters</h3>
3+
<ul>
4+
{{#each active}}
5+
<li class="item">
6+
<span>{{label}}</span>
7+
<button aria-label="Remove {{label}} filter"
8+
data-type="{{type}}"
9+
data-name="{{name}}"
10+
data-value="{{value}}"
11+
{{#if rangeMin}}data-range-min="{{rangeMin}}"{{/if}}
12+
{{#if rangeMax}}data-range-max="{{rangeMax}}"{{/if}}
13+
{{#if container}}data-container="{{container}}"{{/if}}
14+
{{#if confFields}}data-conf-fields="{{confFields}}"{{/if}}>
15+
<span aria-hidden="true">&#215;</span>
16+
</button>
17+
</li>
18+
{{/each}}
19+
{{#if clearAll}}
20+
{{#gt active.length 1}}
21+
<li class="item">
22+
<button data-clearall="true" aria-label="Clear all active filters">Clear all</button>
23+
</li>
24+
{{/gt}}
25+
{{/if}}
26+
</ul>
1727
</div>

‎src/components/aianswersresult/aianswersresult.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export default class AiAnswersresult {
9292
answerContainer.style.maxHeight = `${answerContainer.scrollHeight}px`;
9393
showMoreBtn.style.display = 'flex';
9494
buttonText.textContent = 'Show less';
95+
showMoreBtn.setAttribute('aria-expanded', 'true');
9596

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

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

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

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

133137
chevron.style.transform = 'rotate(180deg)';

0 commit comments

Comments
 (0)