Adds 'role' as an allowed attribute in the no-imperative-dom-api eslint rule.

Bug: 407751147
Change-Id: I3c28a34dfc4c354a5cf1756797f24c8158ea1270
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6440212
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>

Author: danilsomsikov

scripts/eslint_rules/lib/no-imperative-dom-api/dom-api.ts

@@ -27,8 +27,8 @@ export const domApi = {
           return true;
         }
         if (isIdentifier(property, [
-              'alt', 'draggable', 'height', 'hidden', 'href', 'id', 'name', 'placeholder', 'rel', 'scope', 'slot',
-              'spellcheck', 'src', 'tabindex', 'title', 'type', 'value', 'width'
+              'alt', 'draggable', 'height', 'hidden', 'href', 'id', 'name', 'placeholder', 'rel', 'role', 'scope',
+              'slot', 'spellcheck', 'src', 'tabindex', 'title', 'type', 'value', 'width'
             ])) {
           domFragment.attributes.push({key: property.name.toLowerCase(), value: propertyValue});
           return true;

scripts/eslint_rules/tests/no-imperative-dom-api.test.ts

@@ -473,6 +473,7 @@ class SomeWidget extends UI.Widget.Widget {
     anchor.href = 'https://www.google.com';
     anchor.innerText = 'some-text';
     anchor.dataset.someKey = 'some-value';
+    anchor.role = 'some-role';
     this.contentElement.insertBefore(anchor, input);
 
     const img = document.createElement('img');
@@ -495,7 +496,7 @@ class SomeWidget extends UI.Widget.Widget {
 export const DEFAULT_VIEW = (input, _output, target) => {
   render(html\`
     <div>
-      <a href="https://www.google.com" data-some-key="some-value">some-text</a>
+      <a href="https://www.google.com" data-some-key="some-value" role="some-role">some-text</a>
       <img src="https://www.google.com/some-image.png" alt="some-alt" draggable="true" height="100"
           hidden="hidden" href="https://www.google.com" id="some-id" name="some-name" rel="some-rel"
           scope="some-scope"></img>