diff --git a/coral-component-columnview/src/scripts/ColumnView.js b/coral-component-columnview/src/scripts/ColumnView.js index dea4636d70..fc1690162d 100644 --- a/coral-component-columnview/src/scripts/ColumnView.js +++ b/coral-component-columnview/src/scripts/ColumnView.js @@ -1004,6 +1004,17 @@ const ColumnView = Decorator(class extends BaseComponent(HTMLElement) { } } + if (this.selectedItem && this.selectedItems.length === 1 && item.tagName === 'CORAL-COLUMNVIEW-PREVIEW') { + // @a11y add aria-owns attribute to selection item to express relationship of added column to the selection item + this.selectedItem.setAttribute('aria-owns', item.id); + + // @a11y column or preview should be labelled by selection item + item.setAttribute('aria-labelledby', this.selectedItem.content.id); + + // @a11y preview should provide description for selection item + this.selectedItem.setAttribute('aria-describedby', item.id); + } + if (item.tagName === 'CORAL-COLUMNVIEW-COLUMN') { // we use the property since the item may not be ready item.setAttribute('_selectionmode', this.selectionMode); diff --git a/coral-component-columnview/src/scripts/ColumnViewItem.js b/coral-component-columnview/src/scripts/ColumnViewItem.js index 4acbdcfc48..9cd16346e2 100644 --- a/coral-component-columnview/src/scripts/ColumnViewItem.js +++ b/coral-component-columnview/src/scripts/ColumnViewItem.js @@ -239,11 +239,6 @@ const ColumnViewItem = Decorator(class extends BaseLabellable(BaseComponent(HTML let accessibilityState = this._elements.accessibilityState; if (value) { - - // @a11y Panels to right of selected item are removed, so remove aria-owns and aria-describedby attributes. - this.removeAttribute('aria-owns'); - this.removeAttribute('aria-describedby'); - // @a11y Update content to ensure that checked state is announced by assistive technology when the item receives focus accessibilityState.innerHTML = i18n.get(', checked'); diff --git a/coral-component-columnview/src/tests/test.ColumnView.js b/coral-component-columnview/src/tests/test.ColumnView.js index b1359718e2..68b81db21d 100644 --- a/coral-component-columnview/src/tests/test.ColumnView.js +++ b/coral-component-columnview/src/tests/test.ColumnView.js @@ -1471,6 +1471,32 @@ describe('ColumnView', function () { }); it('should express ownership of expanded column using aria-owns', function (done) { + function onChangeEvent(event) { + const columnView = event.target; + if (event.detail.selection.length) { + // on selection, it means we load the item content + let url = columnView.items._getLastSelected().dataset.src; + + // there is no information on additional items + if (typeof url === 'undefined') { + return; + } + + // we load the url from the snippets instead of using ajax + let data = window.__html__[`examples/${url}`]; + if (typeof data !== 'undefined') { + let t = document.createElement('div'); + t.innerHTML = data; + let el = t.firstElementChild; + + // if it is a preview column we add it directly + if (el.matches('coral-columnview-preview')) { + columnView.setNextColumn(el, columnView.columns.last(), false); + } + } + } + } + function navigateEvent(event) { const el = event.target; const columns = el.columns; @@ -1480,13 +1506,21 @@ describe('ColumnView', function () { expect(el.activeItem.getAttribute('aria-owns')).to.equal(lastColumn.id, 'aria-owns of activeItem should reference added column'); expect(lastColumn.getAttribute('aria-labelledby')).to.equal(el.activeItem.content.id, 'added column should be labelled by activeItem of previous column'); - // we clean the test afterwards - helpers.target.removeEventListener('coral-columnview:navigate', navigateEvent); - - done(); + const selectItem = lastColumn.items.getAll()[0]; + selectItem.active = true; + helpers.keypress('space', selectItem); + helpers.next(() => { + expect(el.selectedItem.getAttribute('aria-owns')).to.equal(lastColumn.nextElementSibling.id, 'aria-owns of selectedItem should reference added column'); + expect(lastColumn.nextElementSibling.getAttribute('aria-labelledby')).to.equal(el.selectedItem.content.id, 'added column should be labelled by selectedItem of previous column'); + // we clean the test afterwards + helpers.target.removeEventListener('coral-columnview:navigate', navigateEvent); + helpers.target.removeEventListener('coral-columnview:change', onChangeEvent); + done(); + }); }; helpers.target.addEventListener('coral-columnview:navigate', navigateEvent); + helpers.target.addEventListener('coral-columnview:change', onChangeEvent); const el = helpers.build(window.__html__['ColumnView.full.html']); el.activeItem.trigger('click'); diff --git a/package-lock.json b/package-lock.json index 6fd3d52f89..561e3c9848 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@adobe/coral-spectrum", - "version": "4.15.6", + "version": "4.15.18", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@adobe/coral-spectrum", - "version": "4.15.6", + "version": "4.15.18", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": {