diff --git a/app/assets/images/notification-bell-access-only.svg b/app/assets/images/notification-bell-access-only.svg
new file mode 100644
index 000000000..b8fa159e8
--- /dev/null
+++ b/app/assets/images/notification-bell-access-only.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/notification-bell-everything.svg b/app/assets/images/notification-bell-everything.svg
new file mode 100644
index 000000000..52a5611fb
--- /dev/null
+++ b/app/assets/images/notification-bell-everything.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/notification-bell-watching.svg b/app/assets/images/notification-bell-watching.svg
new file mode 100644
index 000000000..05827531d
--- /dev/null
+++ b/app/assets/images/notification-bell-watching.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/helpers/accesses_helper.rb b/app/helpers/accesses_helper.rb
index 20881f733..42c4cd1cd 100644
--- a/app/helpers/accesses_helper.rb
+++ b/app/helpers/accesses_helper.rb
@@ -17,8 +17,11 @@ module AccessesHelper
access = bucket.access_for(user)
turbo_frame_tag dom_id(bucket, :involvement_button) do
- button_to access.involvement, bucket_involvement_path(bucket), method: :put, class: "btn",
- params: { involvement: next_involvement(access.involvement) }
+ button_to bucket_involvement_path(bucket), method: :put, class: "btn", params: { involvement: next_involvement(access.involvement) } do
+ image_tag("notification-bell-#{access.involvement.dasherize}.svg", aria: { hidden: true }, size: 24) +
+ # TODO: should the screen reader label include the state we're in, or the state the button sets it to?
+ tag.span("#{bucket.name} notification settings", class: "for-screen-reader")
+ end
end
end