From f8e09ad4f3a5eea20883817d02f15507f82381fb Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Wed, 13 Nov 2024 15:38:28 -0500 Subject: [PATCH] Fleet UI: Disabled forms cannot be accessed via keyboard (#23727) --- changes/22985-disable-forms-keyboard-access | 1 + frontend/components/CustomLink/CustomLink.tsx | 4 ++++ .../components/forms/fields/Dropdown/Dropdown.jsx | 1 + .../ActivityFeedAutomationsModal.tsx | 2 ++ .../ManageSoftwareAutomationsModal.tsx | 12 +++++++++++- .../SoftwareFiltersModal/SoftwareFiltersModal.tsx | 1 - .../CalendarEventsModal/CalendarEventsModal.tsx | 4 ++++ .../OtherWorkflowsModal/OtherWorkflowsModal.tsx | 6 ++++++ 8 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 changes/22985-disable-forms-keyboard-access diff --git a/changes/22985-disable-forms-keyboard-access b/changes/22985-disable-forms-keyboard-access new file mode 100644 index 000000000000..2e90b69dc543 --- /dev/null +++ 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 index 410a916bd552..8a89ad002eba 100644 --- 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} diff --git a/frontend/components/forms/fields/Dropdown/Dropdown.jsx b/frontend/components/forms/fields/Dropdown/Dropdown.jsx index b44d6e4b7d77..318eea9d219d 100644 --- 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 /> ); diff --git a/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx b/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx index fb04eef43fc0..34a8cde32c7e 100644 --- a/frontend/pages/DashboardPage/components/ActivityFeedAutomationsModal/ActivityFeedAutomationsModal.tsx +++ b/frontend/pages/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} /> { setShowExamplePayload(!showExamplePayload); }} + disabled={!formData.enabled} /> {showExamplePayload && renderExamplePayload()} diff --git a/frontend/pages/SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx b/frontend/pages/SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx index fde4714ce6db..2d0514f0efee 100644 --- a/frontend/pages/SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx +++ b/frontend/pages/SoftwarePage/components/ManageSoftwareAutomationsModal/ManageSoftwareAutomationsModal.tsx @@ -366,6 +366,7 @@ const ManageAutomationsModal = ({ Add integration @@ -407,11 +408,13 @@ const ManageAutomationsModal = ({ } placeholder="https://server.com/example" tooltip="Provide a URL to deliver a webhook request to." + disabled={!softwareAutomationsEnabled} /> @@ -463,6 +466,7 @@ const ManageAutomationsModal = ({ value="ticket" name="workflow-type" onChange={onRadioChange(true)} + disabled={!softwareAutomationsEnabled} /> {integrationEnabled ? renderTicket() : renderWebhook()}

Vulnerability automations currently run for software vulnerabilities. Interested in automations for OS vulnerabilities?{" "} - +

diff --git a/frontend/pages/SoftwarePage/components/SoftwareFiltersModal/SoftwareFiltersModal.tsx b/frontend/pages/SoftwarePage/components/SoftwareFiltersModal/SoftwareFiltersModal.tsx index 91223b5746b5..d98a82024026 100644 --- 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/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx index 3e2a9167899a..2f8884d0ca30 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/CalendarEventsModal/CalendarEventsModal.tsx @@ -197,6 +197,7 @@ const CalendarEventsModal = ({ onChange={() => { onPolicyEnabledChange({ name, value: !isChecked }); }} + disabled={!formData.enabled} > @@ -223,6 +224,7 @@ const CalendarEventsModal = ({ url="https://www.fleetdm.com/learn-more-about/calendar-events" text="Learn more" newTab + disableKeyboardNavigation={!formData.enabled} />
@@ -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} /> { setShowExamplePayload(!showExamplePayload); }} + disabled={!formData.enabled} /> {showExamplePayload && renderExamplePayload()} {renderPolicies()} diff --git a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx index d236e282029d..859b45fff505 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx +++ b/frontend/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} /> setShowExamplePayload(!showExamplePayload)} + disabled={!isPolicyAutomationsEnabled} /> {showExamplePayload && } @@ -394,6 +396,7 @@ const OtherWorkflowsModal = ({ value="ticket" name="workflow-type" onChange={onChangeRadio} + disabled={!isPolicyAutomationsEnabled} /> {isWebhookEnabled ? renderWebhook() : renderIntegrations()} @@ -428,6 +432,7 @@ const OtherWorkflowsModal = ({ !isChecked && setErrors((errs) => omit(errs, "policyItems")); }} + disabled={!isPolicyAutomationsEnabled} > @@ -449,6 +454,7 @@ const OtherWorkflowsModal = ({ url="https://www.fleetdm.com/learn-more-about/policy-automations" text="Learn more" newTab + disableKeyboardNavigation={!isPolicyAutomationsEnabled} />