mirror of
https://github.com/discourse/discourse.git
synced 2026-08-07 13:19:19 +08:00
c1614b9a67We've been improperly adding category and tag descriptions to the title attribute of category and tag links. This removes them. [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/title) summarizes the problem with title attributes used as supplemental information: > Use of the title attribute is highly problematic for: > > People using touch-only devices > People navigating with keyboards > People navigating with assistive technology such as screen readers or magnifiers > People experiencing fine motor control impairment > People with cognitive concerns > > This is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page. If a tooltip effect is desired, it is better to [use a more accessible technique](https://inclusive-components.design/tooltips-toggletips/) that can be accessed with the above browsing methods. The most immediate issue is that the title descriptions can be very long for screenreaders and can make navigating the page fairly verbose. What someone using JAWS comes across every time they tab through this category: <img width="450" alt="image" src="https://github.com/user-attachments/assets/2277df83-4cad-4f86-8c86-147c0458bd26" /> We already have this information available in the "about this category" topic, in category dropdowns, category headings (when visible) and other places, so it's not critical to have here. There's also a general asymmetry: * mouse users: can optionally see them on hover * keyboard users: can never access them * touch users: can never access them * screenreaders: some read them so they have to be skipped every time If we find these sort of tooltips valuable and want to add a description on hover, we should do it in a way that's reachable to hover/keyboard/touch without adding verbosity to typical nav for screenreaders.
43 lines
1.1 KiB
Ruby
Vendored
43 lines
1.1 KiB
Ruby
Vendored
# frozen_string_literal: true
|
|
|
|
require "category_badge"
|
|
|
|
RSpec.describe CategoryBadge do
|
|
it "escapes HTML in category names" do
|
|
c = Fabricate(:category, name: "<b>name</b>")
|
|
|
|
html = CategoryBadge.html_for(c)
|
|
|
|
expect(html).not_to include("<b>name</b>")
|
|
expect(html).to include("<b>name</b>")
|
|
end
|
|
|
|
it "does not expose the category description as a tooltip" do
|
|
c = Fabricate(:category, description: "a description")
|
|
|
|
html = CategoryBadge.html_for(c)
|
|
|
|
expect(html).not_to include("title=")
|
|
expect(html).not_to include("a description")
|
|
end
|
|
|
|
it "includes color vars" do
|
|
c = Fabricate(:category, color: "123456", text_color: "654321")
|
|
html = CategoryBadge.html_for(c)
|
|
|
|
expect(html).to have_tag(
|
|
"span[data-category-id]",
|
|
with: {
|
|
style: "--category-badge-color: #123456; --category-badge-text-color: #654321;",
|
|
},
|
|
)
|
|
end
|
|
|
|
it "includes inline color style when inline_style is true" do
|
|
c = Fabricate(:category, color: "123456")
|
|
|
|
html = CategoryBadge.html_for(c, inline_style: true)
|
|
|
|
expect(html).to include("background-color: #123456;")
|
|
end
|
|
end
|
