Add role "radiogroup" to gr-label-score-row

Change-Id: I9fb5f55d9b47d6d5319f0bb7e3be7f6bea9e6652

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js

@@ -148,6 +148,13 @@ class GrLabelScoreRow extends GestureEventListeners(
     // Needed because when the selected item changes, it first changes to
     // nothing and then to the new item.
     if (!e.target.selectedItem) { return; }
+    for (const item of this.$.labelSelector.items) {
+      if (e.target.selectedItem === item) {
+        item.setAttribute('aria-checked', 'true');
+      } else {
+        item.removeAttribute('aria-checked');
+      }
+    }
     this._selectedValueText = e.target.selectedItem.getAttribute('title');
     // Needed to update the style of the selected button.
     this.updateStyles();

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_html.js

@@ -93,7 +93,9 @@ export const htmlTemplate = html`
       }
     }
   </style>
-  <span class="labelNameCell">[[label.name]]</span>
+  <span class="labelNameCell" id="labelName" aria-hidden="true"
+    >[[label.name]]</span
+  >
   <div class="buttonsCell">
     <template
       is="dom-repeat"
@@ -108,9 +110,12 @@ export const htmlTemplate = html`
       selected="[[_computeLabelValue(labels, permittedLabels, label)]]"
       hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"
       on-selected-item-changed="_setSelectedValueText"
+      role="radiogroup"
+      aria-labelledby="labelName"
     >
       <template is="dom-repeat" items="[[_items]]" as="value">
         <gr-button
+          role="radio"
           vote$="[[_computeVoteAttribute(value, index, _items.length)]]"
           has-tooltip=""
           data-name$="[[label.name]]"

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html

@@ -104,6 +104,20 @@ suite('gr-label-row-score tests', () => {
     sandbox.restore();
   });
 
+  function checkAriaCheckedValid() {
+    const items = element.$.labelSelector.items;
+    const selectedItem = element.selectedItem;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (items[i] === selectedItem) {
+        assert.isTrue(item.hasAttribute('aria-checked'), `item ${i}`);
+        assert.equal(item.getAttribute('aria-checked'), 'true', `item ${i}`);
+      } else {
+        assert.isFalse(item.hasAttribute('aria-checked'), `item ${i}`);
+      }
+    }
+  }
+
   test('label picker', () => {
     const labelsChangedHandler = sandbox.stub();
     element.addEventListener('labels-changed', labelsChangedHandler);
@@ -120,6 +134,7 @@ suite('gr-label-row-score tests', () => {
     const detail = labelsChangedHandler.args[0][0].detail;
     assert.equal(detail.name, 'Verified');
     assert.equal(detail.value, '-1');
+    checkAriaCheckedValid();
   });
 
   test('_computeVoteAttribute', () => {
@@ -163,6 +178,7 @@ suite('gr-label-row-score tests', () => {
             .textContent.trim(), '+1');
     assert.strictEqual(
         element.$.selectedValueLabel.textContent.trim(), 'good');
+    checkAriaCheckedValid();
   });
 
   test('do not display tooltips on touch devices', () => {
@@ -243,6 +259,7 @@ suite('gr-label-row-score tests', () => {
     assert.strictEqual(selector.selected, ' 0');
     assert.strictEqual(
         element.$.selectedValueLabel.textContent.trim(), 'No score');
+    checkAriaCheckedValid();
   });
 
   test('without permitted labels', () => {
@@ -339,6 +356,7 @@ suite('gr-label-row-score tests', () => {
     };
     flushAsynchronousOperations();
     assert.strictEqual(element.selectedValue, '-1');
+    checkAriaCheckedValid();
   });
 
   test('default_value is null if not permitted', () => {