Skip to content

Commit 23aae5e

Browse files
authored
Add accessibility warning to NavList truncate preview (#3296)
1 parent 21115d4 commit 23aae5e

File tree

5 files changed

+37
-24
lines changed

5 files changed

+37
-24
lines changed
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
- navigation "List heading":
2+
- list:
3+
- listitem:
4+
- button "Really really long label that may wrap, truncate, or appear as a tooltip"
5+
- listitem:
6+
- button "Really really long label that may wrap, truncate, or appear as a tooltip"
7+
- listitem:
8+
- button "Really really long label that may wrap, truncate, or appear as a tooltip"
115 KB
Loading
115 KB
Loading

previews/primer/beta/nav_list_preview.rb

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -134,21 +134,10 @@ def trailing_action; end
134134
#
135135
# @param truncate_label [Symbol] select [none, truncate, show_tooltip]
136136
# @snapshot
137-
def long_label_with_tooltip(truncate_label: :show_tooltip)
138-
render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
139-
component.with_item(
140-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
141-
truncate_label: truncate_label
142-
)
143-
component.with_item(
144-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
145-
truncate_label: truncate_label
146-
)
147-
component.with_item(
148-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
149-
truncate_label: truncate_label
150-
)
151-
end
137+
def truncate(truncate_label: :none)
138+
render_with_template(locals: {
139+
truncate_label: truncate_label
140+
})
152141
end
153142

154143
def long_label_wrap(truncate_label: :none)
@@ -160,15 +149,6 @@ def long_label_wrap(truncate_label: :none)
160149
end
161150
end
162151

163-
def long_label_truncate_no_tooltip(truncate_label: :truncate)
164-
render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
165-
component.with_item(
166-
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
167-
truncate_label: truncate_label
168-
)
169-
end
170-
end
171-
172152
def long_label_show_tooltip_no_truncate_label
173153
render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component|
174154
component.with_item(
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<% if truncate_label == :truncate %>
2+
<div style="margin-bottom:1rem">
3+
<%= render(
4+
Primer::Alpha::Banner.new(
5+
scheme: :warning,
6+
description: 'If you must use truncation, ensure that users can still access the truncated content in an accessible manner, as truncation should be used sparingly.'
7+
)
8+
) { "Inaccessible pattern" } %>
9+
</div>
10+
<% end %>
11+
12+
<%= render(Primer::Beta::NavList.new(aria: { label: "List heading" })) do |component| %>
13+
<% component.with_item(
14+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
15+
truncate_label: truncate_label
16+
) %>
17+
<% component.with_item(
18+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
19+
truncate_label: truncate_label
20+
) %>
21+
<% component.with_item(
22+
label: "Really really long label that may wrap, truncate, or appear as a tooltip",
23+
truncate_label: truncate_label
24+
) %>
25+
<% end %>

0 commit comments

Comments
 (0)