diff --git a/src/components/EditableField/EditableField.Actions.jsx b/src/components/EditableField/EditableField.Actions.jsx index baf8b9c63..c2a79e8e8 100644 --- a/src/components/EditableField/EditableField.Actions.jsx +++ b/src/components/EditableField/EditableField.Actions.jsx @@ -61,6 +61,7 @@ export class EditableFieldActions extends React.Component { onClick={event => { this.handleActionClick({ action, event }) }} + {...action.buttonAttrs} > diff --git a/src/components/EditableField/EditableField.stories.mdx b/src/components/EditableField/EditableField.stories.mdx index 29a240b80..59298900e 100644 --- a/src/components/EditableField/EditableField.stories.mdx +++ b/src/components/EditableField/EditableField.stories.mdx @@ -68,8 +68,9 @@ A special type of inputs that allow you to edit it inline - `"link"`: For url types, adds a button to open a new tab/window with the url - By default `EditableField` incorporates one action: “delete” - To override either of the predefined actions, pass them in the array using the same action name -- If the user doesn’t want any action, she needs to explicitly pass `null` +- If the user doesn't want any action, she needs to explicitly pass `null` - `icon` should be the name of an Icon that is present in HSDS +- Pass a `buttonAttrs` object to attach attributes directly on the html button (such as aria labels): `{ buttonAttrs: { 'aria-label': 'My important button' } }` ### onCommit @@ -238,6 +239,9 @@ const ATLAS = { callback(obj) { console.log('HSDS: EditableFieldApp -> callback -> obj', obj) }, + buttonAttrs: { + 'aria-label': 'some aria label', + }, }} />