feat(DataList): a11y changes part 1

patternfly · Sep 30, 2020 · 1909b2c · 1909b2c
1 parent 7e64c0e
commit 1909b2c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/packages/react-core/src/components/DataList/DataList.tsx b/packages/react-core/src/components/DataList/DataList.tsx
@@ -89,7 +89,8 @@ export class DataList extends React.Component<DataListProps, DataListState> {
 
   move = (arr: React.ReactElement[], oldIndex: number, newIndex: number) => {
     const ghost = React.cloneElement(this.state.draggedItem, {
-      className: css(this.state.draggedItem.props.className, styles.modifiers.ghostRow)
+      className: css(this.state.draggedItem.props.className, styles.modifiers.ghostRow),
+      'aria-pressed': true
     });
 
     arr.splice(oldIndex, 1);

diff --git a/packages/react-core/src/components/DataList/examples/DataList.md b/packages/react-core/src/components/DataList/examples/DataList.md
@@ -1103,9 +1103,13 @@ class DraggableDataList extends React.Component {
         <DataListItem aria-labelledby="simple-item1" id="data1" key="1">
           <DataListItemRow>
             <DataListControl>
-              <DataListDragButton />
-
-              <DataListCheck aria-labelledby="check-item1" name="check1" otherControls />
+              <DataListDragButton
+                aria-label="Reorder"
+                aria-labelledby="simple-item1"
+                aria-describedby="Press space to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                aria-pressed="false"
+              />
+              <DataListCheck aria-labelledby="simple-item1" name="check1" otherControls />
             </DataListControl>
             <DataListItemCells
               dataListCells={[
@@ -1119,8 +1123,13 @@ class DraggableDataList extends React.Component {
         <DataListItem aria-labelledby="simple-item2" id="data2" key="2">
           <DataListItemRow>
             <DataListControl>
-              <DataListDragButton />
-              <DataListCheck aria-labelledby="check-item2" name="check2" otherControls />
+              <DataListDragButton
+                aria-label="Reorder"
+                aria-labelledby="simple-item2"
+                aria-describedby="Press space to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                aria-pressed="false"
+              />
+              <DataListCheck aria-labelledby="simple-item2" name="check2" otherControls />
             </DataListControl>
             <DataListItemCells
               dataListCells={[
@@ -1134,8 +1143,13 @@ class DraggableDataList extends React.Component {
         <DataListItem aria-labelledby="simple-item3" id="data3" key="3">
           <DataListItemRow>
             <DataListControl>
-              <DataListDragButton />
-              <DataListCheck aria-labelledby="check-item3" name="check3" otherControls />
+              <DataListDragButton
+                aria-label="Reorder"
+                aria-labelledby="simple-item3"
+                aria-describedby="Press space to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                aria-pressed="false"
+              />
+              <DataListCheck aria-labelledby="simple-item3" name="check3" otherControls />
             </DataListControl>
             <DataListItemCells
               dataListCells={[
@@ -1149,8 +1163,13 @@ class DraggableDataList extends React.Component {
         <DataListItem aria-labelledby="simple-item4" id="data4" key="4">
           <DataListItemRow>
             <DataListControl>
-              <DataListDragButton />
-              <DataListCheck aria-labelledby="check-item4" name="check4" otherControls />
+              <DataListDragButton
+                aria-label="Reorder"
+                aria-labelledby="simple-item4"
+                aria-describedby="Press space to begin dragging, and use the arrow keys to navigate up or down. Press enter to confirm the drag, or any other key to cancel the drag operation."
+                aria-pressed="false"
+              />
+              <DataListCheck aria-labelledby="simple-item4" name="check4" otherControls />
             </DataListControl>
             <DataListItemCells
               dataListCells={[