fix(DetailsList): switch checkbox role to radio for single selection (#…

…18967)
microsoft · Jul 23, 2021 · a5b02f9 · a5b02f9
1 parent e1a39cd
commit a5b02f9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 32 deletions.
diff --git a/change/@fluentui-react-df73f2e9-9b63-49b1-8b53-789d4aae78ae.json b/change/@fluentui-react-df73f2e9-9b63-49b1-8b53-789d4aae78ae.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "DetailsList: use the radio role for single selection mode checks",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
@@ -139,7 +139,7 @@ export class BaseButton extends React_2.Component<IBaseButtonProps, IBaseButtonS
     openMenu(shouldFocusOnContainer?: boolean, shouldFocusOnMount?: boolean): void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {
@@ -384,7 +384,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends React_2.Compon
     protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string): void;
     // (undocumented)
     protected updateValue(updatedValue: string): void;
-    }
+}
 
 // @public (undocumented)
 export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
@@ -467,7 +467,7 @@ export class BreadcrumbBase extends React_2.Component<IBreadcrumbProps, any> {
     focus(): void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export function buildColumns(items: any[], canResizeColumns?: boolean, onColumnClick?: (ev: React_2.MouseEvent<HTMLElement>, column: IColumn) => void, sortedColumnKey?: string, isSortedDescending?: boolean, groupedColumnKey?: string, isMultiline?: boolean): IColumn[];
@@ -583,7 +583,7 @@ export class ColorPickerBase extends React_2.Component<IColorPickerProps, IColor
     static defaultProps: Partial<IColorPickerProps>;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export const ColorPickerGridCell: React_2.FunctionComponent<IColorPickerGridCellProps>;
@@ -622,7 +622,7 @@ export class CommandBarBase extends React_2.Component<ICommandBarProps, {}> impl
     remeasure(): void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export class CommandBarButton extends React_2.Component<IButtonProps, {}> {
@@ -680,7 +680,7 @@ export class ContextualMenuItemBase extends React_2.Component<IContextualMenuIte
     openSubMenu: () => void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export enum ContextualMenuItemType {
@@ -780,7 +780,7 @@ export class DetailsColumnBase extends React_2.Component<IDetailsColumnProps> {
     componentWillUnmount(): void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export const DetailsHeader: React_2.FunctionComponent<IDetailsHeaderBaseProps>;
@@ -803,7 +803,7 @@ export class DetailsHeaderBase extends React_2.Component<IDetailsHeaderBaseProps
     focus(): boolean;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export const DetailsList: React_2.FunctionComponent<IDetailsListProps>;
@@ -839,7 +839,7 @@ export class DetailsListBase extends React_2.Component<IDetailsListProps, IDetai
     render(): JSX.Element;
     // (undocumented)
     scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
-    }
+}
 
 // @public (undocumented)
 export enum DetailsListLayoutMode {
@@ -870,7 +870,7 @@ export class DetailsRowBase extends React_2.Component<IDetailsRowBaseProps, IDet
     render(): JSX.Element;
     // (undocumented)
     shouldComponentUpdate(nextProps: IDetailsRowBaseProps, nextState: IDetailsRowState): boolean;
-    }
+}
 
 // @public (undocumented)
 export const DetailsRowCheck: React_2.FunctionComponent<IDetailsRowCheckProps>;
@@ -927,7 +927,7 @@ export class DialogFooterBase extends React_2.Component<IDialogFooterProps, {}>
     constructor(props: IDialogFooterProps);
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export enum DialogType {
@@ -1124,7 +1124,7 @@ export class FacepileBase extends React_2.Component<IFacepileProps, {}> {
     protected onRenderAriaDescription(): "" | JSX.Element | undefined;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 export { FirstWeekOfYear }
 
@@ -1251,7 +1251,7 @@ export class GroupedListBase extends React_2.Component<IGroupedListProps, IGroup
     scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
     // (undocumented)
     toggleCollapseAll(allCollapsed: boolean): void;
-    }
+}
 
 // @public (undocumented)
 export class GroupedListSection extends React_2.Component<IGroupedListSectionProps, IGroupedListSectionState> {
@@ -1268,7 +1268,7 @@ export class GroupedListSection extends React_2.Component<IGroupedListSectionPro
     forceUpdate(): void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export const GroupFooter: React_2.FunctionComponent<IGroupFooterProps>;
@@ -1311,7 +1311,7 @@ export class HoverCardBase extends React_2.Component<IHoverCardProps, IHoverCard
     dismiss: (withTimeOut?: boolean | undefined) => void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export enum HoverCardType {
@@ -3951,6 +3951,7 @@ export interface IDetailsRowCheckProps extends React_2.HTMLAttributes<HTMLElemen
     isVisible?: boolean;
     onRenderDetailsCheckbox?: IRenderFunction<IDetailsCheckboxProps>;
     selected?: boolean;
+    selectionMode?: SelectionMode_2;
     styles?: IStyleFunctionOrObject<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>;
     theme?: ITheme;
     useFastIcons?: boolean;
@@ -5794,7 +5795,6 @@ export interface IListState<T = any> {
 
 // @public (undocumented)
 const Image_2: React_2.FunctionComponent<IImageProps>;
-
 export { Image_2 as Image }
 
 // @public (undocumented)
@@ -8561,7 +8561,7 @@ export class KeytipLayerBase extends React_2.Component<IKeytipLayerProps, IKeyti
     // (undocumented)
     render(): JSX.Element;
     showKeytips(ids: string[]): void;
-    }
+}
 
 // @public
 export class KeytipManager {
@@ -8673,7 +8673,7 @@ export class List<T = any> extends React_2.Component<IListProps<T>, IListState<T
     scrollToIndex(index: number, measureItem?: (itemIndex: number) => number, scrollToMode?: ScrollToMode): void;
     // (undocumented)
     shouldComponentUpdate(newProps: IListProps<T>, newState: IListState<T>): boolean;
-    }
+}
 
 // @public (undocumented)
 export const ListPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
@@ -8785,7 +8785,7 @@ export class NavBase extends React_2.Component<INavProps, INavState> implements
     render(): JSX.Element | null;
     // (undocumented)
     get selectedKey(): string | undefined;
-    }
+}
 
 // @public (undocumented)
 export const NormalPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
@@ -8860,7 +8860,7 @@ export class PanelBase extends React_2.Component<IPanelProps, IPanelState> imple
     open(): void;
     // (undocumented)
     render(): JSX.Element | null;
-    }
+}
 
 // @public (undocumented)
 export enum PanelType {
@@ -9299,9 +9299,7 @@ enum SelectableOptionMenuItemType {
     // (undocumented)
     Normal = 0
 }
-
 export { SelectableOptionMenuItemType as DropdownMenuItemType }
-
 export { SelectableOptionMenuItemType }
 
 // @public (undocumented)
@@ -9349,7 +9347,7 @@ export class SelectionZone extends React_2.Component<ISelectionZoneProps, ISelec
     ignoreNextFocus: () => void;
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public (undocumented)
 export enum SemanticColorSlots {
@@ -9417,7 +9415,7 @@ export class ShimmeredDetailsListBase extends React_2.Component<IShimmeredDetail
     constructor(props: IShimmeredDetailsListProps);
     // (undocumented)
     render(): JSX.Element;
-    }
+}
 
 // @public
 export enum ShimmerElementsDefaultHeights {
@@ -9668,7 +9666,7 @@ export class SuggestionsControl<T> extends React_2.Component<ISuggestionsControl
     protected selectPreviousItem(itemType: SuggestionItemType, originalItemType?: SuggestionItemType): void;
     // (undocumented)
     protected _suggestions: React_2.RefObject<SuggestionsCore<T>>;
-    }
+}
 
 // @public (undocumented)
 export class SuggestionsController<T> {
@@ -9734,7 +9732,7 @@ export class SuggestionsCore<T> extends React_2.Component<ISuggestionsCoreProps<
     protected _selectedElement: React_2.RefObject<HTMLDivElement>;
     // (undocumented)
     setSelectedSuggestion(index: number): void;
-    }
+}
 
 // @public (undocumented)
 export class SuggestionsHeaderFooterItem extends React_2.Component<ISuggestionsHeaderFooterItemProps, {}> {
@@ -9819,7 +9817,6 @@ export const TeachingBubbleContentBase: React_2.FunctionComponent<ITeachingBubbl
 
 // @public (undocumented)
 const Text_2: React_2.FunctionComponent<ITextProps>;
-
 export { Text_2 as Text }
 
 // @public (undocumented)
@@ -9852,7 +9849,7 @@ export class TextFieldBase extends React_2.Component<ITextFieldProps, ITextField
     setSelectionRange(start: number, end: number): void;
     setSelectionStart(value: number): void;
     get value(): string | undefined;
-    }
+}
 
 // @public (undocumented)
 export const TextStyles: ITextComponent['styles'];
@@ -9872,7 +9869,7 @@ export class ThemeGenerator {
     static getThemeForPowerShell(slotRules: IThemeRules): any;
     static insureSlots(slotRules: IThemeRules, isInverted: boolean): void;
     static setSlot(rule: IThemeSlotRule, color: string | IColor, isInverted?: boolean, isCustomization?: boolean, overwriteCustomColor?: boolean): void;
-    }
+}
 
 // @public
 export const ThemeProvider: React_2.FunctionComponent<ThemeProviderProps>;
@@ -9934,7 +9931,7 @@ export class TooltipHostBase extends React_2.Component<ITooltipHostProps, IToolt
     render(): JSX.Element;
     // (undocumented)
     show: () => void;
-    }
+}
 
 // @public (undocumented)
 export enum TooltipOverflowMode {

diff --git a/packages/react/src/components/DetailsList/DetailsRow.base.tsx b/packages/react/src/components/DetailsList/DetailsRow.base.tsx
@@ -305,6 +305,7 @@ export class DetailsRowBase extends React.Component<IDetailsRowBaseProps, IDetai
             {onRenderCheck({
               id: id ? `${id}-checkbox` : undefined,
               selected: isSelected,
+              selectionMode,
               anySelected: isSelectionModal,
               'aria-label': checkButtonAriaLabel,
               'aria-labelledby': id ? `${id}-checkbox ${id}-header` : undefined,

diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -8,6 +8,7 @@ import {
 import { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities';
 import { Check } from '../../Check';
 import { getStyles } from './DetailsRowCheck.styles';
+import { SelectionMode } from '../../Selection';
 import { ITheme } from '../../Styling';
 
 const getClassNames = classNamesFunction<IDetailsRowCheckStyleProps, IDetailsRowCheckStyles>();
@@ -18,6 +19,7 @@ const DetailsRowCheckBase: React.FunctionComponent<IDetailsRowCheckProps> = prop
     canSelect = false,
     anySelected = false,
     selected = false,
+    selectionMode,
     isHeader = false,
     className,
     checkClassName,
@@ -52,10 +54,12 @@ const DetailsRowCheckBase: React.FunctionComponent<IDetailsRowCheckProps> = prop
 
   const divProps = getNativeElementProps('div', buttonProps, ['aria-label', 'aria-labelledby', 'aria-describedby']);
 
+  const checkRole = selectionMode === SelectionMode.single ? 'radio' : 'checkbox';
+
   return canSelect ? (
     <div
       {...buttonProps}
-      role="checkbox"
+      role={checkRole}
       // eslint-disable-next-line deprecation/deprecation
       className={css(classNames.root, classNames.check)}
       aria-checked={selected}

diff --git a/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts b/packages/react/src/components/DetailsList/DetailsRowCheck.types.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SelectionMode } from '../../Selection';
 import { IStyle, ITheme } from '../../Styling';
 import { IStyleFunctionOrObject, IRenderFunction } from '../../Utilities';
 
@@ -36,6 +37,11 @@ export interface IDetailsRowCheckProps extends React.HTMLAttributes<HTMLElement>
    */
   canSelect: boolean;
 
+  /**
+   * Selection mode
+   */
+  selectionMode?: SelectionMode;
+
   /**
    * Is this in compact mode?
    */

diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
@@ -1872,7 +1872,7 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
           }
       data-automationid="DetailsRowCheck"
       data-selection-toggle={true}
-      role="checkbox"
+      role="radio"
       tabIndex={-1}
     >
       <div