diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx index 6dbc76900b7..5b5e018bbf0 100644 --- 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 index 377b4d01d37..e89cfa282ed 100644 --- 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 index 0e4fbf286ad..2f6cfe1ecae 100644 --- 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 index 3a51ecfe8f2..05b5ebfcf8a 100644 --- 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 index c9f59089869..ef65dd3dd92 100644 --- 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' }} >