fix(Accessibility): on column item selection screen reader should read the newly added preview column content

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);

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');
 

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');