From 4fb3ec76a793bcd87a01c86d3b8e59e2067fb0cb Mon Sep 17 00:00:00 2001
From: Matej Marusak <mmarusak@redhat.com>
Date: Mon, 18 May 2020 12:13:23 +0200
Subject: [PATCH] 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                  | 1 -
 pkg/storaged/dialog.jsx         | 2 +-
 pkg/users/index.html            | 4 ++--
 pkg/users/local.js              | 4 ++--
 test/verify/check-multi-machine | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index f8619e178..948db42d1 100644
--- a/.eslintrc.json
+++ b/.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",
diff --git a/pkg/storaged/dialog.jsx b/pkg/storaged/dialog.jsx
index a3cb18d5e..2fcf42e75 100644
--- a/pkg/storaged/dialog.jsx
+++ b/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>
diff --git a/pkg/users/index.html b/pkg/users/index.html
index 691a71cf0..27276b394 100644
--- a/pkg/users/index.html
+++ b/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">
diff --git a/pkg/users/local.js b/pkg/users/local.js
index 797845094..e05ec5586 100755
--- a/pkg/users/local.js
+++ b/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>
         );
     }
 }
diff --git a/test/verify/check-multi-machine b/test/verify/check-multi-machine
index 165d45963..9f99c9b00 100755
--- a/test/verify/check-multi-machine
+++ b/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"')