Merge branch '511802-project-notifications-button-a11y' into 'master'

Add discernible text to project notifications button

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/179088



Merged-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Approved-by: Artur Fedorov <afedorov@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Reviewed-by: Doug Stull <dstull@gitlab.com>
Co-authored-by: Pedro Moreira da Silva <pedro@gitlab.com>

app/assets/javascripts/notifications/components/notifications_dropdown.vue

@@ -72,15 +72,14 @@ export default {
       return this.selectedNotificationLevel === 'disabled' ? 'notifications-off' : 'notifications';
     },
     buttonText() {
-      return this.showLabel
-        ? this.$options.i18n.notificationTitles[this.selectedNotificationLevel]
-        : null;
-    },
-    buttonTooltip() {
       const notificationTitle =
         this.$options.i18n.notificationTitles[this.selectedNotificationLevel] ||
         this.selectedNotificationLevel;
 
+      if (this.showLabel) {
+        return notificationTitle;
+      }
+
       return this.emailsDisabled
         ? this.$options.i18n.notificationDescriptions.owner_disabled
         : sprintf(this.$options.i18n.notificationTooltipTitle, {
@@ -122,7 +121,7 @@ export default {
 <template>
   <div :class="containerClass">
     <gl-dropdown
-      v-gl-tooltip="{ title: buttonTooltip }"
+      v-gl-tooltip="{ title: buttonText }"
       data-testid="notification-dropdown"
       :size="buttonSize"
       :icon="buttonIcon"
@@ -130,6 +129,7 @@ export default {
       :disabled="emailsDisabled"
       :split="isCustomNotification"
       :text="buttonText"
+      :text-sr-only="!showLabel"
       :no-flip="noFlip"
       :aria-label="__('Notification setting - Custom')"
       @click="openNotificationsModal"

spec/frontend/notifications/components/notifications_dropdown_spec.js

@@ -47,6 +47,7 @@ describe('NotificationsDropdown', () => {
   const findDropdownItemAt = (index) =>
     findAllNotificationsDropdownItems().at(index).findComponent(GlDropdownItem);
   const findNotificationsModal = () => wrapper.findComponent(CustomNotificationsModal);
+  const tooltipTitlePrefix = 'Notification setting';
 
   const clickDropdownItemAt = async (index) => {
     const dropdownItem = findDropdownItemAt(index);
@@ -85,13 +86,13 @@ describe('NotificationsDropdown', () => {
         expect(findDropdown().props().text).toBe('Custom');
       });
 
-      it("doesn't show the button text when showLabel is false", () => {
+      it('shows the tooltip text when showLabel is false', () => {
         wrapper = createComponent({
           initialNotificationLevel: 'custom',
           showLabel: false,
         });
 
-        expect(findDropdown().props().text).toBe(null);
+        expect(findDropdown().props().text).toBe(`${tooltipTitlePrefix} - Custom`);
       });
 
       it('opens the modal when the user clicks the button', async () => {
@@ -127,17 +128,16 @@ describe('NotificationsDropdown', () => {
         expect(findDropdown().props('text')).toBe('Global');
       });
 
-      it("doesn't show the button text when showLabel is false", () => {
+      it('shows the tooltip text when showLabel is false', () => {
         wrapper = createComponent({
           showLabel: false,
         });
 
-        expect(findDropdown().props('text')).toBe(null);
+        expect(findDropdown().props('text')).toBe(`${tooltipTitlePrefix} - Global`);
       });
     });
 
     describe('button tooltip', () => {
-      const tooltipTitlePrefix = 'Notification setting';
       it.each`
         level              | title
         ${'global'}        | ${'Global'}