Skip to content

[Fix] Move html table title out of the table caption to a separate element #130

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
sakari-malkki merged 4 commits into from
Nov 7, 2025
Merged

[Fix] Move html table title out of the table caption to a separate element #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1cda828
Move html table title out of the table caption to a separate element
sakari-malkki Nov 5, 2025
b393f22
Adjust burgermenu and chart container padding based on visualization …
sakari-malkki Nov 6, 2025
6f62f9d
Added test coverage
sakari-malkki Nov 6, 2025
2d0bf40
Copilot feedback fixes
sakari-malkki Nov 6, 2025
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
100 changes: 58 additions & 42 deletions src/core/tables/__snapshots__/htmlTable.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@ exports[`Html table render tests should match snapshot: Table with column variab
"<div
id="test-49857934857938475938475"
>
<p
class="tableChart-title"
id="test-49857934857938475938475-title"
>
Adoptiot 1987-1989 muuttujina Syntymävaltio, Ikä
</p>
<table
aria-labelledby="test-49857934857938475938475-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Adoptiot 1987-1989 muuttujina Syntymävaltio, Ikä
</caption>
<thead>
<tr>
<th
Expand Down Expand Up @@ -282,16 +284,18 @@ exports[`Html table render tests should match snapshot: Table with missing data
"<div
id="test-84957394875983745"
>
<p
class="tableChart-title"
id="test-84957394875983745-title"
>
Neliöhinta (EUR/m2), Helsinki 2020Q1-2023Q2* muuttujina Talotyyppi, Huoneluku
<br />
Rivitalot | Kaksiot
</p>
<table
aria-labelledby="test-84957394875983745-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Neliöhinta (EUR/m2), Helsinki 2020Q1-2023Q2* muuttujina Talotyyppi, Huoneluku
<br />
Rivitalot | Kaksiot
</caption>
<thead>
<tr>
<th
Expand Down Expand Up @@ -440,14 +444,16 @@ exports[`Html table render tests should match snapshot: Table with only one cell
"<div
id="test-6895638450983059889"
>
<p
class="tableChart-title"
id="test-6895638450983059889-title"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</p>
<table
aria-labelledby="test-6895638450983059889-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</caption>
<tbody>
<tr>
<td>
Expand All @@ -469,14 +475,16 @@ exports[`Html table render tests should match snapshot: Table with row and colum
"<div
id="test-4329874982374983798"
>
<p
class="tableChart-title"
id="test-4329874982374983798-title"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</p>
<table
aria-labelledby="test-4329874982374983798-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</caption>
<thead>
<tr>
<td
Expand Down Expand Up @@ -1109,14 +1117,16 @@ exports[`Html table render tests should match snapshot: Table with row and colum
"<div
id="test-4329874982374983798"
>
<p
class="tableChart-title"
id="test-4329874982374983798-title"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</p>
<table
aria-labelledby="test-4329874982374983798-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</caption>
<thead>
<tr>
<td
Expand Down Expand Up @@ -2381,14 +2391,16 @@ exports[`Html table render tests should match snapshot: Table with row and colum
"<div
id="test-4329874982374983798"
>
<p
class="tableChart-title"
id="test-4329874982374983798-title"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</p>
<table
aria-labelledby="test-4329874982374983798-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Tiedot 2022Q1-2022Q4 muuttujina Tiedot, Alue, Huoneluku, Rahoitusmuoto
</caption>
<thead>
<tr>
<td
Expand Down Expand Up @@ -3015,14 +3027,16 @@ exports[`Html table render tests should match snapshot: Table with row variables
"<div
id="test-9483567287648723649867"
>
<p
class="tableChart-title"
id="test-9483567287648723649867-title"
>
Lukumäärä 2022Q1-2022Q4 muuttujina Alue, Huoneluku, Rahoitusmuoto
</p>
<table
aria-labelledby="test-9483567287648723649867-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Lukumäärä 2022Q1-2022Q4 muuttujina Alue, Huoneluku, Rahoitusmuoto
</caption>
<tbody>
<tr>
<th
Expand Down Expand Up @@ -3547,14 +3561,16 @@ exports[`Html table render tests should match snapshot: Table with source and fo
"<div
id="test-6895638450983059889"
>
<p
class="tableChart-title"
id="test-6895638450983059889-title"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</p>
<table
aria-labelledby="test-6895638450983059889-title"
tabindex="0"
>
<caption
class="tableChart-caption"
>
Lukumäärä, Vantaa, Yksiöt, Vapaarahoitteinen 2022Q4
</caption>
<tbody>
<tr>
<td>
Expand Down
15 changes: 10 additions & 5 deletions src/core/tables/htmlTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,20 @@ export function renderHtmlTable(view: View, locale: string, options: IChartOptio
const table = generateTable(view, locale);

if (options.showTitles) {
const titleId = `${containerId}-title`;
const titleElement = document.createElement('p');
titleElement.id = titleId;
titleElement.textContent = view.header[locale];
titleElement.className = 'tableChart-title';

const caption = document.createElement('caption');
caption.textContent = view.header[locale];
if (view.subheaderValues.length > 0) {
const subtitle: string = view.subheaderValues.map(value => value[locale]).join(' | ');
caption.append(document.createElement('br'), subtitle);
titleElement.append(document.createElement('br'), subtitle);
}
caption.className = 'tableChart-caption';
table.prepend(caption);
// Set aria-labelledby on the table to reference the title
table.setAttribute('aria-labelledby', titleId);

container.append(titleElement);
}

container.append(table);
Expand Down
Loading
Loading