imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wire up Room sublist show more/less as roving tabindex button using new helper

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-07 17:47:21 +01:00
parent 4edd3dfc6c
commit a33717a475
2 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/accessibility/RovingTabIndex.tsx
View file

@ -259,3 +259,13 @@ export const RovingTabIndexWrapper: React.FC<IRovingTabIndexWrapperProps> = ({ch
return children({onFocus, isActive, ref});
};
interface IRovingAccessibleButtonProps extends React.ComponentProps<typeof AccessibleButton> {
inputRef?: Ref;
}
// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
export const RovingAccessibleButton: React.FC<IRovingAccessibleButtonProps> = ({inputRef, ...props}) => {
const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
return <AccessibleButton {...props} onFocus={onFocus} inputRef={ref} tabIndex={isActive ? 0 : -1} />;
};