Improve popover accessibility. (#18173)

Graylog2 · Feb 6, 2024 · a2cfd8a · a2cfd8a
1 parent 5ff0e5d
commit a2cfd8a
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/graylog2-web-interface/src/components/common/Popover.tsx b/graylog2-web-interface/src/components/common/Popover.tsx
@@ -55,10 +55,24 @@ const Title = styled.h4(({ theme }) => css`
   font-size: ${theme.fonts.size.body};
 `);
 
+const titleId = (id: string) => `${id}-title`;
+
+const dropdownAriaLabelledby = (ariaLabelBy: string | undefined, id: string | undefined, title: React.ReactNode | undefined) => {
+  if (ariaLabelBy) {
+    return ariaLabelBy;
+  }
+
+  if (id && title) {
+    return titleId(id);
+  }
+
+  return null;
+};
+
 const Dropdown = ({ title, children, ...rest }: DropdownProps) => (
-  <MantinePopover.Dropdown {...rest}>
+  <MantinePopover.Dropdown aria-labelledby={dropdownAriaLabelledby(rest['aria-labelledby'], rest.id, title)} {...rest}>
     {title && (
-      <Title>
+      <Title id={rest.id ? titleId(rest.id) : null}>
         {title}
       </Title>
     )}
@@ -69,6 +83,10 @@ const Dropdown = ({ title, children, ...rest }: DropdownProps) => (
   </MantinePopover.Dropdown>
 );
 
+Dropdown.defaultProps = {
+  title: undefined,
+};
+
 Popover.Target = MantinePopover.Target;
 Popover.Dropdown = Dropdown;