Skip to content

Bugfix - accessibility in info panel #719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lawsie merged 3 commits into from
Jul 21, 2026
+13 −17
Merged

Bugfix - accessibility in info panel #719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b1db67
Fix info panel tablist
lawsie Jul 21, 2026
061129b
Remove wrong test
lawsie Jul 21, 2026
772fc38
Merge branch 'flipcomputing:main' into info-panel-child
lawsie Jul 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion accessibility/keyboardui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,7 +666,7 @@ const InfoPanel = {

init() {
this._el = document.getElementById('info-panel');
this._tablist = document.getElementById('info-panel-tabs');
this._tablist = document.getElementById('info-panel-tablist');
this._body = document.getElementById('info-panel-body');
},

Expand Down
11 changes: 6 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1323,11 +1323,12 @@ <h2 id="modal-title" data-i18n="about_heading">
aria-label="Information panel"
>
<div id="info-panel-body"></div>
<div
id="info-panel-tabs"
role="tablist"
aria-label="Information panel tabs"
>
<div id="info-panel-tabs">
<div
id="info-panel-tablist"
role="tablist"
aria-label="Information panel tabs"
></div>
<div id="flocklink">
<a
href="https://flockxr.com/"
Expand Down
6 changes: 4 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2299,8 +2299,10 @@ kbd {
box-sizing: border-box;
}

#info-panel-tabs #flocklink {
order: 999;
#info-panel-tablist {
display: flex;
align-items: center;
min-width: 0;
}

#info-panel-body {
Expand Down
11 changes: 2 additions & 9 deletions tests/keyboardui.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,14 +236,6 @@ export function runKeyboardUiTests(flock) {
expect(area5.selector).to.equal('#viewToggle');
});

it('keeps area 5 as the info panel tabs when #info-panel-tabs is on screen', function () {
const el = document.createElement('div');
el.id = 'info-panel-tabs';
document.body.appendChild(el);
const area5 = AreaManager.effectiveAreas.find((a) => a.label === '5');
expect(area5.selector).to.equal('#info-panel-tabs');
});

it('swaps area 9 for the reload button when one is connected to the DOM', function () {
const reload = document.createElement('button');
reload.id = 'reload-btn';
Expand All @@ -267,7 +259,8 @@ export function runKeyboardUiTests(flock) {
// and initialize them here, the same way main.js's bootstrap does.
panelRoot = document.createElement('div');
panelRoot.innerHTML =
'<div id="info-panel"><div id="info-panel-tabs" role="tablist"></div>' +
'<div id="info-panel"><div id="info-panel-tabs">' +
'<div id="info-panel-tablist" role="tablist"></div></div>' +
'<div id="info-panel-body"></div></div>';
document.body.appendChild(panelRoot);
InfoPanel.init();
Expand Down
Loading