Merge pull request #6955 from andybalaam/table-for-devicespanel

Switch DevicesPanel to use table (for screen readers)
matrix-org · Oct 15, 2021 · 9c75376 · 9c75376
2 parents f0ff3a2 + 690893e
commit 9c75376
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 36 deletions.
diff --git a/res/css/views/settings/_DevicesPanel.scss b/res/css/views/settings/_DevicesPanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_DevicesPanel {
-    display: table;
     table-layout: fixed;
     // Normally the panel is 880px, however this can easily overflow the container.
     // TODO: Fix the table to not be squishy
@@ -25,16 +24,17 @@ limitations under the License.
 }
 
 .mx_DevicesPanel_header {
-    display: table-header-group;
     font-weight: bold;
 }
 
-.mx_DevicesPanel_header > .mx_DevicesPanel_deviceButtons {
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
     height: 48px; // make this tall so the table doesn't move down when the delete button appears
+    width: 20%;
 }
 
-.mx_DevicesPanel_header > div {
-    display: table-cell;
+.mx_DevicesPanel_header th {
+    padding: 0px;
+    text-align: left;
     vertical-align: middle;
 }
 
@@ -46,16 +46,9 @@ limitations under the License.
     width: 30%;
 }
 
-.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
-    width: 20%;
-}
-
-.mx_DevicesPanel_device {
-    display: table-row;
-}
-
-.mx_DevicesPanel_device > div {
-    display: table-cell;
+.mx_DevicesPanel_device td {
+    vertical-align: baseline;
+    padding: 0px;
 }
 
 .mx_DevicesPanel_myDevice {

diff --git a/src/components/views/settings/DevicesPanel.tsx b/src/components/views/settings/DevicesPanel.tsx
@@ -218,17 +218,21 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");
         return (
-            <div className={classes}>
-                <div className="mx_DevicesPanel_header">
-                    <div className="mx_DevicesPanel_deviceId">{ _t("ID") }</div>
-                    <div className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</div>
-                    <div className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</div>
-                    <div className="mx_DevicesPanel_deviceButtons">
-                        { this.state.selectedDevices.length > 0 ? deleteButton : null }
-                    </div>
-                </div>
-                { devices.map(this.renderDevice) }
-            </div>
+            <table className={classes}>
+                <thead className="mx_DevicesPanel_header">
+                    <tr>
+                        <th className="mx_DevicesPanel_deviceId">{ _t("ID") }</th>
+                        <th className="mx_DevicesPanel_deviceName">{ _t("Public Name") }</th>
+                        <th className="mx_DevicesPanel_deviceLastSeen">{ _t("Last seen") }</th>
+                        <th className="mx_DevicesPanel_deviceButtons">
+                            { this.state.selectedDevices.length > 0 ? deleteButton : null }
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    { devices.map(this.renderDevice) }
+                </tbody>
+            </table>
         );
     }
 }
diff --git a/src/components/views/settings/DevicesPanelEntry.tsx b/src/components/views/settings/DevicesPanelEntry.tsx
@@ -66,23 +66,23 @@ export default class DevicesPanelEntry extends React.Component<IProps> {
         }
 
         return (
-            <div className={"mx_DevicesPanel_device" + myDeviceClass}>
-                <div className="mx_DevicesPanel_deviceId">
+            <tr className={"mx_DevicesPanel_device" + myDeviceClass}>
+                <td className="mx_DevicesPanel_deviceId">
                     { device.device_id }
-                </div>
-                <div className="mx_DevicesPanel_deviceName">
+                </td>
+                <td className="mx_DevicesPanel_deviceName">
                     <EditableTextContainer initialValue={device.display_name}
                         onSubmit={this.onDisplayNameChanged}
                         placeholder={device.device_id}
                     />
-                </div>
-                <div className="mx_DevicesPanel_lastSeen">
+                </td>
+                <td className="mx_DevicesPanel_lastSeen">
                     { lastSeen }
-                </div>
-                <div className="mx_DevicesPanel_deviceButtons">
+                </td>
+                <td className="mx_DevicesPanel_deviceButtons">
                     <StyledCheckbox onChange={this.onDeviceToggled} checked={this.props.selected} />
-                </div>
-            </div>
+                </td>
+            </tr>
         );
     }
 }