users: Make users list correctly accessible

Lets use <ul> and <li> since it is actually list.
Also use 'role="presentation"' to indicate that the box itself has no
semantic meaning, it just is wrapper that catches events when user click
anywhere on the box.

Also did one small change for sliders in storage where I added
'role="presentation"' so it is not used in a11y tree. We always have
input next to this slider for it to be accessible. Making fully
accessible slider is not that complicated, but the goal with our sliders
always was that they are ignored when using keyboard and users will just
use inputs.

That also makes it possible to enforce another a11y jsx rule.

Closes #14091

.eslintrc.json

@@ -50,7 +50,6 @@
         "space-before-function-paren": "off",
         "standard/no-callback-literal": "off",
 
-        "jsx-a11y/no-static-element-interactions": "off",
         "jsx-a11y/anchor-is-valid": "off",
         "jsx-a11y/no-autofocus": "off",
         "jsx-a11y/no-interactive-element-to-noninteractive-role": "off",

pkg/storaged/dialog.jsx

@@ -804,7 +804,7 @@ const StatelessSlider = ({ fraction, onChange }) => {
     if (fraction > 1) fraction = 1;
 
     return (
-        <div className="slider" onMouseDown={start_dragging}>
+        <div className="slider" role="presentation" onMouseDown={start_dragging}>
             <div className="slider-bar" style={{ width: fraction * 100 + "%" }}>
                 <div className="slider-thumb" />
             </div>

pkg/users/index.html

@@ -50,8 +50,8 @@
 
   <div id="accounts" class="container-fluid" hidden>
     <button class="pf-c-button pf-m-primary accounts-privileged" id="accounts-create" translate="yes" data-container="body" data-placement="right">Create New Account</button>
-    <div id="accounts-list">
-    </div>
+    <ul id="accounts-list">
+    </ul>
   </div>
 
   <div id="account-page">

pkg/users/local.js

@@ -287,14 +287,14 @@ class AccountItem extends React.Component {
 
     render() {
         return (
-            <div className="cockpit-account" onClick={this.click} onKeyPress={this.click}>
+            <li className="cockpit-account" role="presentation" onClick={this.click} onKeyPress={this.click}>
                 <div className="cockpit-account-pic pficon pficon-user" />
                 <div className="cockpit-account-real-name">{this.props.gecos.split(',')[0]}</div>
                 <div className="cockpit-account-user-name">
                     <a href={"#/" + this.props.name}>{this.props.name}</a>
                     {this.props.current && <Badge className="cockpit-account-badge">{_("Your account")}</Badge>}
                 </div>
-            </div>
+            </li>
         );
     }
 }

test/verify/check-multi-machine

@@ -525,7 +525,7 @@ class TestMultiMachine(MachineCase):
         b.click('a[href="/@10.111.113.2/users"]')
         b.enter_page("/users", host="10.111.113.2")
         b.wait_present("#accounts-list")
-        b.click("#accounts-list div.cockpit-account:first-child")
+        b.click("#accounts-list .cockpit-account:first-child")
         b.wait_text("#account-user-name", "admin")
         b.switch_to_top()
         b.wait_js_cond('window.location.pathname == "/cockpit-new/@10.111.113.2/users"')