docs: update title of v8 keyboard-accessible drag & drop example, add…

… docs (microsoft#32216)
tomi-msft · Aug 6, 2024 · 0a15037 · 0a15037
1 parent 7f847ed
commit 0a15037
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/.../public-docsite/src/pages/Controls/DetailsListPage/DetailsListKeyboardDragDropPage.doc.ts b/.../public-docsite/src/pages/Controls/DetailsListPage/DetailsListKeyboardDragDropPage.doc.ts
@@ -4,6 +4,6 @@ import { DetailsListKeyboardAccessibleResizeAndReorderProps as ExternalProps } f
 export const DetailsListKeyboardDragDropPageProps: TFabricPlatformPageProps = {
   web: {
     ...(ExternalProps as any),
-    title: 'DetailsList - Keyboard Column Reorder & Resize',
+    title: 'DetailsList - Accessible Column Reorder & Resize',
   },
 };
diff --git a/...examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx b/...examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx
@@ -35,7 +35,7 @@ const controlWrapperClass = mergeStyles({
   flexWrap: 'wrap',
 });
 const textFieldStyles: Partial<ITextFieldStyles> = {
-  root: { margin: margin },
+  root: { margin },
   fieldGroup: { maxWidth: '100px' },
 };
 const togglesStyles: Partial<IToggleStyles> = { root: { margin } };
@@ -62,7 +62,7 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
     return {
       frozenColumnCountFromStart: parseInt(frozenColumnCountFromStart, 10),
       frozenColumnCountFromEnd: parseInt(frozenColumnCountFromEnd, 10),
-      handleColumnReorder: handleColumnReorder,
+      handleColumnReorder,
     };
   };
 
@@ -110,7 +110,7 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
     if (columnToEdit.current && input.current && detailsList) {
       if (clickHandler.current === RESIZE) {
         const width = input.current;
-        detailsList.updateColumn(columnToEdit.current, { width: width });
+        detailsList.updateColumn(columnToEdit.current, { width });
       } else if (clickHandler.current === REORDER) {
         const targetIndex = selection.mode ? input.current + 1 : input.current;
         detailsList.updateColumn(columnToEdit.current, { newColumnIndex: targetIndex });
@@ -135,7 +135,7 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
     ];
 
     return {
-      items: items,
+      items,
       target: ev.currentTarget as HTMLElement,
       gapSpace: 10,
       isBeakVisible: true,
@@ -322,6 +322,11 @@ export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.Functio
 
   return (
     <div>
+      <p>
+        This example demonstrates how to implement reordering and resizing in a way that is both keyboard-accessible and
+        meets WCAG 2.2's{' '}
+        <a href="https://w3c.github.io/wcag/understanding/dragging-movements.html">Dragging Movements</a> requirement.
+      </p>
       <div className={controlWrapperClass}>
         <Toggle
           label="Enable column reorder"

diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.doc.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.doc.tsx
@@ -212,7 +212,7 @@ export const DetailsListCustomFooterPageProps: IDocPageProps = generateProps({
 });
 
 export const DetailsListKeyboardAccessibleResizeAndReorderProps: IDocPageProps = generateProps({
-  title: 'Keyboard-accessible column reordering and resizing',
+  title: 'Accessible column reordering and resizing',
   code: DetailsListKeyboardAccessibleResizeAndReorderExampleCode,
   view: <DetailsListKeyboardAccessibleResizeAndReorderExample />,
 });