fix: Move focus to the attribute editor add button even if currently disabled (#3035)

Author: avinashbot

src/attribute-editor/__tests__/attribute-editor.test.tsx

@@ -167,19 +167,26 @@ describe('Attribute Editor', () => {
     test('enables the add button by default', () => {
       const wrapper = renderAttributeEditor({ ...defaultProps });
       const buttonElement = wrapper.findAddButton().getElement();
-      expect(buttonElement).not.toHaveAttribute('disabled');
+      expect(buttonElement).not.toHaveAttribute('aria-disabled');
     });
 
     test('enables the add button when disableAddButton is false', () => {
       const wrapper = renderAttributeEditor({ ...defaultProps, disableAddButton: false });
       const buttonElement = wrapper.findAddButton().getElement();
-      expect(buttonElement).not.toHaveAttribute('disabled');
+      expect(buttonElement).not.toHaveAttribute('aria-disabled');
     });
 
     test('disables the add button when disableAddButton is true', () => {
       const wrapper = renderAttributeEditor({ ...defaultProps, disableAddButton: true });
       const buttonElement = wrapper.findAddButton().getElement();
-      expect(buttonElement).toHaveAttribute('disabled');
+      expect(buttonElement).toHaveAttribute('aria-disabled');
+    });
+
+    test('allows the add button to be focused manually when disableAddButton is true', () => {
+      const ref: React.Ref<AttributeEditorProps.Ref> = React.createRef();
+      const wrapper = renderAttributeEditor({ ...defaultProps, ref, disableAddButton: true });
+      ref.current!.focusAddButton();
+      expect(wrapper.findAddButton().getElement()).toHaveFocus();
     });
 
     test('has no aria-describedby if there is no additional info', () => {

src/attribute-editor/internal.tsx

@@ -103,6 +103,11 @@ const InternalAttributeEditor = React.forwardRef(
         <InternalButton
           className={styles['add-button']}
           disabled={disableAddButton}
+          // Using aria-disabled="true" and tabindex="-1" instead of "disabled"
+          // because focus can be dynamically moved to this button by calling
+          // `focusAddButton()` on the ref.
+          __nativeAttributes={disableAddButton ? { tabIndex: -1 } : {}}
+          __focusable={true}
           onClick={onAddButtonClick}
           formAction="none"
           ref={addButtonRef}

src/tag-editor/__tests__/tag-editor.test.tsx

@@ -283,7 +283,7 @@ describe('Tag Editor component', () => {
     test('is not disabled by default ', () => {
       const { wrapper } = renderTagEditor();
 
-      expect(wrapper.findAddButton().getElement()).not.toHaveAttribute('disabled');
+      expect(wrapper.findAddButton().getElement()).not.toHaveAttribute('aria-disabled');
     });
 
     test('is disabled when tag limit has been reached', () => {
@@ -292,7 +292,7 @@ describe('Tag Editor component', () => {
         tagLimit: 1,
       });
 
-      expect(wrapper.findAddButton().getElement()).toHaveAttribute('disabled');
+      expect(wrapper.findAddButton().getElement()).toHaveAttribute('aria-disabled');
     });
 
     test('is disabled when tag limit has been exceeded', () => {
@@ -304,7 +304,7 @@ describe('Tag Editor component', () => {
         tagLimit: 1,
       });
 
-      expect(wrapper.findAddButton().getElement()).toHaveAttribute('disabled');
+      expect(wrapper.findAddButton().getElement()).toHaveAttribute('aria-disabled');
     });
 
     test('adds an empty tag when there are no tags', () => {