Companies' map on phones: the Table button as its icon alone, with a "Table view" tooltip below it #916

New issue

Closed

opened 2026-10-15 17:19:37 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:37 +00:00

Owner

On a phone held upright, the companies' map shows the Table button as its icon alone, with a tooltip "Table view" below it on hover and on focus.

What exists today

templates/jobs/company_map.html: <a href="{% url 'jobs:company_list' %}" class="btn absolute end-3 top-3 z-1 shadow-sm" data-variant="outline" data-map-table>{% icon "table" %}{% translate "Table" %}</a>, at the top of the end side since #909. It shows the icon and the word at every width.
The map's other icon-only controls (zoom, Near me, and the source-code and help icons in the footer line) are named by a data-tooltip sentence through aria-labelledby (#909). The calendar's view buttons already drop their words on small screens (#904, 560deb0a0), and #852 is a setting for icons, labels or both.

What would change

Below sm, the word is visually hidden (sr-only at that width, not removed), so the link keeps its accessible name. Above sm it is drawn as now.
A tooltip "Table view" is attached to the link, placed below it (it sits at the top of the map). It is shown on hover and on focus, through the page's tooltip script (data-tooltip). At widths where the word is visible, the tooltip is not needed. Whether it shows there too is left to whoever builds it, but it must not repeat the visible word to a screen reader.
The target stays at least 24px (btn data-size="icon" at that width).

Notes

"Table view" is a new string for the catalogues and Weblate. The visible word stays "Table".
Placing it below depends on the tooltip script honouring a requested side. #909's tooltips choose above first. See #915 for a data-tooltip-place attribute, which this can share.

Related: #909, #849, #904, #852.

Checked against main at 56fc9d531.

On a phone held upright, the companies' map shows the *Table* button as its icon alone, with a tooltip "Table view" below it on hover and on focus. ## What exists today - `templates/jobs/company_map.html`: `<a href="{% url 'jobs:company_list' %}" class="btn absolute end-3 top-3 z-1 shadow-sm" data-variant="outline" data-map-table>{% icon "table" %}{% translate "Table" %}</a>`, at the top of the end side since #909. It shows the icon and the word at every width. - The map's other icon-only controls (zoom, Near me, and the source-code and help icons in the footer line) are named by a `data-tooltip` sentence through `aria-labelledby` (#909). The calendar's view buttons already drop their words on small screens (#904, `560deb0a0`), and #852 is a setting for icons, labels or both. ## What would change - Below `sm`, the word is visually hidden (`sr-only` at that width, not removed), so the link keeps its accessible name. Above `sm` it is drawn as now. - A tooltip "Table view" is attached to the link, placed **below** it (it sits at the top of the map). It is shown on hover and on focus, through the page's tooltip script (`data-tooltip`). At widths where the word is visible, the tooltip is not needed. Whether it shows there too is left to whoever builds it, but it must not repeat the visible word to a screen reader. - The target stays at least 24px (`btn` `data-size="icon"` at that width). ## Notes - "Table view" is a new string for the catalogues and Weblate. The visible word stays "Table". - Placing it below depends on the tooltip script honouring a requested side. #909's tooltips choose above first. See #915 for a `data-tooltip-place` attribute, which this can share. Related: #909, #849, #904, #852. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-15 17:19:37 +00:00

tiagoagueda referenced this issue from a commit

2026-10-19 17:32:26 +00:00

Companies' map on phones: the Table link as its icon, with a tooltip

tiagoagueda referenced this issue from a pull request that will close it,

2026-10-19 17:32:37 +00:00

Companies' map on phones: the Table link as its icon, with a tooltip #1016