Merge pull request #153 from smooth-code/fix-a11y

Fix a11y

Author: gregberge

packages/shared/core/Button.js

@@ -62,7 +62,7 @@ export const Button = createComponent({
                 background-color: ${baseColor};
 
                 &:focus {
-                  ${p.theme.mixins.baseFocus(baseColor)(p)};
+                  ${p.theme.mixins.controlFocus(baseColor)(p)};
                 }
 
                 &:not(:disabled):hover,

packages/shared/core/Form.js

@@ -101,7 +101,6 @@ export function createFieldsGroupContext(type) {
     return {
       ...props,
       id,
-      'aria-describedby': props['aria-describedby'] || labelId,
       'aria-labelledby': props['aria-labelledby'] || labelId,
     }
   }

website/src/pages/docs/form.mdx

@@ -18,7 +18,7 @@ import { Props } from '../../components/Props'
 
 ## Basic
 
-`Form`, `FormField`, `FormFieldLabel`, `FormCheck`, `FormCheckLabel` are the foundations of form layout. Components are smart and automatically link labels to form controls if a name is provided. A unique `id` is automatically generated, `htmlFor` is added to `label` and `aria-labelledby` / `aria-describedby` attributes are added to controls.
+`Form`, `FormField`, `FormFieldLabel`, `FormCheck`, `FormCheckLabel` are the foundations of form layout. Components are smart and automatically link labels to form controls if a name is provided. A unique `id` is automatically generated, `htmlFor` is added to `label` and `aria-labelledby` attributes are added to controls.
 
 ```jsx live noInline
 import React from 'react'
@@ -372,7 +372,7 @@ render(<Example />)
 All forms components follow [WAI-ARIA Pattern](https://www.w3.org/TR/wai-aria-1.1/) to ensure a complete accesibility of your forms.
 
 - Role `form` is automatically added to `form` if not a native `form` element
-- `aria-describedby` and `aria-labelledby` are automatically added to `label` when a name is provided
+- `aria-labelledby` is automatically added to `label` when a name is provided
 
 ## API