fix: table and tree select a11y

gravity-ui · Mar 4, 2024 · 7759f5e · 7759f5e
1 parent 2cb4b67
commit 7759f5e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 1 deletion.
diff --git a/src/components/Select/__stories__/UseSelectOptionsShowcase.tsx b/src/components/Select/__stories__/UseSelectOptionsShowcase.tsx
@@ -5,6 +5,8 @@ import {TextInput} from '../../controls';
 import {Select, getSelectFilteredOptions, isSelectGroupTitle, useSelectOptions} from '../index';
 import type {SelectOption, SelectProps} from '../index';
 
+const title = 'Select example with useSelectOptions hook';
+
 export const UseSelectOptionsShowcase = () => {
     const [value, setValue] = React.useState<string[]>([]);
     const [filter, setFilter] = React.useState('');
@@ -110,6 +112,7 @@ export const UseSelectOptionsShowcase = () => {
             renderFilter={renderFilter}
             onFilterChange={setFilter}
             onUpdate={setValue}
+            title={title}
         />
     );
 };
diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx
@@ -158,7 +158,7 @@ const WithTableActionsTemplate: StoryFn<TableProps<DataItem>> = (args) => {
                     }
 
                     const items = ['action 1', 'action 2', 'action 3'];
-                    return <TreeSelect items={items} size="s" />;
+                    return <TreeSelect items={items} size="s" title={'Actions select example'} />;
                 }}
             />
         </React.Fragment>

diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -59,6 +59,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         renderContainer = TreeListContainer,
         onItemClick,
         placement,
+        title,
     } = props;
 
     const mobile = useMobile();
@@ -203,6 +204,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
         value,
         id: treeSelectId,
         activeItemId: listState.activeItemId,
+        title,
     };
 
     const togglerNode = renderControl ? (

diff --git a/src/components/TreeSelect/types.ts b/src/components/TreeSelect/types.ts
@@ -24,6 +24,7 @@ export type TreeSelectRenderControlProps = {
     value: ListItemId[];
     id: string;
     activeItemId?: ListItemId;
+    title?: string;
 };
 
 export type TreeSelectRenderItem<T, P extends {} = {}> = (props: {
@@ -108,6 +109,10 @@ interface TreeSelectBaseProps<T> extends QAProps, Partial<Omit<ListState, 'selec
     onItemClick?:
         | 'disabled'
         | ((data: T, content: OverrideItemContext, defaultClickCallback: () => void) => void);
+    /**
+     * Control's title attribute value
+     */
+    title?: string;
 }
 
 type TreeSelectKnownProps<T> = TreeSelectBaseProps<T> & {