react-checkbox: update properties to match supported HTML/ARIA attrs (#…

…17384)
microsoft · Mar 11, 2021 · a2fea79 · a2fea79
1 parent 376f525
commit a2fea79
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 28 deletions.
diff --git a/change/@fluentui-react-checkbox-2f4bdb57-38ec-4f0f-9ac7-590b8057ff80.json b/change/@fluentui-react-checkbox-2f4bdb57-38ec-4f0f-9ac7-590b8057ff80.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update checkbox properties to match allowed HTML/ARIA attributes",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -40,8 +40,6 @@ export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement |
     ariaDescribedBy?: string;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaPositionInSet?: number;
-    ariaSetSize?: number;
     as?: React.ElementType;
     boxSide?: 'start' | 'end';
     checked?: boolean;
@@ -57,6 +55,7 @@ export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement |
     onChange?: (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, checked?: boolean) => void;
     // @deprecated
     onRenderLabel?: IRenderFunction<ICheckboxProps>;
+    required?: boolean;
     // @deprecated
     styles?: IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>;
     theme?: ITheme;

diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.base.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.base.tsx
@@ -55,13 +55,12 @@ export const CheckboxBase: ComponentWithAs<'div', ICheckboxProps> = compose<
       'label',
       'checkmark',
       'disabled',
+      'required',
       'inputProps',
       'boxSide',
       'ariaLabel',
       'ariaLabelledBy',
       'ariaDescribedBy',
-      'ariaPositionInSet',
-      'ariaSetSize',
       'styles',
       'onRenderLabel',
       'indeterminate',

diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts b/packages/react-checkbox/src/components/Checkbox/Checkbox.types.ts
@@ -71,6 +71,11 @@ export interface ICheckboxProps
    */
   disabled?: boolean;
 
+  /**
+   * Required state of the checkbox.
+   */
+  required?: boolean;
+
   /**
    * Callback that is called when the checked value has changed.
    */
@@ -110,16 +115,6 @@ export interface ICheckboxProps
    */
   ariaDescribedBy?: string;
 
-  /**
-   * The position in the parent set (if in a set) for aria-posinset.
-   */
-  ariaPositionInSet?: number;
-
-  /**
-   * The total size of the parent set (if in a set) for aria-setsize.
-   */
-  ariaSetSize?: number;
-
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
    *

diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckbox.ts b/packages/react-checkbox/src/components/Checkbox/useCheckbox.ts
@@ -5,18 +5,7 @@ import { useFocusRects } from '@fluentui/utilities';
 import { ICheckboxProps, ICheckboxState } from './Checkbox.types';
 
 export const useCheckbox = (props: ICheckboxProps, forwardedRef: React.Ref<HTMLElement>): ICheckboxState => {
-  const {
-    disabled,
-    inputProps,
-    name,
-    ariaLabel,
-    ariaLabelledBy,
-    ariaDescribedBy,
-    ariaPositionInSet,
-    ariaSetSize,
-    title,
-    label,
-  } = props;
+  const { disabled, required, inputProps, name, ariaLabel, ariaLabelledBy, ariaDescribedBy, title, label } = props;
 
   const id = useId('checkbox-', props.id);
 
@@ -54,6 +43,7 @@ export const useCheckbox = (props: ICheckboxProps, forwardedRef: React.Ref<HTMLE
       ref: inputRef,
       checked: !!isChecked,
       disabled,
+      required,
       name,
       id,
       title,
@@ -63,8 +53,6 @@ export const useCheckbox = (props: ICheckboxProps, forwardedRef: React.Ref<HTMLE
       'aria-label': ariaLabel || label,
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
-      'aria-posinset': ariaPositionInSet,
-      'aria-setsize': ariaSetSize,
       'aria-checked': isIndeterminate ? 'mixed' : isChecked ? 'true' : 'false',
     },
     checkbox: {