Restructure TopLeftMenu for accessibility and autofocus it

We use a trick with refs to automatically focus the element, also making use of mx_HiddenFocusable to hide the unnecessary outline. 

The menu itself has been restructured to hide some elements from screen readers (reduce noise) and to have a single unordered list. Screen readers mention when the user "enters" a list, and each item was previously saying "enter list <action>" when it should have just been "<action>".

By focusing automatically, the keyboard can be used to go up/down the menu as may be expected by keyboard users.
This commit is contained in:
Travis Ralston 2019-05-17 15:32:03 -06:00
parent c5757d8303
commit 2a187810fd
2 changed files with 43 additions and 19 deletions

View file

@ -0,0 +1,19 @@
/*
Copyright 2019 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.
*/
export function focusCapturedRef(ref) {
if (ref) ref.focus();
}