From 1b08c1e9df908bb4d602da0c34f927da75c16f66 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 15 Jul 2020 04:19:51 +0100
Subject: [PATCH 1/4] Fix AccessibleTooltipButton leaking tooltipclassname into
the DOM
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
.../views/elements/AccessibleTooltipButton.tsx | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/src/components/views/elements/AccessibleTooltipButton.tsx b/src/components/views/elements/AccessibleTooltipButton.tsx
index f4d63136e1..4dbb8f42bf 100644
--- a/src/components/views/elements/AccessibleTooltipButton.tsx
+++ b/src/components/views/elements/AccessibleTooltipButton.tsx
@@ -16,7 +16,7 @@ limitations under the License.
*/
import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
import AccessibleButton from "./AccessibleButton";
import {IProps} from "./AccessibleButton";
@@ -52,15 +52,11 @@ export default class AccessibleTooltipButton extends React.PureComponent :
;
return (
From 933945130eaee1ab957815ffff68d589d6b89525 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 15 Jul 2020 04:22:19 +0100
Subject: [PATCH 2/4] Tidy up Roving Tab Index helpers and create one for
RovingAccessibleTooltipButton
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/accessibility/RovingTabIndex.tsx | 36 +++---------------
.../roving/RovingAccessibleButton.tsx | 34 +++++++++++++++++
.../roving/RovingAccessibleTooltipButton.tsx | 34 +++++++++++++++++
.../roving/RovingTabIndexWrapper.tsx | 38 +++++++++++++++++++
src/accessibility/roving/types.ts | 21 ++++++++++
5 files changed, 132 insertions(+), 31 deletions(-)
create mode 100644 src/accessibility/roving/RovingAccessibleButton.tsx
create mode 100644 src/accessibility/roving/RovingAccessibleTooltipButton.tsx
create mode 100644 src/accessibility/roving/RovingTabIndexWrapper.tsx
create mode 100644 src/accessibility/roving/types.ts
diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx
index 13b7285605..5a650d4b6e 100644
--- a/src/accessibility/RovingTabIndex.tsx
+++ b/src/accessibility/RovingTabIndex.tsx
@@ -23,12 +23,11 @@ import React, {
useRef,
useReducer,
Reducer,
- RefObject,
Dispatch,
} from "react";
import {Key} from "../Keyboard";
-import AccessibleButton from "../components/views/elements/AccessibleButton";
+import {FocusHandler, Ref} from "./roving/types";
/**
* Module to simplify implementing the Roving TabIndex accessibility technique
@@ -45,8 +44,6 @@ import AccessibleButton from "../components/views/elements/AccessibleButton";
const DOCUMENT_POSITION_PRECEDING = 2;
-type Ref = RefObject;
-
export interface IState {
activeRef: Ref;
refs: Ref[];
@@ -202,8 +199,6 @@ export const RovingTabIndexProvider: React.FC = ({children, handleHomeEn
;
};
-type FocusHandler = () => void;
-
// Hook to register a roving tab index
// inputRef parameter specifies the ref to use
// onFocus should be called when the index gained focus in any manner
@@ -244,28 +239,7 @@ export const useRovingTabIndex = (inputRef: Ref): [FocusHandler, boolean, Ref] =
return [onFocus, isActive, ref];
};
-interface IRovingTabIndexWrapperProps {
- inputRef?: Ref;
- children(renderProps: {
- onFocus: FocusHandler;
- isActive: boolean;
- ref: Ref;
- });
-}
-
-// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
-export const RovingTabIndexWrapper: React.FC = ({children, inputRef}) => {
- const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
- return children({onFocus, isActive, ref});
-};
-
-interface IRovingAccessibleButtonProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> {
- inputRef?: Ref;
-}
-
-// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
-export const RovingAccessibleButton: React.FC = ({inputRef, ...props}) => {
- const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
- return ;
-};
-
+// re-export the semantic helper components for simplicity
+export {RovingTabIndexWrapper} from "./roving/RovingTabIndexWrapper";
+export {RovingAccessibleButton} from "./roving/RovingAccessibleButton";
+export {RovingAccessibleTooltipButton} from "./roving/RovingAccessibleTooltipButton";
diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx
new file mode 100644
index 0000000000..78572954ed
--- /dev/null
+++ b/src/accessibility/roving/RovingAccessibleButton.tsx
@@ -0,0 +1,34 @@
+/*
+ *
+ * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {Ref} from "./types";
+
+interface IProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> {
+ inputRef?: Ref;
+}
+
+// Wrapper to allow use of useRovingTabIndex for simple AccessibleButtons outside of React Functional Components.
+export const RovingAccessibleButton: React.FC = ({inputRef, ...props}) => {
+ const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+ return ;
+};
+
diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
new file mode 100644
index 0000000000..0390f4d343
--- /dev/null
+++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
@@ -0,0 +1,34 @@
+/*
+ *
+ * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React from "react";
+
+import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {Ref} from "./types";
+
+interface IProps extends Omit, "onFocus" | "inputRef" | "tabIndex"> {
+ inputRef?: Ref;
+}
+
+// Wrapper to allow use of useRovingTabIndex for simple AccessibleTooltipButtons outside of React Functional Components.
+export const RovingAccessibleTooltipButton: React.FC = ({inputRef, ...props}) => {
+ const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+ return ;
+};
+
diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx
new file mode 100644
index 0000000000..ce45027023
--- /dev/null
+++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx
@@ -0,0 +1,38 @@
+/*
+ *
+ * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * /
+ */
+
+import React from "react";
+
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
+import {useRovingTabIndex} from "../RovingTabIndex";
+import {FocusHandler, Ref} from "./types";
+
+interface IProps {
+ inputRef?: Ref;
+ children(renderProps: {
+ onFocus: FocusHandler;
+ isActive: boolean;
+ ref: Ref;
+ });
+}
+
+// Wrapper to allow use of useRovingTabIndex outside of React Functional Components.
+export const RovingTabIndexWrapper: React.FC = ({children, inputRef}) => {
+ const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
+ return children({onFocus, isActive, ref});
+};
diff --git a/src/accessibility/roving/types.ts b/src/accessibility/roving/types.ts
new file mode 100644
index 0000000000..f0a43e5fb8
--- /dev/null
+++ b/src/accessibility/roving/types.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {RefObject} from "react";
+
+export type Ref = RefObject;
+
+export type FocusHandler = () => void;
From 2a683354a8052a72fc377e20c7a412900a1eb446 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 15 Jul 2020 04:22:37 +0100
Subject: [PATCH 3/4] Wire up new room list breadcrums as an ARIA Toolbar
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
src/components/views/rooms/RoomBreadcrumbs2.tsx | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/src/components/views/rooms/RoomBreadcrumbs2.tsx b/src/components/views/rooms/RoomBreadcrumbs2.tsx
index 619ad6da4d..fde24524cd 100644
--- a/src/components/views/rooms/RoomBreadcrumbs2.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs2.tsx
@@ -25,7 +25,8 @@ import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { CSSTransition } from "react-transition-group";
import RoomListStore from "../../../stores/room-list/RoomListStore2";
import { DefaultTagID } from "../../../stores/room-list/models";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import { RovingAccessibleTooltipButton } from "../../../accessibility/RovingTabIndex";
+import Toolbar from "../../../accessibility/Toolbar";
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@@ -86,7 +87,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent this.viewRoom(r, i)}
@@ -101,7 +102,7 @@ export default class RoomBreadcrumbs2 extends React.PureComponent
-
+
);
});
@@ -112,9 +113,9 @@ export default class RoomBreadcrumbs2 extends React.PureComponent
-
+
{tiles.slice(this.state.skipFirst ? 1 : 0)}
-
+
);
} else {
From dd0bf17cec917795700e1c37f23f355639a5c1f3 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Wed, 15 Jul 2020 04:26:10 +0100
Subject: [PATCH 4/4] Fix copyrights
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
.../roving/RovingAccessibleButton.tsx | 30 +++++++++----------
.../roving/RovingAccessibleTooltipButton.tsx | 30 +++++++++----------
.../roving/RovingTabIndexWrapper.tsx | 30 +++++++++----------
3 files changed, 42 insertions(+), 48 deletions(-)
diff --git a/src/accessibility/roving/RovingAccessibleButton.tsx b/src/accessibility/roving/RovingAccessibleButton.tsx
index 78572954ed..3473ef1bc9 100644
--- a/src/accessibility/roving/RovingAccessibleButton.tsx
+++ b/src/accessibility/roving/RovingAccessibleButton.tsx
@@ -1,20 +1,18 @@
/*
- *
- * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * /
- */
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
import React from "react";
diff --git a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
index 0390f4d343..cc824fef22 100644
--- a/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
+++ b/src/accessibility/roving/RovingAccessibleTooltipButton.tsx
@@ -1,20 +1,18 @@
/*
- *
- * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * /
- */
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
import React from "react";
diff --git a/src/accessibility/roving/RovingTabIndexWrapper.tsx b/src/accessibility/roving/RovingTabIndexWrapper.tsx
index ce45027023..c826b74497 100644
--- a/src/accessibility/roving/RovingTabIndexWrapper.tsx
+++ b/src/accessibility/roving/RovingTabIndexWrapper.tsx
@@ -1,20 +1,18 @@
/*
- *
- * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * /
- */
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
import React from "react";