diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb index a3ebd619a..2a6d927f4 100644 --- a/app/helpers/avatars_helper.rb +++ b/app/helpers/avatars_helper.rb @@ -10,8 +10,10 @@ module AvatarsHelper AVATAR_COLORS[Zlib.crc32(user.to_param) % AVATAR_COLORS.size] end - def avatar_tag(user, **options) - link_to user_path(user), title: user.name, class: "btn avatar", data: { turbo_frame: "_top" } do + def avatar_tag(user, hidden_for_screen_reader: false, **options) + link_to user_path(user), title: user.name, class: "btn avatar", data: { turbo_frame: "_top" }, + aria: { hidden: hidden_for_screen_reader, label: user.name }, + tabindex: hidden_for_screen_reader ? -1 : nil do avatar_image_tag(user, **options) end end diff --git a/app/helpers/messages_helper.rb b/app/helpers/messages_helper.rb index 0fc940b37..bac9af789 100644 --- a/app/helpers/messages_helper.rb +++ b/app/helpers/messages_helper.rb @@ -3,6 +3,7 @@ module MessagesHelper turbo_frame_tag dom_id(bubble, :messages), class: "comments align-center center borderless margin flex flex-column gap-half", style: "--bubble-color: <%= bubble.color %>", + role: "group", aria: { label: "Messages" }, data: { controller: "created-by-current-user", created_by_current_user_mine_class: "comment--mine" diff --git a/app/javascript/controllers/reaction_delete_controller.js b/app/javascript/controllers/reaction_delete_controller.js index f4672d693..3c89ec00d 100644 --- a/app/javascript/controllers/reaction_delete_controller.js +++ b/app/javascript/controllers/reaction_delete_controller.js @@ -6,14 +6,15 @@ export default class extends Controller { static values = { reacterId: Number } connect() { - if (this.#currentUserIsreacter) { + if (this.#currentUserIsReacter) { this.#setAccessibleAttributes() } } reveal() { - if (this.#currentUserIsreacter) { + if (this.#currentUserIsReacter) { this.element.classList.toggle(this.revealClass) + this.contentTarget.ariaExpanded = this.element.classList.contains(this.revealClass) this.buttonTarget.focus() } } @@ -23,11 +24,12 @@ export default class extends Controller { } #setAccessibleAttributes() { - this.contentTarget.setAttribute('tabindex', '0') - this.contentTarget.setAttribute('aria-describedby', 'delete_reaction_accessible_label') + this.contentTarget.role = "button" + this.contentTarget.tabIndex = 0 + this.contentTarget.ariaExpanded = false } - get #currentUserIsreacter() { + get #currentUserIsReacter() { return Current.user.id === this.reacterIdValue } } diff --git a/app/views/comments/_body.html.erb b/app/views/comments/_body.html.erb index 14b976386..c9cebe0ff 100644 --- a/app/views/comments/_body.html.erb +++ b/app/views/comments/_body.html.erb @@ -2,12 +2,16 @@ <%= turbo_frame_tag dom_id(comment) do %>
+ <%= link_to comment.creator.name, user_path(comment.creator), class: "txt-ink btn btn--plain fill-transparent", data: { turbo_frame: "_top" } %> + <%= link_to bucket_bubble_path(comment.bubble.bucket, comment.bubble, anchor: "comment_#{comment.id}"), class: "txt-undecorated" do %> + <%= local_datetime_tag comment.created_at, style: :shortdate, class: "comment__timestamp" %> + <% end %> +
- <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), class: "btn txt-small btn--plain fill-transparent comment__edit", style: "font-size: 0.4em; opacity: 0.5;" do %> + <%= link_to edit_bucket_bubble_comment_path(comment.bubble.bucket, comment.bubble, comment), role: "button", + class: "btn txt-small btn--plain fill-transparent comment__edit", + style: "font-size: 0.4em; opacity: 0.5;" do %> <%= image_tag "menu-dots-horizontal.svg", class: "icon colorize--black" %> Edit <% end %> diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb index 932a5095b..4bbe0d96b 100644 --- a/app/views/comments/_comment.html.erb +++ b/app/views/comments/_comment.html.erb @@ -1,7 +1,7 @@ <%= comment_tag comment do %> -