DetailsList Fluent UI

[lipalath-ms]

I followed https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/compact to display details list.

Is it possible to update the highlighted one:

to:

[ValentinaKozlova]

Hi, @spmonahan, coukd you please add your input on that discussion?
@ilantom, do you mean to change the icon to the custom one?

[ValentinaKozlova]

Looks like you need to use onRenderCheckbox prop.
Here's the example:

const onRenderCheck = ({ isSelected }: { isSelected: boolean }) => {
    return (
      <span
        key="check"
        role="checkbox"
        aria-label={'some-aria-label'}
        data-selection-toggle={true}
        aria-checked={isSelected}
      >
        <input type="checkbox" />
      </span>
    );
  };

And then use it in the DataList:

<DetailsList
          onRenderCheckbox={onRenderCheck}
            compact={true}
            items={items}
            columns={this._columns}
            setKey="set"
            layoutMode={DetailsListLayoutMode.justified}
            selection={this._selection}
            selectionPreservedOnEmptyClick={true}
            onItemInvoked={this._onItemInvoked}
            ariaLabelForSelectionColumn="Toggle selection"
            ariaLabelForSelectAllCheckbox="Toggle selection for all items"
            checkButtonAriaLabel="select row"
          />

Example on codepen:
https://codepen.io/Aeternitas13/pen/abQmPrj?editors=1111

[spmonahan]

This should work.

[pns09]

@ValentinaKozlova, @spmonahan
Looks like this approach of rendering custom checkboxes is making the below FastPass accessibility check failed.

Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with 'aria-hidden=true')

My Dom look like below:

If I set the tabindex=0 or remove that property on the input element, another FastPass check fails with error: 'Element has focusable descendants' so that's not a feasible approach.

I'm rendering the customCheckBoxes like below

const renderCustomCheckBox = (listCheckboxProps: IDetailsListCheckboxProps, localizationService: ILocalizationService): JSX.Element => {
    const checkboxProps: ICheckboxProps = {
        ariaLabel: localizationService.get('Checkbox'),
        onChange: (event: React.FormEvent<HTMLElement | HTMLInputElement>) => event.stopPropagation(),
        inputProps: {
            ['data-selection-disabled']: true,
        } as any,
        styles: {
            checkbox: {
                width: '16px',
                height: '16px',
            }
        }
    };

    return <Checkbox {...checkboxProps} {...listCheckboxProps} />;
};

Note: above Checkbox is imported from import { Checkbox } from '@fluentui/react'

Please let me know how to overcome this issue. Thanks!

[smhigley]

Hi! That error is a little misleading, I believe. The real problem is that onRenderCheckbox renders the icon inside the semantic checkbox, and should not itself return any focusable or semantically interactive content (i.e. no role="checkbox", <input type="checkbox">, etc.) Having nested interactive content, and especially interactive content within a checkbox, causes a number of practical issues as well as automated errors 😅

I'll add a new answer with the correct semantics below.

[smhigley]

Adding this as a separate answer for ease. @ValentinaKozlova's suggestion is essentially correct, except that the rendered UI inside of onRenderCheckbox should not contain any focusable content or content with non-generic semantics (i.e. no checkboxes, buttons, etc.). I don't know if you already ran into this, but the boolean prop name in the onRenderCheckbox function to tell whether the row is currently selected is checked and not isSelected.

To render a custom icon instead of our default check icon, do the following:

private _onRenderCheckbox = ({ checked }) => {
    return <span className="your-custom-class">{checked ? '✅' : '⬜️'}</span>;
}

return (
    <DetailsList
            items={items}
            columns={this._columns}
            {...etc.}
            onRenderCheckbox={this._onRenderCheckbox}
    />
);

[pns09]

Above solution fixed the FastPass issue that I was facing. Thanks!