Add title for collapse button of section component. (#20784)

Graylog2 · Oct 25, 2024 · 1483003 · 1483003
1 parent d7fa24a
commit 1483003
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/graylog2-web-interface/src/components/common/Section.tsx b/graylog2-web-interface/src/components/common/Section.tsx
@@ -53,7 +53,8 @@ const FlexWrapper = styled.div(({ theme }) => css`
 `);
 
 type Props = React.PropsWithChildren<{
-  title: React.ReactNode,
+  title: string,
+  header?: React.ReactNode,
   actions?: React.ReactNode,
   headerLeftSection?: React.ReactNode,
   collapsible?: boolean,
@@ -64,15 +65,15 @@ type Props = React.PropsWithChildren<{
 /**
  * Simple section component. Currently only a "filled" version exists.
  */
-const Section = ({ title, actions, headerLeftSection, collapsible = false, defaultClosed = false, disableCollapseButton = false, children }: Props) => {
+const Section = ({ title, header, actions, headerLeftSection, collapsible = false, defaultClosed = false, disableCollapseButton = false, children }: Props) => {
   const [opened, { toggle }] = useDisclosure(!defaultClosed);
   const onHeaderClick = () => (!disableCollapseButton && toggle());
 
   return (
     <Container $opened={opened} $collapsible={collapsible}>
       <Header $opened={opened} $collapsible={collapsible} onClick={onHeaderClick}>
         <FlexWrapper>
-          <h2>{title}</h2>
+          <h2>{header ?? title}</h2>
           {headerLeftSection && <FlexWrapper onClick={(e) => { e.stopPropagation(); }}>{headerLeftSection}</FlexWrapper>}
         </FlexWrapper>
         <FlexWrapper>
@@ -82,6 +83,7 @@ const Section = ({ title, actions, headerLeftSection, collapsible = false, defau
                   bsStyle={opened ? 'primary' : 'default'}
                   onClick={toggle}
                   data-testid="collapseButton"
+                  title={`Toggle ${title.toLowerCase()} section`}
                   disabled={disableCollapseButton}>
             <Icon size="sm" name={opened ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} />
           </Button>

diff --git a/graylog2-web-interface/src/components/rules/rule-builder/RuleBlockForm.tsx b/graylog2-web-interface/src/components/rules/rule-builder/RuleBlockForm.tsx
@@ -182,6 +182,7 @@ const RuleBlockForm = ({
                   <Select id={`existingBlock-select-${type}`}
                           name={`existingBlock-select-${type}`}
                           placeholder={`Add ${type}`}
+                          aria-label={`Add ${type}`}
                           options={options}
                           optionRenderer={optionRenderer}
                           clearable={false}

diff --git a/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx b/graylog2-web-interface/src/views/components/searchbar/StreamsFilter.tsx
@@ -63,7 +63,7 @@ const StreamsFilter = ({
       <Select placeholder={placeholder}
               disabled={disabled}
               clearable={clearable}
-              inputProps={{ 'aria-label': placeholder }}
+              aria-label={placeholder}
               displayKey="key"
               inputId="streams-filter"
               onChange={handleChange}