Use button instead of div for a11y
Lucas Cordeiro committed
Apr 10, 2019 at 15:00 UTC
944a6192e2d5fab7b3c340258c86473bdef45b37
2 files changed
+8
-2
src/devtools/views/Components/KeyValue.css
+1
@@ -32,5 +32,6 @@
32
display: inline-flex;
33
width: 1rem;
34
height: 1rem;
35
+ padding: 0;
36
color: var(--color-expand-collapse-toggle);
37
}
src/devtools/views/Components/KeyValue.js
+7
-2
@@ -3,6 +3,7 @@
3
import React, { useState } from 'react';
4
import type { Element } from 'react';
5
import EditableValue from './EditableValue';
6
+import Button from '../Button';
7
import ButtonIcon from '../ButtonIcon';
8
import { getMetaValueLabel } from '../utils';
9
import { meta } from '../../../hydration';
@@ -81,9 +82,13 @@ export default function KeyValue({
82
);
83
} else {
84
const opener = (
84
- <div className={styles.Opener} onClick={handleToggle}>
85
+ <Button
86
+ className={styles.Opener}
87
+ onClick={handleToggle}
88
+ title={`${open ? 'Collapse' : 'Expand'} prop value`}
89
+ >
90
<ButtonIcon type={open ? 'expanded' : 'collapsed'} />
86
- </div>
91
+ </Button>
92
);
93
94
if (Array.isArray(value)) {