Add a custom CSS class .graphic-link or .icon-link so theme developers can style them differently to tooltips

[travis-jeans]

Requirements

• This is a feature request and not a bug report. Otherwise, please create a new bug report instead.
• Please check to see if this request (or a similar one) already exists.
• It's a single feature. Please don't request multiple features in one issue.

Describe the feature you'd like

One of the changes I made on RBlind-Lemmy-Themes was to style graphic links as user interface elements by giving them an outline. However since icon links don't have a class specifying they are graphic links targeting them with CSS is inefficient and also not robust as if any new icons are added in future the changes won't apply to them.

It is currently not possible to tell the difference visually between icons that behave as tooltips and graphic links with the current design.

Tooltips

Image Description: Example screenshot from RBlind-Dark.css. Beside the post title "A Brief Introduction to RBlind" the post toggle icon button which is styled with rounded borders and pin tooltips beside it with no outline.

Icon links

Image Description: Example screenshot from RBlind with the RBlind-Dark.css theme. The tab buttons below the navigation bar are followed by two graphic links for sorting help and and RSS feed. With CSS styling they have square outlines to indicate they are UI elements.

CSS Examples

In the themes the way these are defined is by specifying the icons in an overly specific way.

• Changed the box size properties of icon links so the added padding (below) does not squish the icons to become invisible. Added a.sort-select-icon .icon, a[title=RSS] .icon, a[title="sorting help"] .icon, a.nav-link .icon { box-sizing: content-box !important; }
• Increased the size of the button's icons. Added .icon { height: 1em; font-size: 1.2em !important; }
• Increased the padding on buttons to increase the target area above 44px and add an outline to make clear buttons with icons are buttons and not images. Icons that behave as links also get an outline and are selected specifically by title (RSS and Sorting Help). this includes a lone button not styled with the .btn class on the inbox page and the navbar toggler icon (menu icon). Added .btn-sm, .btn-group-sm > .btn, .btn, a.sort-select-icon .icon, a[title=RSS] .icon, a[title="sorting help"] .icon, .inbox .private-message ul.list-inline.mb-0.text-muted.small li:last-child .icon, .navbar-toggler .icon, #navMessages { padding: 0.7rem 0.7rem !important; outline: 1px solid rgba(var(--gray-200-rgb), 0.5) !important; }
• Fix box model of the icon in the inbox and round the outline and the navbar-toggler which is also missing a btn style. Added .inbox .private-message ul.list-inline.mb-0.text-muted.small li:last-child .icon, .navbar-toggler .icon { box-sizing: content-box; border-radius: var(--bs-border-radius); }
• Increased the size of icons when they behave as links. Added .btn-sm .icon, .btn-group-sm > .btn .icon, .btn .icon, a.sort-select-icon .icon, a[title=RSS] .icon, a[title="sorting help"] .icon, nav a.nav-link .icon { height: 1em; font-size: 1.2em !important; } Note This is dissociated from the above change to .icon as this class is shared by buttons without icons and buttons with icons. If padding was added to all .icons, buttons containing icons would have a duplicate amount of padding.

These changes are all viewable at RBlind-Lemmy-Themes (theme variables and classes).

So if there was a custom class .icon-link or .graphic-link on the wrapping link <a href> it would mean not having to pick out icons that behave as links by their title e.g. a[title=RSS] or a[title="sorting help"]. This could be helpful for theme developers who want to style icon links and tooltips to look different.

[dessalines]

Side point, but instead of doing all this custom CSS theming, you'd be far better off finding a accessibility-focused bootstrap theme. I'm sure there are many out there. Then we could fix any internal issues in lemmy-ui, that aren't correctly using bootstrap's accessibility features, and all instances would benefit from accessibility support.

Beside the post title "A Brief Introduction to RBlind" the post toggle icon button which is styled with rounded borders and pin tooltips beside it with no outline.

Neither of those are tooltips, the first is a button, and the pins are icons, that don't do any actions, but have helper tooltips with them (as do many buttons). You can style them differently based on whether they are buttons or not.

If you'd like to add a .icon-link to those tho, feel free to do a PR. There are a ton of icon indicators in the codebase.