fix: make properties focusable

Redocly · Jul 13, 2020 · 05fd754 · 05fd754
1 parent 442014c
commit 05fd754
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts
@@ -62,7 +62,7 @@ export const PropertyNameCell = styled(PropertyCell)`
   vertical-align: top;
   line-height: 20px;
   white-space: nowrap;
-  font-size: 0.929em;
+  font-size: 13px;
   font-family: ${props => props.theme.typography.code.fontFamily};
 
   &.deprecated {

diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
@@ -5,8 +5,19 @@ import { PropertyNameCell } from './fields-layout';
 import { ShelfIcon } from './shelfs';
 
 export const ClickablePropertyNameCell = styled(PropertyNameCell)`
-  cursor: pointer;
-
+  button {
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    font-size: 13px;
+    font-family: ${props => props.theme.typography.code.fontFamily};
+    cursor: pointer;
+    padding: 0;
+    color: ${props => props.theme.colors.text.primary};
+    &:focus {
+      font-weight: ${({ theme }) => theme.typography.fontWeightBold};
+    }
+  }
   ${ShelfIcon} {
     height: ${({ theme }) => theme.schema.arrow.size};
     width: ${({ theme }) => theme.schema.arrow.size};

diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
@@ -37,6 +37,14 @@ export class Field extends React.Component<FieldProps> {
       this.props.field.toggle();
     }
   };
+
+  handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.toggle();
+    }
+  };
+
   render() {
     const { className, field, isLast, expandByDefault } = this.props;
     const { name, deprecated, required, kind } = field;
@@ -46,14 +54,19 @@ export class Field extends React.Component<FieldProps> {
 
     const paramName = withSubSchema ? (
       <ClickablePropertyNameCell
-        onClick={this.toggle}
         className={deprecated ? 'deprecated' : ''}
         kind={kind}
         title={name}
       >
         <PropertyBullet />
-        {name}
-        <ShelfIcon direction={expanded ? 'down' : 'right'} />
+        <button
+          onClick={this.toggle}
+          onKeyPress={this.handleKeyPress}
+          aria-label="expand properties"
+        >
+          {name}
+          <ShelfIcon direction={expanded ? 'down' : 'right'} />
+        </button>
         {required && <RequiredLabel> required </RequiredLabel>}
       </ClickablePropertyNameCell>
     ) : (