Skip to content

Commit 3aa1f12

Browse files
sebastiansteinsebastianstein
committed
Merge branch 'master' into develop
2 parents a56e5f5 + 1485d95 commit 3aa1f12

32 files changed

Lines changed: 3530 additions & 1245 deletions

‎.project/data/fileadmin.tar.gz‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:f51d1a0bee704ab46d70857bdaeb0276d19f749f73268d1dddee78fc08c1fcca
3-
size 2096
2+
oid sha256:2e6636eb03e9421d563c2fb77c9a79d6f0654aff5738798107649c5bd43e9023
3+
size 3605

‎Resources/Private/Build/JavaScript/Frontend/components/filter.js‎

Lines changed: 314 additions & 32 deletions
Large diffs are not rendered by default.

‎Resources/Private/Build/JavaScript/Frontend/components/pagination.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ class Pagination {
4848
window.in2studyfinder.getInstance(instanceId).filter.call(targetPage);
4949
} else {
5050
LoaderUtility.enableLoader();
51+
// Announce loading to screen readers
52+
this.announceToScreenReader('loading');
5153

5254
fetch(url, {
5355
method: 'POST',
@@ -63,10 +65,71 @@ class Pagination {
6365

6466
LoaderUtility.disableLoader();
6567
window.in2studyfinder.getInstance(instanceId).update(this.studyfinderElement);
68+
69+
// Announce results update to screen readers
70+
this.announceResultsUpdate();
6671
});
6772
}
6873
};
6974

75+
/**
76+
* Announce loading or result changes to screen readers via aria-live region
77+
*
78+
* @param {string} messageType - Type of message: 'loading' or 'resultsUpdated'
79+
*/
80+
announceToScreenReader(messageType) {
81+
const feedbackElement = this.studyfinderElement.querySelector('#filter-feedback');
82+
if (!feedbackElement) return;
83+
84+
let message = '';
85+
const dataAttr = `data-${messageType.replace(/([A-Z])/g, '-$1').toLowerCase()}-text`;
86+
message = feedbackElement.getAttribute(dataAttr) || '';
87+
88+
// Clear first to ensure change detection
89+
feedbackElement.textContent = '';
90+
91+
// Use setTimeout to ensure the clear is processed before setting new text
92+
setTimeout(() => {
93+
feedbackElement.textContent = message;
94+
}, 100);
95+
}
96+
97+
/**
98+
* Announce results update with current page info to screen readers
99+
*/
100+
announceResultsUpdate() {
101+
const feedbackElement = this.studyfinderElement.querySelector('#filter-feedback');
102+
if (!feedbackElement) return;
103+
104+
// Get the count from the updated DOM
105+
const itemCountElement = this.studyfinderElement.querySelector('.in2studyfinder__item-count p');
106+
107+
if (itemCountElement) {
108+
const countText = itemCountElement.textContent.trim();
109+
const countMatch = countText.match(/^\d+/);
110+
111+
if (countMatch) {
112+
const count = parseInt(countMatch[0], 10);
113+
let message = '';
114+
115+
if (count === 1) {
116+
message = feedbackElement.getAttribute('data-results-count-single') || '';
117+
} else {
118+
const template = feedbackElement.getAttribute('data-results-count-multiple') || '';
119+
message = template.replace('%s', count);
120+
}
121+
122+
// Clear first to ensure change detection
123+
feedbackElement.textContent = '';
124+
125+
// Use setTimeout to ensure the clear is processed before setting new text
126+
setTimeout(() => {
127+
feedbackElement.textContent = message;
128+
}, 100);
129+
}
130+
}
131+
}
132+
70133
onClick() {
71134
}
72135
}

‎Resources/Private/Build/JavaScript/Frontend/components/quickselect.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@ class Quickselect {
1111
this.settings = {
1212
maxOptions: null,
1313
searchField: ['text', 'keywords'],
14+
onInitialize: function() {
15+
//get origin aria-label
16+
const originalSelect = this.input;
17+
const ariaLabel = originalSelect.getAttribute('aria-label');
18+
19+
if (ariaLabel) {
20+
// set aria-label to rendered input
21+
this.control_input.setAttribute('aria-label', ariaLabel);
22+
// set label to invisible input
23+
this.input.setAttribute('aria-label', ariaLabel);
24+
}
25+
},
1426
onDropdownOpen: function() {
1527
this.clear(); // prevents the "preselect" bug of firefox 106
1628
},

‎Resources/Private/Build/Sass/demo/_components.filter.scss‎

Lines changed: 56 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ fieldset {
9393
}
9494

9595
&__legend {
96-
cursor: pointer;
9796
float:left;
9897
font-size: 14px;
9998
font-weight: bold;
@@ -103,50 +102,69 @@ fieldset {
103102
display: block;
104103
width: 100%;
105104

106-
&:hover{
107-
&:before {
108-
background: $primaryColor;
109-
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
105+
&-button {
106+
background: none;
107+
border: none;
108+
padding: 4px 40px 4px 0;
109+
margin: 0;
110+
font: inherit;
111+
color: inherit;
112+
cursor: pointer;
113+
text-align: left;
114+
width: 100%;
115+
position: relative;
116+
117+
&:focus-visible {
118+
outline: 3px solid #0057FF;
119+
outline-offset: 2px;
120+
border-radius: 3px;
110121
}
111-
}
112-
113-
&:before {
114-
content: '';
115-
display: inline-block;
116-
position: absolute;
117-
top: 0;
118-
opacity: 1;
119-
border-radius: 50%;
120-
background: $lightgrey;
121-
height: 24px;
122-
width: 24px;
123-
right: -6px;
124-
transition: background .2s ease, box-shadow .2s ease;
125-
box-shadow: 0 2px 4px rgba(0,0,0,0);
126-
}
127122

128-
&:after {
129-
content: '+';
130-
color: $white;
131-
display: inline-block;
132-
position: absolute;
133-
top: 0;
134-
font-size: 1.5em;
135-
font-weight: normal;
136-
line-height: 1;
137-
height: 24px;
138-
width: 24px;
139-
right: -12px;
140-
}
123+
&:hover {
124+
&:before {
125+
background: $primaryColor;
126+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
127+
}
128+
}
141129

142-
&.opened {
143130
&:before {
144-
background: $primaryColor;
145-
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
131+
content: '';
132+
display: inline-block;
133+
position: absolute;
134+
top: 0;
135+
opacity: 1;
136+
border-radius: 50%;
137+
background: $lightgrey;
138+
height: 24px;
139+
width: 24px;
140+
right: 6px;
141+
transition: background .2s ease, box-shadow .2s ease;
142+
box-shadow: 0 2px 4px rgba(0,0,0,0);
146143
}
147144

148145
&:after {
149-
content: '–';
146+
content: '+';
147+
color: $white;
148+
display: inline-block;
149+
position: absolute;
150+
top: 0;
151+
font-size: 1.5em;
152+
font-weight: normal;
153+
line-height: 1;
154+
height: 24px;
155+
width: 24px;
156+
right: 0;
157+
}
158+
159+
&[aria-expanded="true"] {
160+
&:before {
161+
background: $primaryColor;
162+
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
163+
}
164+
165+
&:after {
166+
content: '–';
167+
}
150168
}
151169
}
152170
}

‎Resources/Private/Build/Sass/demo/_components.list.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,10 @@
3535
height: 17px;
3636

3737
&:focus + label {
38-
outline: $black solid 1px;
38+
outline: 2px solid $focusOutline;
39+
outline-offset: 1px;
40+
border-radius: 3px;
41+
transition: outline-color 0.2s ease-in-out;
3942
}
4043

4144
&:checked + .in2studyfinder__checkbox-label {
@@ -135,7 +138,7 @@
135138

136139
&__item-title{
137140
color: $primaryColor;
138-
font-size: 14px;
141+
font-size: 18px;
139142
font-weight: bold;
140143
margin-bottom: 0;
141144
text-transform: none;

‎Resources/Private/Build/Sass/demo/_components.pagination.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
.in2studyfinder {
66
&__pagebrowser {
77
margin: {
8-
top: 20px;
9-
bottom: 20px;
8+
top: 24px;
9+
bottom: 24px;
1010
};
1111
text-align: center;
1212
list-style: none;
@@ -21,7 +21,6 @@
2121
size: 18px;
2222
weight: bold;
2323
};
24-
margin-right: 15px;
2524

2625
&:hover {
2726
color: $primaryColor;
@@ -31,13 +30,13 @@
3130

3231
&__pagebrowser-page {
3332
&:last-child {
34-
margin-right: 0;
33+
margin-right: 24px;
3534
}
3635

3736
&.current {
3837
color: $primaryColor;
3938
font: {
40-
size: 18px;
39+
size: 22px;
4140
weight: bold;
4241
};
4342
}

‎Resources/Private/Build/Sass/demo/_settings.colors.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,6 @@ $grey: #aaaaaa;
1919
$lightgrey: #ddd;
2020
$verylightgrey: #eee;
2121

22-
$primaryColor: #4c0;
22+
$primaryColor: #0E5814;
23+
$focusOutline: #0057FF;
24+

‎Resources/Private/Build/Sass/demo/_settings.general.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,55 @@ a {
120120
}
121121
}
122122

123+
.skip-link {
124+
background: $primaryColor;
125+
color: $white;
126+
display: inline-block;
127+
top: -100px;
128+
left: 10px;
129+
opacity: 1;
130+
margin: 16px;
131+
padding: 0.8rem;
132+
position: fixed;
133+
text-decoration: underline;
134+
transition: top 0.3s ease-in-out;
135+
}
136+
137+
.skip-link:not([hidden]):focus {
138+
top: 10px;
139+
}
140+
141+
.skip-link[hidden] {
142+
display: none;
143+
}
144+
145+
/* tab focus styling*/
146+
147+
:where(a, button, [role="button"], input, select, textarea) {
148+
outline: none;
149+
}
150+
151+
:where(a, button, [tabindex], input, select, textarea):focus-visible {
152+
outline: 3px solid $focusOutline;
153+
outline-offset: 1px;
154+
border-radius: 3px;
155+
transition: outline-color 0.2s ease-in-out;
156+
}
157+
158+
/* Class for screenreader feedback*/
159+
.sr-only {
160+
position: absolute;
161+
width: 1px;
162+
height: 1px;
163+
padding: 0;
164+
margin: -1px;
165+
overflow: hidden;
166+
clip: rect(0,0,0,0);
167+
white-space: nowrap;
168+
}
169+
170+
171+
123172
/*
124173
Preformatted text
125174

0 commit comments

Comments
 (0)