Skip to content

Commit dfd85f0

Browse files
jean-guijean-gui
authored
Merge pull request #157 from w3c/feature/indent-description-list-dd
Restore default indentation of <dd> items within <dl>
2 parents d51dc0d + d8cac3b commit dfd85f0

File tree

9 files changed

+206
-113
lines changed

9 files changed

+206
-113
lines changed

‎assets-src/styles/sass/30-base/_lists.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ dl {
5555
font-weight: bold;
5656
}
5757

58+
dd {
59+
margin-inline-start: rem(40);
60+
}
61+
5862
dd + dt {
5963
margin-block-start: 0.5em;
6064
}
@@ -110,6 +114,7 @@ dl.grid {
110114
dd {
111115
grid-column-start: 2;
112116
grid-column-end: 3;
117+
margin-inline-start: 0;
113118
}
114119
}
115120
}

‎public/dist/assets/js/multiselect.js‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -151,15 +151,15 @@ const MultiselectButtons = function (selectEl, params) {
151151
selectEl.parentNode.appendChild(span);
152152

153153
// hide the original label/hint and create new ones for the new combobox
154-
const selectLabel = document.querySelector(`label[for=${selectEl.id}]`);
154+
const selectLabel = document.querySelector("label[for=".concat(selectEl.id, "]"));
155155
selectLabel.hidden = true;
156-
const selectHint = document.querySelector(`#hint-${selectEl.id}`);
156+
const selectHint = document.querySelector("#hint-".concat(selectEl.id));
157157
if (selectHint) {
158158
selectHint.hidden = true;
159159
}
160160
const div = document.createElement('div');
161161
div.classList.add('combo');
162-
div.id = `${selectEl.id}-js-multi-buttons`;
162+
div.id = "".concat(selectEl.id, "-js-multi-buttons");
163163
const divComboBox = document.createElement('div');
164164
divComboBox.setAttribute('role', 'combobox');
165165
divComboBox.setAttribute('aria-haspopup', 'listbox');
@@ -172,7 +172,7 @@ const MultiselectButtons = function (selectEl, params) {
172172
input.setAttribute('aria-controls', baseId + '-listbox');
173173
input.id = baseId + "-input";
174174
if (selectHint) {
175-
input.setAttribute('aria-describedby', `hint-${input.id}`);
175+
input.setAttribute('aria-describedby', "hint-".concat(input.id));
176176
}
177177
input.classList.add('combo-input');
178178
input.setAttribute('autocomplete', 'off');
@@ -191,7 +191,7 @@ const MultiselectButtons = function (selectEl, params) {
191191
const hintComboBox = selectHint ? selectHint.cloneNode(true) : null;
192192
if (selectHint) {
193193
hintComboBox.hidden = false;
194-
hintComboBox.id = `hint-${input.id}`;
194+
hintComboBox.id = "hint-".concat(input.id);
195195
}
196196
const ulCombo = document.createElement('ul');
197197
ulCombo.setAttribute('role', 'listbox');
@@ -248,12 +248,12 @@ const MultiselectButtons = function (selectEl, params) {
248248
const listItem = document.createElement('li');
249249
buttonEl.className = 'remove-option';
250250
buttonEl.type = 'button';
251-
buttonEl.id = `${this.idBase}-remove-${index}`;
251+
buttonEl.id = "".concat(this.idBase, "-remove-").concat(index);
252252
buttonEl.dataset.value = option.value;
253253
buttonEl.addEventListener('click', () => {
254254
this.removeOption(option);
255255
});
256-
buttonEl.innerHTML = `<span class="visuallyhidden">Remove </span>${option.text} `;
256+
buttonEl.innerHTML = "<span class=\"visuallyhidden\">Remove </span>".concat(option.text, " ");
257257
listItem.appendChild(buttonEl);
258258
this.selectedEl.appendChild(listItem);
259259
} else {
@@ -281,7 +281,7 @@ MultiselectButtons.prototype.init = function () {
281281
hint = document.createElement('li');
282282
hint.setAttribute('role', 'alert');
283283
}
284-
hint.innerText = `Please enter ${this.minInput} or more characters`;
284+
hint.innerText = "Please enter ".concat(this.minInput, " or more characters");
285285
if (!alreadyExists) {
286286
this.listboxEl.prepend(hint);
287287
}
@@ -320,7 +320,7 @@ MultiselectButtons.prototype.filterOptions = async function (value) {
320320
optionEl.setAttribute('aria-setsize', count);
321321
optionEl.setAttribute('aria-posinset', k + 1);
322322
}
323-
optionEl.id = `${this.idBase}-${this.options.indexOf(o)}`;
323+
optionEl.id = "".concat(this.idBase, "-").concat(this.options.indexOf(o));
324324
optionEl.className = 'combo-option';
325325
optionEl.setAttribute('aria-selected', alreadySelected);
326326
optionEl.dataset.value = o.value;
@@ -356,15 +356,15 @@ MultiselectButtons.prototype.filterOptions = async function (value) {
356356
};
357357
MultiselectButtons.prototype.updateResults = async function () {
358358
const url = new URL(this.source, window.location.protocol + '//' + window.location.host);
359-
url.search = `${url.search ? url.search + '&' : '?'}q=${this.inputEl.value}&page=${this.page}`;
359+
url.search = "".concat(url.search ? url.search + '&' : '?', "q=").concat(this.inputEl.value, "&page=").concat(this.page);
360360
const response = await fetch(url);
361361
const data = await response.json();
362362
if (this.page === 1) {
363363
this.options = [];
364364
}
365365
data.results.forEach(c => {
366366
this.ajaxResultCount = data.total;
367-
if (!this.select.querySelector(`option[value="${c.id}"]`)) {
367+
if (!this.select.querySelector("option[value=\"".concat(c.id, "\"]"))) {
368368
const o = document.createElement('option');
369369
o.value = c.id;
370370
o.innerText = c.text;
@@ -395,10 +395,11 @@ MultiselectButtons.prototype.onInput = async function () {
395395
await this.updateResults();
396396
hint.remove();
397397
} else {
398+
var _hint;
398399
this.clearOptions();
399-
hint ??= document.createElement('li');
400+
(_hint = hint) !== null && _hint !== void 0 ? _hint : hint = document.createElement('li');
400401
hint.setAttribute('role', 'alert');
401-
hint.innerText = `Please enter ${this.minInput} or more characters`;
402+
hint.innerText = "Please enter ".concat(this.minInput, " or more characters");
402403
this.listboxEl.prepend(hint);
403404
showHint = true;
404405
}
@@ -466,11 +467,11 @@ MultiselectButtons.prototype.onInputBlur = function () {
466467
};
467468
MultiselectButtons.prototype.onOptionChange = function (index) {
468469
this.activeIndex = index;
469-
this.inputEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);
470+
this.inputEl.setAttribute('aria-activedescendant', "".concat(this.idBase, "-").concat(index));
470471

471472
// update active style
472473
const options = this.el.querySelectorAll('[role=option]');
473-
const currentOptions = this.el.querySelector(`[id=${this.idBase}-${index}]`);
474+
const currentOptions = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]"));
474475
[...options].forEach(optionEl => {
475476
optionEl.classList.remove('option-current');
476477
});
@@ -501,15 +502,15 @@ MultiselectButtons.prototype.removeOption = function (option) {
501502
// const index = this.options.indexOf(option);
502503

503504
// update aria-selected
504-
const o = this.el.querySelector(`[data-value="${option.value}"]`);
505+
const o = this.el.querySelector("[data-value=\"".concat(option.value, "\"]"));
505506
if (o) {
506507
o.setAttribute('aria-selected', 'false');
507508
o.classList.remove('option-selected');
508509
}
509510

510511
// remove button
511512
if (this.selectedEl) {
512-
const buttonEl = this.selectedEl.querySelector(`[data-value="${option.value}"]`);
513+
const buttonEl = this.selectedEl.querySelector("[data-value=\"".concat(option.value, "\"]"));
513514
this.selectedEl.removeChild(buttonEl.parentElement);
514515
}
515516
this.select.querySelector('option[value="' + option.value + '"]').removeAttribute('selected');
@@ -520,7 +521,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
520521
this.activeIndex = index;
521522

522523
// update aria-selected
523-
const o = this.el.querySelector(`[id=${this.idBase}-${index}]`);
524+
const o = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]"));
524525
o.setAttribute('aria-selected', 'true');
525526
o.classList.add('option-selected');
526527

@@ -529,7 +530,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
529530
const listItem = document.createElement('li');
530531
buttonEl.className = 'remove-option';
531532
buttonEl.type = 'button';
532-
buttonEl.id = `${this.idBase}-remove-${index}`;
533+
buttonEl.id = "".concat(this.idBase, "-remove-").concat(index);
533534
buttonEl.dataset.value = selected.value;
534535
buttonEl.addEventListener('click', () => {
535536
const sibling = listItem.nextSibling;
@@ -540,7 +541,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
540541
this.inputEl.focus();
541542
}
542543
});
543-
buttonEl.innerHTML = `<span class="visuallyhidden">Remove </span> ${selected.text} `;
544+
buttonEl.innerHTML = "<span class=\"visuallyhidden\">Remove </span> ".concat(selected.text, " ");
544545
listItem.appendChild(buttonEl);
545546
if (this.select.multiple) {
546547
this.selectedEl.appendChild(listItem);
@@ -551,7 +552,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
551552
this.select.querySelector('option[value="' + option.value + '"]').setAttribute('selected', 'selected');
552553
};
553554
MultiselectButtons.prototype.updateOption = function (index) {
554-
const optionEl = this.el.querySelector(`[id=${this.idBase}-${index}]`);
555+
const optionEl = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]"));
555556
const isSelected = optionEl.getAttribute('aria-selected') === 'true';
556557
this.inputEl.value = '';
557558
if (isSelected) {
@@ -566,7 +567,7 @@ MultiselectButtons.prototype.updateOption = function (index) {
566567
};
567568
MultiselectButtons.prototype.updateMenuState = function (open) {
568569
this.open = open;
569-
this.comboEl.setAttribute('aria-expanded', `${open}`);
570+
this.comboEl.setAttribute('aria-expanded', "".concat(open));
570571
open ? this.el.classList.add('open') : this.el.classList.remove('open');
571572
};
572573
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MultiselectButtons);

‎public/dist/assets/js/multiselect.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/dist/assets/styles/advanced.css‎

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,8 @@ article {
158158
[data-trigger=account-menu] .sr-only, .visuallyhidden:not(:focus):not(:active) {
159159
border: 0;
160160
clip: rect(0 0 0 0);
161-
clip-path: inset(100%);
161+
-webkit-clip-path: inset(100%);
162+
clip-path: inset(100%);
162163
height: 1px;
163164
overflow: hidden;
164165
padding: 0;
@@ -225,7 +226,8 @@ br {
225226
}
226227
@media screen and (min-width: 70em) {
227228
[data-trigger=account-menu] {
228-
margin-inline-start: auto;
229+
-webkit-margin-start: auto;
230+
margin-inline-start: auto;
229231
padding: 0.5rem 0.1875rem 0.3125rem 0.1875rem;
230232
}
231233
[data-trigger=account-menu]:hover::before {
@@ -252,7 +254,8 @@ br {
252254
[data-trigger=account-menu] .sr-only {
253255
border: initial;
254256
clip: auto;
255-
clip-path: none;
257+
-webkit-clip-path: none;
258+
clip-path: none;
256259
height: auto;
257260
margin: initial;
258261
overflow: initial;
@@ -264,7 +267,8 @@ br {
264267
}
265268
@media screen and (min-width: 70em) {
266269
[data-trigger=account-menu] .avatar {
267-
margin-inline-start: 0.5rem;
270+
-webkit-margin-start: 0.5rem;
271+
margin-inline-start: 0.5rem;
268272
}
269273
}
270274

@@ -445,13 +449,16 @@ br {
445449
}
446450
}
447451
.global-nav__inner [data-trigger=sub-nav]::after {
448-
margin-inline-start: auto !important;
452+
-webkit-margin-start: auto !important;
453+
margin-inline-start: auto !important;
449454
transform: rotate(-45deg);
450455
}
451456
@media screen and (min-width: 70em) {
452457
.global-nav__inner [data-trigger=sub-nav]::after {
453-
margin-block-start: -0.1875rem;
454-
margin-inline-start: 0.5rem !important;
458+
-webkit-margin-before: -0.1875rem;
459+
margin-block-start: -0.1875rem;
460+
-webkit-margin-start: 0.5rem !important;
461+
margin-inline-start: 0.5rem !important;
455462
transform: rotate(45deg);
456463
}
457464
}
@@ -465,7 +472,8 @@ br {
465472
}
466473
@media screen and (min-width: 70em) {
467474
.global-nav__inner [data-trigger=sub-nav][aria-expanded=true]::after {
468-
margin-block-start: 0;
475+
-webkit-margin-before: 0;
476+
margin-block-start: 0;
469477
scale: -1;
470478
}
471479
}
@@ -475,7 +483,8 @@ br {
475483
}
476484
@media screen and (min-width: 70em) {
477485
[dir=rtl] .global-nav__inner [data-trigger=sub-nav]::after {
478-
margin-inline-start: 0.25rem;
486+
-webkit-margin-start: 0.25rem;
487+
margin-inline-start: 0.25rem;
479488
transform: rotate(45deg);
480489
}
481490
}
@@ -591,8 +600,10 @@ br {
591600
content: "";
592601
inline-size: 1rem;
593602
flex: 0 0 auto;
594-
margin-inline-end: 0.75rem;
595-
margin-inline-start: 0.375rem;
603+
-webkit-margin-end: 0.75rem;
604+
margin-inline-end: 0.75rem;
605+
-webkit-margin-start: 0.375rem;
606+
margin-inline-start: 0.375rem;
596607
transform: rotate(135deg);
597608
}
598609

@@ -647,8 +658,10 @@ br {
647658
content: "";
648659
flex: 0 0 auto;
649660
inline-size: 1rem;
650-
margin-block-start: 0.375rem;
651-
margin-inline-end: 1rem;
661+
-webkit-margin-before: 0.375rem;
662+
margin-block-start: 0.375rem;
663+
-webkit-margin-end: 1rem;
664+
margin-inline-end: 1rem;
652665
transform: rotate(-45deg);
653666
}
654667
}
@@ -702,8 +715,10 @@ br {
702715
border-width: 0 0.25rem 0.25rem 0;
703716
content: "";
704717
inline-size: 0.875rem;
705-
margin-block-start: 0.25rem;
706-
margin-inline-end: 0.125rem;
718+
-webkit-margin-before: 0.25rem;
719+
margin-block-start: 0.25rem;
720+
-webkit-margin-end: 0.125rem;
721+
margin-inline-end: 0.125rem;
707722
transform: rotate(45deg);
708723
}
709724
.js .component--collapsibles [data-heading=collapsibles] button:hover {
@@ -718,7 +733,8 @@ br {
718733
text-decoration: none;
719734
}
720735
.js .component--collapsibles [data-heading=collapsibles] button[aria-expanded=true]::after {
721-
margin-block-start: 0.625rem;
736+
-webkit-margin-before: 0.625rem;
737+
margin-block-start: 0.625rem;
722738
scale: -1;
723739
}
724740
.js .component--collapsibles [data-heading=collapsibles] + *[aria-hidden=true] {
@@ -866,9 +882,12 @@ br {
866882
border-width: 0 0.125rem 0.125rem 0;
867883
content: "";
868884
inline-size: 0.4375rem;
869-
margin-block-start: -0.1875rem;
870-
margin-inline-end: 0.1875rem;
871-
margin-inline-start: 0.75rem;
885+
-webkit-margin-before: -0.1875rem;
886+
margin-block-start: -0.1875rem;
887+
-webkit-margin-end: 0.1875rem;
888+
margin-inline-end: 0.1875rem;
889+
-webkit-margin-start: 0.75rem;
890+
margin-inline-start: 0.75rem;
872891
transform: rotate(45deg);
873892
}
874893
[data-toggle=true]:hover {
@@ -885,7 +904,8 @@ br {
885904
}
886905

887906
[data-toggle=true][aria-expanded=true]::after {
888-
margin-block-start: 0.25rem;
907+
-webkit-margin-before: 0.25rem;
908+
margin-block-start: 0.25rem;
889909
scale: -1;
890910
}
891911
[data-toggle=true][aria-expanded=true] + * {
@@ -917,7 +937,8 @@ br {
917937
}
918938

919939
#js-cancel-reply {
920-
margin-inline-start: 0.625rem;
940+
-webkit-margin-start: 0.625rem;
941+
margin-inline-start: 0.625rem;
921942
}
922943

923944
/*------------------------------------*\

‎public/dist/assets/styles/advanced.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)