diff --git a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
index f3c41cc37..1ba3573da 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/DesktopNavbar.jsx
@@ -131,7 +131,7 @@ export default function DesktopNavbar() {
                 <a
                   data-test="CreateDashboardMenuItem"
                   role="menuitem"
-                  tabIndex="0"
+                  tabIndex={0}
                   onMouseUp={() => CreateDashboardDialog.showModal()}>
                   New Dashboard
                 </a>
@@ -184,7 +184,7 @@ export default function DesktopNavbar() {
           )}
           <Menu.Divider />
           <Menu.Item key="logout">
-            <a data-test="LogOutButton" role="menuitem" tabIndex="0" onClick={() => Auth.logout()}>
+            <a data-test="LogOutButton" role="menuitem" tabIndex={0} onClick={() => Auth.logout()}>
               Log out
             </a>
           </Menu.Item>
diff --git a/client/app/components/EditInPlace.jsx b/client/app/components/EditInPlace.jsx
index 04c2937ad..de37e0385 100644
--- a/client/app/components/EditInPlace.jsx
+++ b/client/app/components/EditInPlace.jsx
@@ -75,7 +75,7 @@ export default class EditInPlace extends React.Component {
         {this.props.value}
       </span>
     ) : (
-      <a className="clickable" role="link" tabIndex="0" onClick={this.startEditing}>
+      <a className="clickable" role="link" tabIndex={0} onClick={this.startEditing}>
         {this.props.placeholder}
       </a>
     );
diff --git a/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx b/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
index 07999c8a2..813a922e8 100644
--- a/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
+++ b/client/app/components/EditVisualizationButton/QueryControlDropdown.jsx
@@ -21,7 +21,7 @@ export default function QueryControlDropdown(props) {
           <a
             target="_self"
             role="menuitem"
-            tabIndex="0"
+            tabIndex={0}
             onClick={() => props.openAddToDashboardForm(props.selectedTab)}>
             <PlusCircleFilledIcon /> Add to Dashboard
           </a>
@@ -31,7 +31,7 @@ export default function QueryControlDropdown(props) {
         <Menu.Item>
           <a
             role="menuitem"
-            tabIndex="0"
+            tabIndex={0}
             onClick={() => props.showEmbedDialog(props.query, props.selectedTab)}
             data-test="ShowEmbedDialogButton">
             <ShareAltOutlinedIcon /> Embed Elsewhere
diff --git a/client/app/components/FavoritesControl.jsx b/client/app/components/FavoritesControl.jsx
index 614c6350d..39f494097 100644
--- a/client/app/components/FavoritesControl.jsx
+++ b/client/app/components/FavoritesControl.jsx
@@ -33,7 +33,7 @@ export default class FavoritesControl extends React.Component {
         title={title}
         className="favorites-control btn-favourite"
         role="button"
-        tabIndex="0"
+        tabIndex={0}
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
       </a>
diff --git a/client/app/components/HelpTrigger.jsx b/client/app/components/HelpTrigger.jsx
index 345e8121f..480c4ac80 100644
--- a/client/app/components/HelpTrigger.jsx
+++ b/client/app/components/HelpTrigger.jsx
@@ -202,7 +202,7 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   </Tooltip>
                 )}
                 <Tooltip title="Close" placement="bottom">
-                  <a onClick={this.closeDrawer} role="button" tabIndex="-1">
+                  <a onClick={this.closeDrawer} role="button" tabIndex={-1}>
                     <CloseOutlinedIcon aria-hidden="true" />
                   </a>
                 </Tooltip>
diff --git a/client/app/components/PermissionsEditorDialog/index.jsx b/client/app/components/PermissionsEditorDialog/index.jsx
index 9b5d8a35d..87590bd17 100644
--- a/client/app/components/PermissionsEditorDialog/index.jsx
+++ b/client/app/components/PermissionsEditorDialog/index.jsx
@@ -171,7 +171,7 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
                   <Tooltip title="Remove user permissions">
                     <i
                       role="button"
-                      tabIndex="-1"
+                      tabIndex={-1}
                       onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}
                       className="fa fa-remove clickable"
                     />
diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx
index 3eddde67e..0e4d22849 100644
--- a/client/app/components/QuerySelector.jsx
+++ b/client/app/components/QuerySelector.jsx
@@ -71,7 +71,7 @@ export default function QuerySelector(props) {
             className={cx("query-selector-result", "list-group-item", { inactive: q.is_draft })}
             key={q.id}
             role="menuitem"
-            tabIndex="0"
+            tabIndex={0}
             onClick={() => selectQuery(q.id)}
             data-test={`QueryId${q.id}`}>
             {q.name} <QueryTagsControl isDraft={q.is_draft} tags={q.tags} className="inline-tags-control" />
diff --git a/client/app/components/Resizable/index.jsx b/client/app/components/Resizable/index.jsx
index 97a1dfb88..c446b2b14 100644
--- a/client/app/components/Resizable/index.jsx
+++ b/client/app/components/Resizable/index.jsx
@@ -54,7 +54,7 @@ export default function Resizable({ toggleShortcut, direction, sizeAttribute, ch
       <span
         className={`react-resizable-handle react-resizable-handle-${direction}`}
         role="gridcell"
-        tabIndex="-1"
+        tabIndex={-1}
         onClick={() => {
           // On desktops resize uses `mousedown`/`mousemove`/`mouseup` events, and there is a conflict
           // with this `click` handler: after user releases mouse - this handler will be executed.
diff --git a/client/app/components/TagsList.tsx b/client/app/components/TagsList.tsx
index d704b703c..d8bb49308 100644
--- a/client/app/components/TagsList.tsx
+++ b/client/app/components/TagsList.tsx
@@ -79,7 +79,7 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
       <div className="tags-list-title">
         <span className="tags-list-label">Tags</span>
         {showUnselectAll && selectedTags.length > 0 && (
-          <a role="button" tabIndex="0" onClick={unselectAll}>
+          <a role="button" tabIndex={0} onClick={unselectAll}>
             <CloseOutlinedIcon />
             clear selection
           </a>
@@ -93,7 +93,7 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
               <a
                 className="d-flex align-items-center justify-content-between"
                 role="menuitem"
-                tabIndex="0"
+                tabIndex={0}
                 onClick={event => toggleTag(event, tag.name)}>
                 <span className="max-character col-xs-11">{tag.name}</span>
                 <Badge count={tag.count} />
diff --git a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
index d0047f65c..6a82a00ac 100644
--- a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
@@ -160,7 +160,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
           <a
             className="refresh-button hidden-print btn btn-sm btn-default btn-transparent"
             role="button"
-            tabIndex="0"
+            tabIndex={0}
             onClick={() => refreshWidget(1)}
             data-test="RefreshButton">
             <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 1 })} />{" "}
@@ -181,7 +181,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
           <a
             className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh"
             role="button"
-            tabIndex="0"
+            tabIndex={0}
             onClick={() => refreshWidget(2)}>
             <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} />
           </a>
@@ -189,7 +189,7 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
         <a
           className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh"
           role="button"
-          tabIndex="0"
+          tabIndex={0}
           onClick={onExpand}>
           <i className="zmdi zmdi-fullscreen" />
         </a>
diff --git a/client/app/components/dashboards/dashboard-widget/Widget.jsx b/client/app/components/dashboards/dashboard-widget/Widget.jsx
index e6a2ab8bc..9256d8ef1 100644
--- a/client/app/components/dashboards/dashboard-widget/Widget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/Widget.jsx
@@ -49,7 +49,7 @@ function WidgetDeleteButton({ onClick }) {
         className="action"
         title="Remove From Dashboard"
         role="button"
-        tabIndex="0"
+        tabIndex={0}
         onClick={onClick}
         data-test="WidgetDeleteButton">
         <i className="zmdi zmdi-close" />
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index 6ba289ef9..ed4db2d52 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -200,7 +200,7 @@ function EmptyState({
         </div>
       </div>
       {closable && (
-        <a className="close-button" role="button" tabIndex="0" onClick={onClose}>
+        <a className="close-button" role="button" tabIndex={0} onClick={onClose}>
           <CloseOutlinedIcon />
         </a>
       )}
diff --git a/client/app/components/queries/SchedulePhrase.jsx b/client/app/components/queries/SchedulePhrase.jsx
index 3a0c62a91..68d1428b2 100644
--- a/client/app/components/queries/SchedulePhrase.jsx
+++ b/client/app/components/queries/SchedulePhrase.jsx
@@ -51,7 +51,7 @@ export default class SchedulePhrase extends React.Component {
     const content = full ? <Tooltip title={full}>{short}</Tooltip> : short;
 
     return this.props.isLink ? (
-      <a className="schedule-phrase" role="link" tabIndex="0" onClick={this.props.onClick} data-test="EditSchedule">
+      <a className="schedule-phrase" role="link" tabIndex={0} onClick={this.props.onClick} data-test="EditSchedule">
         {content}
       </a>
     ) : (
diff --git a/client/app/pages/alert/components/MenuButton.jsx b/client/app/pages/alert/components/MenuButton.jsx
index 89dd2ef5d..258bdf3ac 100644
--- a/client/app/pages/alert/components/MenuButton.jsx
+++ b/client/app/pages/alert/components/MenuButton.jsx
@@ -46,17 +46,17 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
         <Menu>
           <Menu.Item>
             {muted ? (
-              <a role="menuitem" tabIndex="-1" onClick={() => execute(unmute)}>
+              <a role="menuitem" tabIndex={-1} onClick={() => execute(unmute)}>
                 Unmute Notifications
               </a>
             ) : (
-              <a role="menuitem" tabIndex="-1" onClick={() => execute(mute)}>
+              <a role="menuitem" tabIndex={-1} onClick={() => execute(mute)}>
                 Mute Notifications
               </a>
             )}
           </Menu.Item>
           <Menu.Item>
-            <a role="menuitem" tabIndex="-1" onClick={confirmDelete}>
+            <a role="menuitem" tabIndex={-1} onClick={confirmDelete}>
               Delete
             </a>
           </Menu.Item>
diff --git a/client/app/pages/dashboards/components/DashboardHeader.jsx b/client/app/pages/dashboards/components/DashboardHeader.jsx
index 2cde2fc83..fce6d5647 100644
--- a/client/app/pages/dashboards/components/DashboardHeader.jsx
+++ b/client/app/pages/dashboards/components/DashboardHeader.jsx
@@ -138,26 +138,26 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
       overlay={
         <Menu data-test="DashboardMoreButtonMenu">
           <Menu.Item className={cx({ hidden: gridDisabled })}>
-            <a role="menuitem" tabIndex="0" onClick={() => setEditingLayout(true)}>
+            <a role="menuitem" tabIndex={0} onClick={() => setEditingLayout(true)}>
               Edit
             </a>
           </Menu.Item>
           {clientConfig.showPermissionsControl && isDashboardOwnerOrAdmin && (
             <Menu.Item>
-              <a role="menuitem" tabIndex="-1" onClick={managePermissions}>
+              <a role="menuitem" tabIndex={-1} onClick={managePermissions}>
                 Manage Permissions
               </a>
             </Menu.Item>
           )}
           {!clientConfig.disablePublish && !dashboard.is_draft && (
             <Menu.Item>
-              <a role="menuitem" tabIndex="-1" onClick={togglePublished}>
+              <a role="menuitem" tabIndex={-1} onClick={togglePublished}>
                 Unpublish
               </a>
             </Menu.Item>
           )}
           <Menu.Item>
-            <a role="menuitem" tabIndex="-1" onClick={archive}>
+            <a role="menuitem" tabIndex={-1} onClick={archive}>
               Archive
             </a>
           </Menu.Item>
diff --git a/client/app/pages/data-sources/DataSourcesList.jsx b/client/app/pages/data-sources/DataSourcesList.jsx
index 501d8640e..653508ce3 100644
--- a/client/app/pages/data-sources/DataSourcesList.jsx
+++ b/client/app/pages/data-sources/DataSourcesList.jsx
@@ -29,7 +29,7 @@ export function DataSourcesListComponent({ dataSources, onClickCreate }) {
       There are no data sources yet.
       {policy.isCreateDataSourceEnabled() && (
         <div className="m-t-5">
-          <a className="clickable" role="link" tabIndex="0" onClick={onClickCreate} data-test="CreateDataSourceLink">
+          <a className="clickable" role="link" tabIndex={0} onClick={onClickCreate} data-test="CreateDataSourceLink">
             Click here
           </a>{" "}
           to add one.
diff --git a/client/app/pages/destinations/DestinationsList.jsx b/client/app/pages/destinations/DestinationsList.jsx
index 0225192a3..04dca62cb 100644
--- a/client/app/pages/destinations/DestinationsList.jsx
+++ b/client/app/pages/destinations/DestinationsList.jsx
@@ -97,7 +97,7 @@ class DestinationsList extends React.Component {
         There are no alert destinations yet.
         {policy.isCreateDestinationEnabled() && (
           <div className="m-t-5">
-            <a className="clickable" role="link" tabIndex="0" onClick={this.showCreateSourceDialog}>
+            <a className="clickable" role="link" tabIndex={0} onClick={this.showCreateSourceDialog}>
               Click here
             </a>{" "}
             to add one.
diff --git a/client/app/pages/home/Home.jsx b/client/app/pages/home/Home.jsx
index a5b6845a5..a160f5f8a 100644
--- a/client/app/pages/home/Home.jsx
+++ b/client/app/pages/home/Home.jsx
@@ -55,7 +55,7 @@ function EmailNotVerifiedAlert() {
         <>
           We have sent an email with a confirmation link to your email address. Please follow the link to verify your
           email address.{" "}
-          <a className="clickable" role="link" tabIndex="0" onClick={verifyEmail}>
+          <a className="clickable" role="link" tabIndex={0} onClick={verifyEmail}>
             Resend email
           </a>
           .
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
index 0d0090bb3..b0001ad85 100644
--- a/client/app/pages/queries/components/QueryVisualizationTabs.jsx
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -58,7 +58,7 @@ function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props
     <span {...props}>
       {visualizationName}
       {canDelete && (
-        <a className="delete-visualization-button" role="button" tabIndex="0" onClick={handleDelete}>
+        <a className="delete-visualization-button" role="button" tabIndex={0} onClick={handleDelete}>
           <i className="zmdi zmdi-close" />
         </a>
       )}
diff --git a/client/app/pages/query-snippets/QuerySnippetsList.jsx b/client/app/pages/query-snippets/QuerySnippetsList.jsx
index 772145798..331f6f5e5 100644
--- a/client/app/pages/query-snippets/QuerySnippetsList.jsx
+++ b/client/app/pages/query-snippets/QuerySnippetsList.jsx
@@ -161,7 +161,7 @@ class QuerySnippetsList extends React.Component {
             There are no query snippets yet.
             {policy.isCreateQuerySnippetEnabled() && (
               <div className="m-t-5">
-                <a className="clickable" role="link" tabIndex="0" onClick={() => this.showSnippetDialog()}>
+                <a className="clickable" role="link" tabIndex={0} onClick={() => this.showSnippetDialog()}>
                   Click here
                 </a>{" "}
                 to add one.