Skip to content

Commit

Permalink
Merge pull request #162 from w3c/hotfix/spacing-and-bullets
Browse files Browse the repository at this point in the history 
Hotfix/spacing and bullets
  • Loading branch information
@jean-gui
jean-gui authored Nov 5, 2024
2 parents f0d0a79 + eab36f2 commit d51dc0d
Show file tree
Hide file tree
Showing 13 changed files with 114 additions and 178 deletions.
2 changes: 1 addition & 1 deletion assets-src/js/multiselect-module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ const MultiselectButtons = function (selectEl, params) {
ulCombo.setAttribute('aria-multiselectable', 'true');
ulCombo.id = baseId + '-listbox';
ulCombo.setAttribute('aria-labelledby', baseId + '-label');
ulCombo.classList.add('combo-menu');
ulCombo.classList.add('combo-menu', 'clean-list');

div.appendChild(divComboBox);
div.appendChild(ulCombo);
Expand Down
2 changes: 1 addition & 1 deletion assets-src/js/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ let contentSlider = (function () {
function createControls() {

let controls = document.createElement('ul');
controls.setAttribute('class', 'slider-controls');
controls.setAttribute('class', 'clean-list slider-controls');
controls.setAttribute('aria-label', controlsDescription);
controls.innerHTML = '<li><button class="button button--ghost js-previous with-icon--larger" aria-label="' + previousSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>'
+ '<li style="margin-top:0;margin-inline-start:0.25rem;"><button class="button button--ghost js-next with-icon--larger" aria-label="' + nextSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>';
Expand Down
4 changes: 4 additions & 0 deletions assets-src/styles/sass/50-core-components/_evangelists.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@
padding-right: rem(24);
}

.l-box {
padding: rem(24);
}

li + li {
border-top: solid 1px #649bc5;
}
Expand Down
47 changes: 23 additions & 24 deletions public/dist/assets/js/multiselect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,15 @@ const MultiselectButtons = function (selectEl, params) {
selectEl.parentNode.appendChild(span);

// hide the original label/hint and create new ones for the new combobox
const selectLabel = document.querySelector("label[for=".concat(selectEl.id, "]"));
const selectLabel = document.querySelector(`label[for=${selectEl.id}]`);
selectLabel.hidden = true;
const selectHint = document.querySelector("#hint-".concat(selectEl.id));
const selectHint = document.querySelector(`#hint-${selectEl.id}`);
if (selectHint) {
selectHint.hidden = true;
}
const div = document.createElement('div');
div.classList.add('combo');
div.id = "".concat(selectEl.id, "-js-multi-buttons");
div.id = `${selectEl.id}-js-multi-buttons`;
const divComboBox = document.createElement('div');
divComboBox.setAttribute('role', 'combobox');
divComboBox.setAttribute('aria-haspopup', 'listbox');
Expand All @@ -172,7 +172,7 @@ const MultiselectButtons = function (selectEl, params) {
input.setAttribute('aria-controls', baseId + '-listbox');
input.id = baseId + "-input";
if (selectHint) {
input.setAttribute('aria-describedby', "hint-".concat(input.id));
input.setAttribute('aria-describedby', `hint-${input.id}`);
}
input.classList.add('combo-input');
input.setAttribute('autocomplete', 'off');
Expand All @@ -191,14 +191,14 @@ const MultiselectButtons = function (selectEl, params) {
const hintComboBox = selectHint ? selectHint.cloneNode(true) : null;
if (selectHint) {
hintComboBox.hidden = false;
hintComboBox.id = "hint-".concat(input.id);
hintComboBox.id = `hint-${input.id}`;
}
const ulCombo = document.createElement('ul');
ulCombo.setAttribute('role', 'listbox');
ulCombo.setAttribute('aria-multiselectable', 'true');
ulCombo.id = baseId + '-listbox';
ulCombo.setAttribute('aria-labelledby', baseId + '-label');
ulCombo.classList.add('combo-menu');
ulCombo.classList.add('combo-menu', 'clean-list');
div.appendChild(divComboBox);
div.appendChild(ulCombo);
if (selectEl.multiple) {
Expand Down Expand Up @@ -248,12 +248,12 @@ const MultiselectButtons = function (selectEl, params) {
const listItem = document.createElement('li');
buttonEl.className = 'remove-option';
buttonEl.type = 'button';
buttonEl.id = "".concat(this.idBase, "-remove-").concat(index);
buttonEl.id = `${this.idBase}-remove-${index}`;
buttonEl.dataset.value = option.value;
buttonEl.addEventListener('click', () => {
this.removeOption(option);
});
buttonEl.innerHTML = "<span class=\"visuallyhidden\">Remove </span>".concat(option.text, " ");
buttonEl.innerHTML = `<span class="visuallyhidden">Remove </span>${option.text} `;
listItem.appendChild(buttonEl);
this.selectedEl.appendChild(listItem);
} else {
Expand Down Expand Up @@ -281,7 +281,7 @@ MultiselectButtons.prototype.init = function () {
hint = document.createElement('li');
hint.setAttribute('role', 'alert');
}
hint.innerText = "Please enter ".concat(this.minInput, " or more characters");
hint.innerText = `Please enter ${this.minInput} or more characters`;
if (!alreadyExists) {
this.listboxEl.prepend(hint);
}
Expand Down Expand Up @@ -320,7 +320,7 @@ MultiselectButtons.prototype.filterOptions = async function (value) {
optionEl.setAttribute('aria-setsize', count);
optionEl.setAttribute('aria-posinset', k + 1);
}
optionEl.id = "".concat(this.idBase, "-").concat(this.options.indexOf(o));
optionEl.id = `${this.idBase}-${this.options.indexOf(o)}`;
optionEl.className = 'combo-option';
optionEl.setAttribute('aria-selected', alreadySelected);
optionEl.dataset.value = o.value;
Expand Down Expand Up @@ -356,15 +356,15 @@ MultiselectButtons.prototype.filterOptions = async function (value) {
};
MultiselectButtons.prototype.updateResults = async function () {
const url = new URL(this.source, window.location.protocol + '//' + window.location.host);
url.search = "".concat(url.search ? url.search + '&' : '?', "q=").concat(this.inputEl.value, "&page=").concat(this.page);
url.search = `${url.search ? url.search + '&' : '?'}q=${this.inputEl.value}&page=${this.page}`;
const response = await fetch(url);
const data = await response.json();
if (this.page === 1) {
this.options = [];
}
data.results.forEach(c => {
this.ajaxResultCount = data.total;
if (!this.select.querySelector("option[value=\"".concat(c.id, "\"]"))) {
if (!this.select.querySelector(`option[value="${c.id}"]`)) {
const o = document.createElement('option');
o.value = c.id;
o.innerText = c.text;
Expand Down Expand Up @@ -395,11 +395,10 @@ MultiselectButtons.prototype.onInput = async function () {
await this.updateResults();
hint.remove();
} else {
var _hint;
this.clearOptions();
(_hint = hint) !== null && _hint !== void 0 ? _hint : hint = document.createElement('li');
hint ??= document.createElement('li');
hint.setAttribute('role', 'alert');
hint.innerText = "Please enter ".concat(this.minInput, " or more characters");
hint.innerText = `Please enter ${this.minInput} or more characters`;
this.listboxEl.prepend(hint);
showHint = true;
}
Expand Down Expand Up @@ -467,11 +466,11 @@ MultiselectButtons.prototype.onInputBlur = function () {
};
MultiselectButtons.prototype.onOptionChange = function (index) {
this.activeIndex = index;
this.inputEl.setAttribute('aria-activedescendant', "".concat(this.idBase, "-").concat(index));
this.inputEl.setAttribute('aria-activedescendant', `${this.idBase}-${index}`);

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

// update aria-selected
const o = this.el.querySelector("[data-value=\"".concat(option.value, "\"]"));
const o = this.el.querySelector(`[data-value="${option.value}"]`);
if (o) {
o.setAttribute('aria-selected', 'false');
o.classList.remove('option-selected');
}

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

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

Expand All @@ -530,7 +529,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
const listItem = document.createElement('li');
buttonEl.className = 'remove-option';
buttonEl.type = 'button';
buttonEl.id = "".concat(this.idBase, "-remove-").concat(index);
buttonEl.id = `${this.idBase}-remove-${index}`;
buttonEl.dataset.value = selected.value;
buttonEl.addEventListener('click', () => {
const sibling = listItem.nextSibling;
Expand All @@ -541,7 +540,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
this.inputEl.focus();
}
});
buttonEl.innerHTML = "<span class=\"visuallyhidden\">Remove </span> ".concat(selected.text, " ");
buttonEl.innerHTML = `<span class="visuallyhidden">Remove </span> ${selected.text} `;
listItem.appendChild(buttonEl);
if (this.select.multiple) {
this.selectedEl.appendChild(listItem);
Expand All @@ -552,7 +551,7 @@ MultiselectButtons.prototype.selectOption = function (option) {
this.select.querySelector('option[value="' + option.value + '"]').setAttribute('selected', 'selected');
};
MultiselectButtons.prototype.updateOption = function (index) {
const optionEl = this.el.querySelector("[id=".concat(this.idBase, "-").concat(index, "]"));
const optionEl = this.el.querySelector(`[id=${this.idBase}-${index}]`);
const isSelected = optionEl.getAttribute('aria-selected') === 'true';
this.inputEl.value = '';
if (isSelected) {
Expand All @@ -567,7 +566,7 @@ MultiselectButtons.prototype.updateOption = function (index) {
};
MultiselectButtons.prototype.updateMenuState = function (open) {
this.open = open;
this.comboEl.setAttribute('aria-expanded', "".concat(open));
this.comboEl.setAttribute('aria-expanded', `${open}`);
open ? this.el.classList.add('open') : this.el.classList.remove('open');
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MultiselectButtons);
Expand Down
2 changes: 1 addition & 1 deletion public/dist/assets/js/multiselect.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion public/dist/assets/js/slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ let contentSlider = function () {
*/
function createControls() {
let controls = document.createElement('ul');
controls.setAttribute('class', 'slider-controls');
controls.setAttribute('class', 'clean-list slider-controls');
controls.setAttribute('aria-label', controlsDescription);
controls.innerHTML = '<li><button class="button button--ghost js-previous with-icon--larger" aria-label="' + previousSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>' + '<li style="margin-top:0;margin-inline-start:0.25rem;"><button class="button button--ghost js-next with-icon--larger" aria-label="' + nextSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>';
controls.style.display = 'inline-flex';
Expand Down
Loading

0 comments on commit d51dc0d

Please sign in to comment.