feat(FilterPicker): add more stories and minor fixes

Author: tenphi

src/components/actions/Menu/styled.tsx

@@ -52,6 +52,8 @@ export const StyledDivider = tasty({
 export const StyledHeader = tasty(Space, {
   qa: 'Header',
   as: 'div',
+  role: 'heading',
+  'aria-level': 3,
   styles: {
     color: '#dark-02',
     preset: 't3',
@@ -68,6 +70,7 @@ export const StyledHeader = tasty(Space, {
 export const StyledFooter = tasty(Space, {
   qa: 'Footer',
   as: 'div',
+  role: 'footer',
   styles: {
     color: '#dark-02',
     preset: 't3',

src/components/content/Tag/Tag.tsx

@@ -123,7 +123,7 @@ function Tag(allProps: CubeTagProps, ref) {
       {isClosable ? (
         <Suffix outerGap="0">
           <CloseAction styles={closeButtonStyles} onPress={onClose}>
-            <CloseIcon size={12} />
+            <CloseIcon size={12} stroke={3} />
           </CloseAction>
         </Suffix>
       ) : undefined}

src/components/fields/FilterListBox/FilterListBox.tsx

@@ -86,6 +86,12 @@ const SearchInputElement = tasty({
   },
 });
 
+const StyledHeaderWithoutBorder = tasty(StyledHeader, {
+  styles: {
+    border: false,
+  },
+});
+
 export interface CubeFilterListBoxProps<T>
   extends Omit<CubeListBoxProps<T>, 'children'>,
     FieldBaseProps {
@@ -783,12 +789,9 @@ export const FilterListBox = forwardRef(function FilterListBox<
       {...focusProps}
     >
       {header ? (
-        <StyledHeader
-          role="presentation"
-          styles={{ border: false, ...headerStyles }}
-        >
+        <StyledHeaderWithoutBorder role="presentation" styles={headerStyles}>
           {header}
-        </StyledHeader>
+        </StyledHeaderWithoutBorder>
       ) : (
         <div role="presentation" />
       )}
@@ -822,8 +825,6 @@ export const FilterListBox = forwardRef(function FilterListBox<
           shouldUseVirtualFocus={true}
           footer={footer}
           footerStyles={footerStyles}
-          header={header}
-          headerStyles={headerStyles}
           mods={mods}
           isCheckable={isCheckable}
           onSelectionChange={handleSelectionChange}