diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap index 02f3c7726..9253404bd 100644 --- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap +++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap @@ -2,7 +2,7 @@ exports[`renders correctly on big screens 1`] = `
Hello World diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap index 065e376b5..688e88d38 100644 --- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap @@ -43,12 +43,12 @@ exports[`loads more comments 1`] = `
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap index 0290e7f21..89e42ee20 100644 --- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap +++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap @@ -43,12 +43,12 @@ exports[`renders comment stream 1`] = `
@@ -174,12 +174,12 @@ exports[`show all replies 1`] = `
diff --git a/src/core/client/ui/components/AriaInfo/AiraInfo.mdx b/src/core/client/ui/components/AriaInfo/AiraInfo.mdx new file mode 100644 index 000000000..abe438404 --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/AiraInfo.mdx @@ -0,0 +1,17 @@ +--- +name: AriaInfo +menu: UI Kit +--- + +import { Playground, PropsTable } from 'docz' +import AriaInfo from './AriaInfo' + +# AriaInfo + +Renders Text that is only seen by screen readers. + +## Basic usage + + This can only be seen by screen readers +
Above this line is a hidden text that you can't see
+ diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.css b/src/core/client/ui/components/AriaInfo/AriaInfo.css new file mode 100644 index 000000000..bca89bafb --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/AriaInfo.css @@ -0,0 +1,10 @@ +.root { + position: absolute !important; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx b/src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx new file mode 100644 index 000000000..37c8d5aac --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import TestRenderer from "react-test-renderer"; + +import { PropTypesOf } from "talk-framework/types"; + +import AriaInfo from "./AriaInfo"; + +it("renders correctly", () => { + const props: PropTypesOf = { + children: "This text is only for screen readers", + }; + const renderer = TestRenderer.create(); + expect(renderer.toJSON()).toMatchSnapshot(); +}); diff --git a/src/core/client/ui/components/AriaInfo/AriaInfo.tsx b/src/core/client/ui/components/AriaInfo/AriaInfo.tsx new file mode 100644 index 000000000..f0604a900 --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/AriaInfo.tsx @@ -0,0 +1,32 @@ +import cn from "classnames"; +import React, { HTMLAttributes, StatelessComponent } from "react"; + +import { withForwardRef, withStyles } from "talk-ui/hocs"; +import { PropTypesOf } from "talk-ui/types"; + +import * as styles from "./AriaInfo.css"; + +interface InnerProps extends HTMLAttributes { + /** + * This prop can be used to add custom classnames. + * It is handled by the `withStyles `HOC. + */ + classes: typeof styles; + component?: string; + children: React.ReactNode; +} + +const AriaInfo: StatelessComponent = props => { + const { component, className, classes, ...rest } = props; + const Component = component!; + const rootClassName = cn(classes.root, className); + return ; +}; + +AriaInfo.defaultProps = { + component: "div", +}; + +const enhanced = withForwardRef(withStyles(styles)(AriaInfo)); +export type AriaInfoProps = PropTypesOf; +export default enhanced; diff --git a/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap b/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap new file mode 100644 index 000000000..688492e16 --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` +
+ This text is only for screen readers +
+`; diff --git a/src/core/client/ui/components/AriaInfo/index.ts b/src/core/client/ui/components/AriaInfo/index.ts new file mode 100644 index 000000000..7fc32af4c --- /dev/null +++ b/src/core/client/ui/components/AriaInfo/index.ts @@ -0,0 +1 @@ +export { default, AriaInfoProps } from "./AriaInfo"; diff --git a/src/core/client/ui/components/Button/Button.css b/src/core/client/ui/components/Button/Button.css index e3cab49f2..3a0151ecc 100644 --- a/src/core/client/ui/components/Button/Button.css +++ b/src/core/client/ui/components/Button/Button.css @@ -2,7 +2,7 @@ border-radius: var(--round-corners); background-color: transparent; position: relative; - display: flex; + display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx index 240e13f9e..4a5abbc08 100644 --- a/src/core/client/ui/components/Flex/Flex.tsx +++ b/src/core/client/ui/components/Flex/Flex.tsx @@ -47,8 +47,9 @@ const Flex: StatelessComponent = props => { } = props; let alignItemsWithDefault = alignItems; - if (!direction || !direction.startsWith("column")) { - alignItemsWithDefault = "center"; + if (!alignItems) { + alignItemsWithDefault = + direction && direction.startsWith("column") ? "flex-start" : "center"; } const classObject: Record = { diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx index d81075019..bdeb29df6 100644 --- a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx +++ b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx @@ -9,7 +9,7 @@ it("renders correctly", () => { {({ toggleShow, show }) => (
{show &&
SHOW ME
} - +
)} diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx index 4fc58d41e..05ab31e56 100644 --- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx +++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx @@ -5,18 +5,22 @@ menu: UI Kit import { Playground } from 'docz' import ToggleShow from './ToggleShow' +import Button from '../Button' +import Flex from '../Flex' # ToggleShow -A Component that provides a render function to display nodes +A render props component to manage visible state. ## Basic usage {({ toggleShow, show }) => ( -
- {show &&
SHOW ME
} - -
+ + {show &&
Hello World!
} + + )} diff --git a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap index 323274282..b4754816e 100644 --- a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap +++ b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`renders correctly 1`] = `
`; diff --git a/src/core/client/ui/components/TrapFocus/TrapFocus.mdx b/src/core/client/ui/components/TrapFocus/TrapFocus.mdx index d5c209aa9..da30e1171 100644 --- a/src/core/client/ui/components/TrapFocus/TrapFocus.mdx +++ b/src/core/client/ui/components/TrapFocus/TrapFocus.mdx @@ -5,6 +5,7 @@ menu: UI Kit import { Playground } from 'docz' import TrapFocus from './TrapFocus' +import Button from '../Button' # TrapFocus @@ -12,28 +13,15 @@ Traps focus inside component when using keyboard navigation for accessibility pu ## Basic usage -```ts -import React from "react"; - -class Dialog extends React.Component { - private firstFocusable: HTMLElement; - private lastFocusable: HTMLElement; - - private setFirstFocusable = (ref: HTMLElement) => (this.firstFocusable = ref); - private setLastFocusable = (ref: HTMLElement) => (this.lastFocusable = ref); - - public render() { - return ( + +
+ + {({firstFocusableRef, lastFocusableRef}) =>
- - - - + +
- ); - } -} -``` + } + +
+ diff --git a/src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx b/src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx index f4932775f..3abcdb693 100644 --- a/src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx +++ b/src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx @@ -5,11 +5,16 @@ import Sinon from "sinon"; import { PropTypesOf } from "talk-ui/types"; import TrapFocus from "./TrapFocus"; +const FakeFocusable: any = class extends React.Component { + public focus = Sinon.spy(); + public render() { + return null; + } +}; + it("renders correctly", () => { const props: PropTypesOf = { - firstFocusable: null, - lastFocusable: null, - children: ( + children: () => ( <> child1 child2 @@ -25,15 +30,13 @@ it("renders correctly", () => { }); it("Change focus to `lastFocusable` when focus reaches beginning", () => { - const fakeHTMLElementBegin = { focus: Sinon.spy() }; - const fakeHTMLElementEnd = { focus: Sinon.spy() }; const props: PropTypesOf = { - firstFocusable: fakeHTMLElementBegin as any, - lastFocusable: fakeHTMLElementEnd as any, - children: ( + children: ({ firstFocusableRef, lastFocusableRef }) => ( <> + child1 child2 + ), }; @@ -43,20 +46,22 @@ it("Change focus to `lastFocusable` when focus reaches beginning", () => {
); renderer.root.findAllByProps({ tabIndex: 0 })[0].props.onFocus(); - expect(fakeHTMLElementBegin.focus.called).toBe(false); - expect(fakeHTMLElementEnd.focus.called).toBe(true); + expect( + renderer.root.findAllByType(FakeFocusable)[0].instance.focus.called + ).toBe(false); + expect( + renderer.root.findAllByType(FakeFocusable)[1].instance.focus.called + ).toBe(true); }); -it("Change focus to `firstFocusable` when focus reaches the end", () => { - const fakeHTMLElementBegin = { focus: Sinon.spy() }; - const fakeHTMLElementEnd = { focus: Sinon.spy() }; +it("Change focus to `firstFocusable` when focus reaches end", () => { const props: PropTypesOf = { - firstFocusable: fakeHTMLElementBegin as any, - lastFocusable: fakeHTMLElementEnd as any, - children: ( + children: ({ firstFocusableRef, lastFocusableRef }) => ( <> + child1 child2 + ), }; @@ -66,6 +71,10 @@ it("Change focus to `firstFocusable` when focus reaches the end", () => {
); renderer.root.findAllByProps({ tabIndex: 0 })[1].props.onFocus(); - expect(fakeHTMLElementBegin.focus.called).toBe(true); - expect(fakeHTMLElementEnd.focus.called).toBe(false); + expect( + renderer.root.findAllByType(FakeFocusable)[0].instance.focus.called + ).toBe(true); + expect( + renderer.root.findAllByType(FakeFocusable)[1].instance.focus.called + ).toBe(false); }); diff --git a/src/core/client/ui/components/TrapFocus/TrapFocus.tsx b/src/core/client/ui/components/TrapFocus/TrapFocus.tsx index a50b50d6c..0d6effbbe 100644 --- a/src/core/client/ui/components/TrapFocus/TrapFocus.tsx +++ b/src/core/client/ui/components/TrapFocus/TrapFocus.tsx @@ -1,25 +1,34 @@ -import React from "react"; +import React, { RefObject } from "react"; export interface Focusable { focus: () => void; } +interface RenderProps { + firstFocusableRef: RefObject; + lastFocusableRef: RefObject; +} + export interface TrapFocusProps { - firstFocusable: Focusable | null; - lastFocusable: Focusable | null; - children: React.ReactNode; + children: (props: RenderProps) => React.ReactNode; } export default class TrapFocus extends React.Component { + private firstFocusableRef = React.createRef(); + private lastFocusableRef = React.createRef(); + // Trap keyboard focus inside the dropdown until a value has been chosen. - public focusBegin = () => this.props.firstFocusable!.focus(); - public focusEnd = () => this.props.lastFocusable!.focus(); + private focusBegin = () => this.firstFocusableRef.current!.focus(); + private focusEnd = () => this.lastFocusableRef.current!.focus(); public render() { return ( <>
- {this.props.children} + {this.props.children({ + firstFocusableRef: this.firstFocusableRef, + lastFocusableRef: this.lastFocusableRef, + })}
);