Fleet UI: Disabled forms cannot be accessed via keyboard (#23727)

fleetdm · Nov 13, 2024 · f8e09ad · f8e09ad
1 parent ae92a70
commit f8e09ad
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 2 deletions.
diff --git a/changes/22985-disable-forms-keyboard-access b/changes/22985-disable-forms-keyboard-access
@@ -0,0 +1 @@
+- Fleet UI: Disable accessibility via keyboard for forms that are disabled via a slider
diff --git a/frontend/components/CustomLink/CustomLink.tsx b/frontend/components/CustomLink/CustomLink.tsx
@@ -13,6 +13,8 @@ interface ICustomLinkProps {
   multiline?: boolean;
   iconColor?: Colors;
   color?: "core-fleet-blue" | "core-fleet-black";
+  /** Restricts access via keyboard when CustomLink is part of disabled UI */
+  disableKeyboardNavigation?: boolean;
 }
 
 const baseClass = "custom-link";
@@ -25,6 +27,7 @@ const CustomLink = ({
   multiline = false,
   iconColor = "core-fleet-blue",
   color = "core-fleet-blue",
+  disableKeyboardNavigation = false,
 }: ICustomLinkProps): JSX.Element => {
   const customLinkClass = classnames(baseClass, className, {
     [`${baseClass}--black`]: color === "core-fleet-black",
@@ -68,6 +71,7 @@ const CustomLink = ({
       target={target}
       rel="noopener noreferrer"
       className={customLinkClass}
+      tabIndex={disableKeyboardNavigation ? -1 : 0}
     >
       {content}
     </a>

diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx
@@ -231,6 +231,7 @@ class Dropdown extends Component {
           autoFocus={autoFocus}
           arrowRenderer={renderCustomDropdownArrow}
           valueComponent={iconName ? renderWithIcon : undefined}
+          tabIndex={disabled ? -1 : 0} // Ensures disabled dropdown has no keyboard accessibility
         />
       </FormField>
     );

diff --git a/...es/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx b/...es/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx
@@ -156,6 +156,7 @@ const ActivityFeedAutomationsModal = ({
             value={formData.url}
             error={formErrors.url}
             helpText="Fleet will send a JSON payload to this URL whenever a new activity is generated."
+            disabled={!formData.enabled}
           />
           <RevealButton
             isShowing={showExamplePayload}
@@ -166,6 +167,7 @@ const ActivityFeedAutomationsModal = ({
             onClick={() => {
               setShowExamplePayload(!showExamplePayload);
             }}
+            disabled={!formData.enabled}
           />
           {showExamplePayload && renderExamplePayload()}
         </div>

diff --git a/...SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx b/...SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx
@@ -366,6 +366,7 @@ const ManageAutomationsModal = ({
             <Link
               to={PATHS.ADMIN_INTEGRATIONS}
               className={`${baseClass}__add-integration-link`}
+              tabIndex={softwareAutomationsEnabled ? 0 : -1}
             >
               Add integration
             </Link>
@@ -407,11 +408,13 @@ const ManageAutomationsModal = ({
           }
           placeholder="https://server.com/example"
           tooltip="Provide a URL to deliver a webhook request to."
+          disabled={!softwareAutomationsEnabled}
         />
         <Button
           type="button"
           variant="text-link"
           onClick={togglePreviewPayloadModal}
+          disabled={!softwareAutomationsEnabled}
         >
           Preview payload
         </Button>
@@ -463,6 +466,7 @@ const ManageAutomationsModal = ({
               value="ticket"
               name="workflow-type"
               onChange={onRadioChange(true)}
+              disabled={!softwareAutomationsEnabled}
             />
             <Radio
               className={`${baseClass}__radio-input`}
@@ -472,13 +476,19 @@ const ManageAutomationsModal = ({
               value="webhook"
               name="workflow-type"
               onChange={onRadioChange(false)}
+              disabled={!softwareAutomationsEnabled}
             />
           </div>
           {integrationEnabled ? renderTicket() : renderWebhook()}
           <p>
             Vulnerability automations currently run for software
             vulnerabilities. Interested in automations for OS vulnerabilities?{" "}
-            <CustomLink url={SUPPORT_LINK} text="Let us know" newTab />
+            <CustomLink
+              url={SUPPORT_LINK}
+              text="Let us know"
+              newTab
+              disableKeyboardNavigation={!softwareAutomationsEnabled}
+            />
           </p>
         </div>
         <div className="modal-cta-wrap">

diff --git a/frontend/pages/SoftwarePage/components/SoftwareFiltersModal/SoftwareFiltersModal.tsx b/frontend/pages/SoftwarePage/components/SoftwareFiltersModal/SoftwareFiltersModal.tsx
@@ -9,7 +9,6 @@ import Checkbox from "components/forms/fields/Checkbox";
 import TooltipWrapper from "components/TooltipWrapper";
 import {
   findOptionBySeverityRange,
-  ISoftwareVulnFilters,
   ISoftwareVulnFiltersParams,
   SEVERITY_DROPDOWN_OPTIONS,
 } from "pages/SoftwarePage/SoftwareTitles/SoftwareTable/helpers";

diff --git a/.../pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx b/.../pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx
@@ -197,6 +197,7 @@ const CalendarEventsModal = ({
                   onChange={() => {
                     onPolicyEnabledChange({ name, value: !isChecked });
                   }}
+                  disabled={!formData.enabled}
                 >
                   <TooltipTruncatedText value={name} />
                 </Checkbox>
@@ -223,6 +224,7 @@ const CalendarEventsModal = ({
             url="https://www.fleetdm.com/learn-more-about/calendar-events"
             text="Learn more"
             newTab
+            disableKeyboardNavigation={!formData.enabled}
           />
         </span>
       </div>
@@ -289,6 +291,7 @@ const CalendarEventsModal = ({
           error={formErrors.url}
           tooltip="Provide a URL to deliver a webhook request to."
           helpText="A request will be sent to this URL during the calendar event. Use it to trigger auto-remediation."
+          disabled={!formData.enabled}
         />
         <RevealButton
           isShowing={showExamplePayload}
@@ -299,6 +302,7 @@ const CalendarEventsModal = ({
           onClick={() => {
             setShowExamplePayload(!showExamplePayload);
           }}
+          disabled={!formData.enabled}
         />
         {showExamplePayload && renderExamplePayload()}
         {renderPolicies()}

diff --git a/.../pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/.../pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx
@@ -301,6 +301,7 @@ const OtherWorkflowsModal = ({
           helpText='For each policy, Fleet will send a JSON payload to this URL with a list of the hosts that updated their answer to "No."'
           placeholder="https://server.com/example"
           tooltip="Provide a URL to deliver a webhook request to."
+          disabled={!isPolicyAutomationsEnabled}
         />
         <RevealButton
           isShowing={showExamplePayload}
@@ -309,6 +310,7 @@ const OtherWorkflowsModal = ({
           showText="Show example payload"
           caretPosition="after"
           onClick={() => setShowExamplePayload(!showExamplePayload)}
+          disabled={!isPolicyAutomationsEnabled}
         />
         {showExamplePayload && <ExamplePayload />}
       </>
@@ -394,6 +396,7 @@ const OtherWorkflowsModal = ({
               value="ticket"
               name="workflow-type"
               onChange={onChangeRadio}
+              disabled={!isPolicyAutomationsEnabled}
             />
             <Radio
               className={`${baseClass}__radio-input`}
@@ -403,6 +406,7 @@ const OtherWorkflowsModal = ({
               value="webhook"
               name="workflow-type"
               onChange={onChangeRadio}
+              disabled={!isPolicyAutomationsEnabled}
             />
           </div>
           {isWebhookEnabled ? renderWebhook() : renderIntegrations()}
@@ -428,6 +432,7 @@ const OtherWorkflowsModal = ({
                               !isChecked &&
                                 setErrors((errs) => omit(errs, "policyItems"));
                             }}
+                            disabled={!isPolicyAutomationsEnabled}
                           >
                             <TooltipTruncatedText value={name} />
                           </Checkbox>
@@ -449,6 +454,7 @@ const OtherWorkflowsModal = ({
               url="https://www.fleetdm.com/learn-more-about/policy-automations"
               text="Learn more"
               newTab
+              disableKeyboardNavigation={!isPolicyAutomationsEnabled}
             />
           </p>
         </div>