[feature]: Add "labelInAriaLive"-property for better accessibility

.gitignore

@@ -28,6 +28,7 @@ lib/*
 coverage
 yarn.lock
 package-lock.json
+.npmrc
 es/*
 # umi
 .umi

README.md

@@ -71,6 +71,7 @@ online example: https://tree-select-react-component.vercel.app/
 |defaultValue | initial selected treeNode(s) | same as value type | - |
 |value | current selected treeNode(s). | normal: String/Array<String>. labelInValue: {value:String,label:React.Node}/Array<{value,label}>. treeCheckStrictly(halfChecked default false): {value:String,label:React.Node, halfChecked}/Array<{value,label,halfChecked}>. | - |
 |labelInValue| whether to embed label in value, see above value type | Bool | false |
+|labelInAriaLive| whether to use option label instead of value for screenreader | Bool | false |
 |onChange | called when select treeNode or input value change | function(value, label(null), extra) | - |
 |onSelect | called when select treeNode | function(value, node, extra) | - |
 |onSearch | called when input changed | function | - |

package.json

@@ -1,21 +1,25 @@
 {
- "name": "rc-tree-select",
- "version": "5.4.0",
- "description": "tree-select ui component for react",
+ "name": "@juhovalkonen/rc-tree-select",
+ "version": "5.5.2",
+ "description": "custom fork of tree-select ui component for react",
  "keywords": [
  "react",
  "react-component",
  "react-tree-select",
  "tree-select"
  ],
- "homepage": "https://github.com/react-component/tree-select",
- "author": "smith3816@gmail.com",
+ "homepage": "https://github.com/juhoValkonen/tree-select",
+ "author": "valkonen.juho@gmail.com",
  "repository": {
  "type": "git",
- "url": "https://github.com/react-component/tree-select.git"
+ "url": "https://github.com/juhoValkonen/tree-select.git"
  },
  "bugs": {
- "url": "https://github.com/react-component/tree-select/issues"
+ "url": "https://github.com/juhoValkonen/tree-select/issues"
+ },
+ "publishConfig": {
+ "registry": "https://registry.npmjs.org/",
+ "access": "public"
  },
  "files": [
  "es",

src/OptionList.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import KeyCode from 'rc-util/lib/KeyCode';
-import useMemo from 'rc-util/lib/hooks/useMemo';
-import type { RefOptionListProps } from 'rc-select/lib/OptionList';
 import { useBaseProps } from 'rc-select';
-import type { TreeProps } from 'rc-tree';
+import type { RefOptionListProps } from 'rc-select/lib/OptionList';
 import Tree from 'rc-tree';
+import type { TreeProps } from 'rc-tree';
 import type { EventDataNode, ScrollTo } from 'rc-tree/lib/interface';
-import type { TreeDataNode, Key } from './interface';
+import useMemo from 'rc-util/lib/hooks/useMemo';
+import KeyCode from 'rc-util/lib/KeyCode';
+import * as React from 'react';
+import type { Key, TreeDataNode } from './interface';
 import LegacyContext from './LegacyContext';
 import TreeSelectContext from './TreeSelectContext';
 import { getAllKeys, isCheckDisabled } from './utils/valueUtil';
@@ -42,6 +42,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
  onSelect,
  dropdownMatchSelectWidth,
  treeExpandAction,
+ labelInAriaLive,
  } = React.useContext(TreeSelectContext);
 
  const {
@@ -211,7 +212,7 @@ const OptionList: React.RefForwardingComponent<ReviseRefOptionListProps> = (_, r
  <div onMouseDown={onListMouseDown}>
  {activeEntity && open && (
  <span style={HIDDEN_STYLE} aria-live="assertive">
- {activeEntity.node.value}
+ {!labelInAriaLive ? activeEntity.node.value : activeEntity.node.title}
  </span>
  )}
 

src/TreeSelect.tsx

@@ -1,33 +1,33 @@
-import * as React from 'react';
 import { BaseSelect } from 'rc-select';
-import type { IconType } from 'rc-tree/lib/interface';
-import type { ExpandAction } from 'rc-tree/lib/Tree';
 import type {
- BaseSelectRef,
- BaseSelectPropsWithoutPrivate,
  BaseSelectProps,
+ BaseSelectPropsWithoutPrivate,
+ BaseSelectRef,
  SelectProps,
 } from 'rc-select';
-import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import useId from 'rc-select/lib/hooks/useId';
+import type { IconType } from 'rc-tree/lib/interface';
+import type { ExpandAction } from 'rc-tree/lib/Tree';
+import { conductCheck } from 'rc-tree/lib/utils/conductUtil';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import useCache from './hooks/useCache';
+import useCheckedKeys from './hooks/useCheckedKeys';
+import useDataEntities from './hooks/useDataEntities';
+import useFilterTreeData from './hooks/useFilterTreeData';
+import useRefFunc from './hooks/useRefFunc';
+import useTreeData from './hooks/useTreeData';
+import LegacyContext from './LegacyContext';
 import OptionList from './OptionList';
 import TreeNode from './TreeNode';
-import { formatStrategyValues, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from './utils/strategyUtil';
-import type { CheckedStrategy } from './utils/strategyUtil';
 import TreeSelectContext from './TreeSelectContext';
 import type { TreeSelectContextProps } from './TreeSelectContext';
-import LegacyContext from './LegacyContext';
-import useTreeData from './hooks/useTreeData';
-import { toArray, fillFieldNames, isNil } from './utils/valueUtil';
-import useCache from './hooks/useCache';
-import useRefFunc from './hooks/useRefFunc';
-import useDataEntities from './hooks/useDataEntities';
 import { fillAdditionalInfo, fillLegacyProps } from './utils/legacyUtil';
-import useCheckedKeys from './hooks/useCheckedKeys';
-import useFilterTreeData from './hooks/useFilterTreeData';
+import { formatStrategyValues, SHOW_ALL, SHOW_CHILD, SHOW_PARENT } from './utils/strategyUtil';
+import type { CheckedStrategy } from './utils/strategyUtil';
+import { fillFieldNames, isNil, toArray } from './utils/valueUtil';
 import warningProps from './utils/warningPropsUtil';
-import warning from 'rc-util/lib/warning';
 
 export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void;
 
@@ -140,6 +140,7 @@ export interface TreeSelectProps<
  treeCheckable?: boolean | React.ReactNode;
  treeCheckStrictly?: boolean;
  labelInValue?: boolean;
+ labelInAriaLive?: boolean;
 
  // >>> Data
  treeData?: OptionType[];
@@ -202,6 +203,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
  treeCheckable,
  treeCheckStrictly,
  labelInValue,
+ labelInAriaLive,
 
  // FieldNames
  fieldNames,
@@ -651,6 +653,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
  fieldNames: mergedFieldNames,
  onSelect: onOptionSelect,
  treeExpandAction,
+ labelInAriaLive,
  }),
  [
  virtual,
@@ -661,6 +664,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)
  mergedFieldNames,
  onOptionSelect,
  treeExpandAction,
+ labelInAriaLive,
  ],
  );
 

src/TreeSelectContext.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import type { ExpandAction } from 'rc-tree/lib/Tree';
+import * as React from 'react';
 import type { DefaultOptionType, InternalFieldName, OnInternalSelect } from './TreeSelect';
 
 export interface TreeSelectContextProps {
@@ -11,6 +11,7 @@ export interface TreeSelectContextProps {
  fieldNames: InternalFieldName;
  onSelect: OnInternalSelect;
  treeExpandAction?: ExpandAction;
+ labelInAriaLive?: boolean;
 }
 
 const TreeSelectContext = React.createContext<TreeSelectContextProps>(null as any);

tests/Select.props.spec.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-undef, react/no-multi-comp, no-console */
-import React from 'react';
 import { mount } from 'enzyme';
 import Tree, { TreeNode } from 'rc-tree';
+import KeyCode from 'rc-util/lib/KeyCode';
+import React from 'react';
 import TreeSelect, { SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode as SelectNode } from '../src';
 
 // Promisify timeout to let jest catch works
@@ -155,6 +156,40 @@ describe('TreeSelect.props', () => {
  );
  });
 
+ it('labelInAriaLive', () => {
+ function keyDown(code) {
+ wrapper.find('input').first().simulate('keyDown', { which: code });
+ wrapper.update();
+ }
+
+ function keyUp(code) {
+ wrapper.find('input').first().simulate('keyUp', { which: code });
+ wrapper.update();
+ }
+
+ const wrapper = mount(
+ <TreeSelect
+ labelInAriaLive={true}
+ treeDefaultExpandAll
+ treeData={[
+ {
+ value: 'parent',
+ label: 'parent-label',
+ children: [{ value: 'child', label: 'child-label' }],
+ },
+ ]}
+ multiple
+ />,
+ );
+
+ wrapper.openSelect();
+ keyDown(KeyCode.DOWN);
+ keyUp(KeyCode.DOWN);
+
+ const ariaLiveSpan = wrapper.find('[aria-live="assertive"]');
+ expect(ariaLiveSpan.text()).toEqual('parent-label');
+ });
+
  it('set illegal value', () => {
  const wrapper = mount(
  createSelect({