Review request info-box accessibility
Review Request #10963 — Created March 21, 2020 and updated
- Showing a "(i)" info icon (using Font Awesome) on the right-hand side of a row's summary column when hovering over the row or when the focus is on some child of the row. The infobox should only be popped up when hovering over that icon, or when tabbing to it and pressing Space, Enter, Up, or Down.
- Improving keyboard accessibility in the infobox. When opening the infobox via keyboard, focus should move to the infobox. The branch, timestamp, and description fields will also be focusable.
- Tabbing out of the infobox or pressing Escape should close the infobox.
[aria-expanded="true"]
keeps icon when infobox open.Add info-icon & add key accessibility to icon:
_onTargetKeyDown($target, InfoboxViewType, evt)
will display the infobox by pressing UP, DOWN, ENTER, SPACE key while the info-icon is focused.
_onInfoboxKeyDown(evt)
will hidden the infobox by pressing ESCAPE key while the infobox or it's children are focused.
tabindex="0"
makes branch & timestamp, and description area focusable.Make branch, timestamp, and description area accessibly by keydown:
_onHoverItemKeyDown(evt)
will display the hover details for the branch and timestamp by pressing UP, DOWN, ENTER, SPACE key while the item is focused. This will hide the hover details for the item by pressing ESCAPE key while the item is focused.
_onScrollableKeyDown(evt)
will turn off the padding so the scrollbar has room by pressing UP, DOWN, ENTER, SPACE key while the item is focused. This will re-enable the padding where the scrollbar would be by pressing ESCAPE key while the item is focused.
Manually Tested on Firefox, Chrome, and Safari.
Summary | ID | Author |
---|---|---|
89965b53360b88265b58f737c6ee6f08572e12db | XiaoleZ | |
6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a | XiaoleZ | |
f5369761f6729f293dbcb721b315928fec30e556 | XiaoleZ | |
01d614d1f449b3ac35bd881cf4002aadeb9371db | XiaoleZ | |
bc7bfb1b548236b8beb806a38e673be322f6a311 | XiaoleZ | |
404c36fd908918cda95103d2ede3094850b0d768 | XiaoleZ | |
fee0cd1659e5a695ee47eeeb7781c52de3b72d74 | XiaoleZ | |
84d7f9cc9666fdfb6dc00eb1bfcff0bfe17be98a | XiaoleZ | |
4b6745fdb5003905927dfb6a97820e5977aea739 | XiaoleZ | |
84273a0522bb68a1b4829c16d60ad680af666a42 | XiaoleZ |
- Change Summary:
-
Make Branch & timestamp focusable, Keep icon when infobox open
- Description:
-
~ add info-icon and hover effect
~ ~ add info-icon & add key accessibility to icon
~ Add info-icon and hover effect
~ Add info-icon & add key accessibility to icon ~ Make Branch & timestamp focusable, Keep icon when infobox open - Commits:
-
Summary ID Author 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ
Checks run (2 succeeded)
- Change Summary:
-
Make Branch & timestamp focusable, Keep icon when infobox open
- Commits:
-
Summary ID Author 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ bc7bfb1b548236b8beb806a38e673be322f6a311 XiaoleZ
Checks run (2 succeeded)
- Change Summary:
-
Make branch, timestamp, and description area accessibly by keydown
- Description:
-
~ Add info-icon and hover effect
~ Add info-icon & add key accessibility to icon ~ Make Branch & timestamp focusable, Keep icon when infobox open ~ - Showing a "(i)" info icon (using Font Awesome) on the right-hand side of a row's summary column when hovering over the row or when the focus is on some child of the row. The infobox should only be popped up when hovering over that icon, or when tabbing to it and pressing Space, Enter, Up, or Down.
~ - Improving keyboard accessibility in the infobox. When opening the infobox via keyboard, focus should move to the infobox. The branch, timestamp, and description fields will also be focusable.
~ - Tabbing out of the infobox or pressing Escape should close the infobox.
+ + [aria-expanded="true"]
keeps icon when infobox open.+ + Add info-icon & add key accessibility to icon:
+ _onTargetKeyDown($target, InfoboxViewType, evt)
will display the infobox by pressing UP, DOWN, ENTER, SPACE key while the info-icon is focused.+ _onInfoboxKeyDown(evt)
will hidden the infobox by pressing ESCAPE key while the infobox or it's children are focused.+ + tabindex="0"
makes branch & timestamp, and description area focusable.+ + Make branch, timestamp, and description area accessibly by keydown:
+ _onHoverItemKeyDown(evt)
will display the hover details for the branch and timestamp by pressing UP, DOWN, ENTER, SPACE key while the item is focused. This will hide the hover details for the item by pressing ESCAPE key while the item is focused.+ _onScrollableKeyDown(evt)
will turn off the padding so the scrollbar has room by pressing UP, DOWN, ENTER, SPACE key while the item is focused. This will re-enable the padding where the scrollbar would be by pressing ESCAPE key while the item is focused. - Testing Done:
-
+ Tested on Firefox, Chrome, and Safari.
- Commits:
-
Summary ID Author 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ bc7bfb1b548236b8beb806a38e673be322f6a311 XiaoleZ 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ bc7bfb1b548236b8beb806a38e673be322f6a311 XiaoleZ 404c36fd908918cda95103d2ede3094850b0d768 XiaoleZ fee0cd1659e5a695ee47eeeb7781c52de3b72d74 XiaoleZ 84d7f9cc9666fdfb6dc00eb1bfcff0bfe17be98a XiaoleZ
Checks run (2 succeeded)
- Change Summary:
-
hover effect on info-icon
- Testing Done:
-
~ Tested on Firefox, Chrome, and Safari.
~ Manually Tested on Firefox, Chrome, and Safari.
- Commits:
-
Summary ID Author 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ bc7bfb1b548236b8beb806a38e673be322f6a311 XiaoleZ 404c36fd908918cda95103d2ede3094850b0d768 XiaoleZ fee0cd1659e5a695ee47eeeb7781c52de3b72d74 XiaoleZ 84d7f9cc9666fdfb6dc00eb1bfcff0bfe17be98a XiaoleZ 89965b53360b88265b58f737c6ee6f08572e12db XiaoleZ 6fc1b6e1e1943bb62c06dcaf69b9a5478351bf1a XiaoleZ f5369761f6729f293dbcb721b315928fec30e556 XiaoleZ 01d614d1f449b3ac35bd881cf4002aadeb9371db XiaoleZ bc7bfb1b548236b8beb806a38e673be322f6a311 XiaoleZ 404c36fd908918cda95103d2ede3094850b0d768 XiaoleZ fee0cd1659e5a695ee47eeeb7781c52de3b72d74 XiaoleZ 84d7f9cc9666fdfb6dc00eb1bfcff0bfe17be98a XiaoleZ 4b6745fdb5003905927dfb6a97820e5977aea739 XiaoleZ 84273a0522bb68a1b4829c16d60ad680af666a42 XiaoleZ - Diff:
-
Revision 5 (+453 -85)
- Added Files: