From 17cabeb70510238f3bc9b78e5749bcf9001eac2d Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Thu, 6 Oct 2022 16:34:41 -0400 Subject: [PATCH 1/2] feat(label+labelGroup): update aria-labels to include editable label text --- .../src/components/Label/examples/LabelEditable.tsx | 4 ++-- .../LabelGroup/examples/LabelGroupEditableAdd.tsx | 9 +++++++-- .../examples/LabelGroupEditableAddDropdown.tsx | 9 +++++++-- .../LabelGroup/examples/LabelGroupEditableAddModal.tsx | 9 +++++++-- .../LabelGroup/examples/LabelGroupEditableLabels.tsx | 6 +++--- 5 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx index 6dbc76900b7..80b5073b2a8 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 ${labelText}`, 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..5e97e31fe03 100644 --- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx +++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAdd.tsx @@ -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..fc6afe1aab3 100644 --- a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx +++ b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx @@ -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' }} > From 73f8f1e80d53f6cb14888205a80372052b1ea405 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Wed, 12 Oct 2022 11:50:45 -0400 Subject: [PATCH 2/2] PR feedback from Eric --- .../react-core/src/components/Label/examples/LabelEditable.tsx | 2 +- .../components/LabelGroup/examples/LabelGroupEditableAdd.tsx | 2 +- .../LabelGroup/examples/LabelGroupEditableAddModal.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx index 80b5073b2a8..5b5e018bbf0 100644 --- a/packages/react-core/src/components/Label/examples/LabelEditable.tsx +++ b/packages/react-core/src/components/Label/examples/LabelEditable.tsx @@ -46,7 +46,7 @@ export const LabelEditable: React.FunctionComponent = () => { onEditComplete={onCompactEditComplete} isEditable editableProps={{ - 'aria-label': `Editable compact label with text ${labelText}`, + '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 5e97e31fe03..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 diff --git a/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx index fc6afe1aab3..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