feat(label+labelGroup): update aria-labels to include label text (#8192)

* feat(label+labelGroup): update aria-labels to include editable label text * PR feedback from Eric
patternfly · Oct 13, 2022 · f99a34d · f99a34d
1 parent 0afb2a9
commit f99a34d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx
@@ -31,7 +31,7 @@ export const LabelEditable: React.FunctionComponent = () => {
         onEditComplete={onEditComplete}
         isEditable
         editableProps={{
-          'aria-label': 'Editable text',
+          'aria-label': `Editable label with text ${labelText}`,
           id: 'editable-label'
         }}
       >
@@ -46,7 +46,7 @@ export const LabelEditable: React.FunctionComponent = () => {
         onEditComplete={onCompactEditComplete}
         isEditable
         editableProps={{
-          'aria-label': 'Compact editable text',
+          'aria-label': `Editable compact label with text ${compactLabelText}`,
           id: 'compact-editable-label'
         }}
       >

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx
@@ -11,7 +11,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
       props: {
         isEditable: true,
         editableProps: {
-          'aria-label': 'label editable text'
+          'aria-label': 'Editable label with text Label 3'
         }
       },
       id: 2
@@ -24,7 +24,12 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
 
   const onEdit = (nextText: string, index: number) => {
     const copy = [...labels];
-    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    const updatedProps = {
+      ...labels[index].props,
+      editableProps: { 'aria-label': `Editable label with text ${nextText}` }
+    };
+
+    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };
     setLabels(copy);
   };
 
@@ -35,7 +40,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
         props: {
           isEditable: true,
           editableProps: {
-            'aria-label': 'label editable text'
+            'aria-label': `Editable label with text New Label`
           }
         },
         id: idIndex

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddDropdown.tsx
@@ -16,7 +16,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
       props: {
         isEditable: true,
         editableProps: {
-          'aria-label': 'label editable text'
+          'aria-label': 'Editable label with text Label 3'
         }
       },
       id: 2
@@ -29,7 +29,12 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
 
   const onEdit = (nextText: string, index: number) => {
     const copy = [...labels];
-    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    const updatedProps = {
+      ...labels[index].props,
+      editableProps: { 'aria-label': `Editable label with text ${nextText}` }
+    };
+
+    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };
     setLabels(copy);
   };
 

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx
@@ -47,7 +47,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
       props: {
         isEditable: true,
         editableProps: {
-          'aria-label': 'label editable text'
+          'aria-label': 'Editable label with text Label 3'
         }
       },
       id: 6
@@ -60,7 +60,12 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
 
   const onEdit = (nextText: string, index: number) => {
     const copy = [...labels];
-    copy[index] = { name: nextText, props: labels[index].props, id: labels[index].id };
+    const updatedProps = {
+      ...labels[index].props,
+      editableProps: { 'aria-label': `Editable label with text ${nextText}` }
+    };
+
+    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };
     setLabels(copy);
   };
 
@@ -81,7 +86,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           isEditable: isEditable !== undefined ? isEditable : true,
           ...(isEditable && {
             editableProps: {
-              'aria-label': 'label editable text'
+              'aria-label': `Editable label with text ${labelText || 'New Label'}`
             }
           })
         },

diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx
@@ -15,7 +15,7 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
         onEditComplete={newText => setLabel1(newText)}
         isEditable
         editableProps={{
-          'aria-label': 'Editable text',
+          'aria-label': `Editable label with text ${label1}`,
           id: 'editable-label-1'
         }}
       >
@@ -29,7 +29,7 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
         onEditComplete={newText => setLabel2(newText)}
         isEditable
         editableProps={{
-          'aria-label': 'Editable text 2',
+          'aria-label': `Editable label with text ${label2}`,
           id: 'editable-label-2'
         }}
       >
@@ -42,7 +42,7 @@ export const LabelGroupEditableLabels: React.FunctionComponent = () => {
         onEditComplete={newText => setLabel3(newText)}
         isEditable
         editableProps={{
-          'aria-label': 'Editable text 3',
+          'aria-label': `Editable label with text ${label3}`,
           id: 'editable-label-3'
         }}
       >