DetailsRow: Make data-is-focusable configurable

[KevinTCoughlin]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

Alternative approach to #10619 which minimizes API changes.

The issue is a partner team ask to make data-is-focusable attribute configurable for DetailsRow. Currently it is set to true always.

Usage

To override data-is-focusable with this change-set, one must supply a custom row render method like the following:

diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
index 0c1928800..50109a117 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
@@ -4,6 +4,7 @@ import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-u
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
 import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
+import { DetailsRow, IDetailsRowProps } from '../DetailsRow';
 
 const exampleChildClass = mergeStyles({
   display: 'block',
@@ -78,12 +79,17 @@ export class DetailsListBasicExample extends React.Component<{}, IDetailsListBas
             ariaLabelForSelectAllCheckbox="Toggle selection for all items"
             checkButtonAriaLabel="Row checkbox"
             onItemInvoked={this._onItemInvoked}
+            onRenderRow={this._onRenderRow}
           />
         </MarqueeSelection>
       </Fabric>
     );
   }
 
+  private _onRenderRow = (props: IDetailsRowProps) => {
+    return <DetailsRow {...props} data-is-focusable={false} />;
+  };
+
   private _getSelectionDetails(): string {
     const selectionCount = this._selection.getSelectedCount();

cc: @RajeshGoriga @Raghurk

Focus areas to test

• CI should pass

Microsoft Reviewers: Open in CodeFlow

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	DetailsList	206.073 kB	206.072 kB	-1 bytes
office-ui-fabric-react	ShimmeredDetailsList	216.593 kB	216.592 kB	-1 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: b7c8084f1e54c8f3d827fc9d8af793285d4f54e0 (build)

[msft-github-bot]

Component Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks	Status
BaseButton	793	765
BaseButton (experiments)	1080	1044
DefaultButton	1053	1045
DefaultButton (experiments)	2033	2050
DetailsRow	3408	3391
DetailsRow (fast icons)	3476	3489
DetailsRow without styles	3196	3201
DocumentCardTitle with truncation	32984	32938
MenuButton	1373	1368
MenuButton (experiments)	3721	3759
PrimaryButton	1223	1227
PrimaryButton (experiments)	2135	2137
SplitButton	2973	2938
SplitButton (experiments)	7404	7509
Stack	524	498
Stack with Intrinsic children	1138	1182
Stack with Text children	4522	4611
Text	406	393
Toggle	872	903
Toggle (experiments)	2419	2445
button	66	62

[msft-github-bot]

Hello @KevinTCoughlin!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

Do note that I've been instructed to only help merge pull requests of this repository that have been opened for at least 8 hours, a condition that will be fulfilled in about 5 hours 31 minutes. No worries though, I will be back when the time is right! 😉

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

[msft-github-bot]

🎉office-ui-fabric-react@v6.210.1 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[msft-github-bot]

🎉office-ui-fabric-react@v7.55.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site