Skip to content

Commit

Permalink
Merge pull request #148 from w3c/feature/#648-table-styles-scope
Browse files Browse the repository at this point in the history 
Feature/#648 table styles scope
  • Loading branch information
@deniak
deniak authored Sep 27, 2024
2 parents 424460e + 4c34d86 commit e76851b
Show file tree
Hide file tree
Showing 11 changed files with 93 additions and 135 deletions.
9 changes: 5 additions & 4 deletions assets-src/styles/sass/30-base/_tables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,12 @@ table caption {

th {
vertical-align: bottom;
}

&[scope="col"] {
background-color: $deep-blue;
color: $white;
}
thead th,
tfoot th {
background-color: $deep-blue;
color: $white;
}

td {
Expand Down
4 changes: 2 additions & 2 deletions design-system-templates/components/table.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
</thead>
<tbody>
<tr>
<th scope="row">Row 1 header</th>
<th scope="row">Row header 1</th>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<th scope="row">Row 2 header</th>
<th scope="row">Row header 2</th>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion docs/styles/tables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The table markup must include column and/or row headers (`<th>`). Some screen re

Use the attributes `scope="col"` and `scope="row"` to differentiate between column and row headers respectively.

Where there are both column and row headers, do not leave the first header cell empty as this can produce unexpected behaviour.
Where there are both column and row headers, do not use an empty table header `<th>` in the first column as this can produce unexpected behaviour. An empty table cell `<td>` is acceptable, if necessary (note the example table which follows).

Use a `<caption>` to label the table correctly. A heading element can be used within the caption if desired.

Expand Down
45 changes: 22 additions & 23 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,7 +191,7 @@ 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');
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.

24 changes: 8 additions & 16 deletions public/dist/assets/styles/advanced.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,8 +158,7 @@ article {
[data-trigger=account-menu] .sr-only, .visuallyhidden:not(:focus):not(:active) {
border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
padding: 0;
Expand Down Expand Up @@ -226,8 +225,7 @@ br {
}
@media screen and (min-width: 70em) {
[data-trigger=account-menu] {
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-inline-start: auto;
padding: 0.5rem 0.1875rem 0.3125rem 0.1875rem;
}
[data-trigger=account-menu]:hover::before {
Expand All @@ -254,8 +252,7 @@ br {
[data-trigger=account-menu] .sr-only {
border: initial;
clip: auto;
-webkit-clip-path: none;
clip-path: none;
clip-path: none;
height: auto;
margin: initial;
overflow: initial;
Expand All @@ -267,8 +264,7 @@ br {
}
@media screen and (min-width: 70em) {
[data-trigger=account-menu] .avatar {
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
margin-inline-start: 0.5rem;
}
}

Expand Down Expand Up @@ -426,13 +422,11 @@ br {
}

.icon--submenu {
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-inline-start: auto;
}
@media screen and (min-width: 70em) {
.icon--submenu {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
margin-inline-start: 0.25rem;
transform: rotate(90deg);
}
}
Expand Down Expand Up @@ -577,8 +571,7 @@ br {
}
.global-nav__inner [data-button=mobile-back] .icon--submenu {
height: 1.875rem;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-inline-start: 0;
transform: rotate(180deg);
width: 1.875rem;
}
Expand Down Expand Up @@ -898,8 +891,7 @@ br {
}

#js-cancel-reply {
-webkit-margin-start: 0.625rem;
margin-inline-start: 0.625rem;
margin-inline-start: 0.625rem;
}

/*------------------------------------*\
Expand Down
2 changes: 1 addition & 1 deletion public/dist/assets/styles/advanced.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e76851b

Please sign in to comment.