ENH Add tabindex prop

Author: emteknetnz

client/dist/js/bundle.js

@@ -62,6 +62,7 @@ const LinkField = ({
   ownerRelation,
   excludeLinkTextField = false,
   inHistoryViewer,
+  tabIndex = 0,
 }) => {
   const [data, setData] = useState({});
   const [editingID, setEditingID] = useState(0);
@@ -537,7 +538,8 @@ const LinkField = ({
     actions,
     loading,
     excludeLinkTextField,
-    inHistoryViewer
+    inHistoryViewer,
+    tabIndex,
   }}>
     <div className="link-field__container">
       { renderLoadingError && <div className="link-field__loading-error">{loadingErrorText}</div> }
@@ -582,6 +584,7 @@ LinkField.propTypes = {
   ownerRelation: PropTypes.string.isRequired,
   excludeLinkTextField: PropTypes.bool,
   inHistoryViewer: PropTypes.bool,
+  tabIndex: PropTypes.number,
 };
 
 // redux actions loaded into props - used to get toast notifications

client/src/components/LinkField/LinkField.js

@@ -54,6 +54,7 @@ function makeProps(obj = {}) {
     ownerID: 123,
     ownerClass: 'Page',
     ownerRelation: 'MyRelation',
+    tabIndex: 0,
     ...obj
   };
 }

client/src/components/LinkField/tests/LinkField-test.js

@@ -9,7 +9,7 @@ import LinkType from 'types/LinkType';
 const LinkPickerMenu = ({ types, onSelect, dropdownToggleRef }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(prevState => !prevState);
-  const { loading } = useContext(LinkFieldContext);
+  const { loading, tabIndex } = useContext(LinkFieldContext);
   const ariaLabel = i18n._t('LinkField.ADD_LINK', 'Add link');
 
   return <Dropdown
@@ -24,6 +24,7 @@ const LinkPickerMenu = ({ types, onSelect, dropdownToggleRef }) => {
         color="secondary"
         aria-label={ariaLabel}
         innerRef={dropdownToggleRef}
+        tabIndex={tabIndex}
       >
         {i18n._t('LinkField.ADD_LINK', 'Add Link')}
       </DropdownToggle>