fix(usm): add aria label (#3191)

fix(usm): add aria label expires

Requested changes:
add aria-label="expires" and to the span containing the clock icon.

Author: jpan-box

i18n/en-US.properties

@@ -1656,6 +1656,8 @@ boxui.unifiedShare.emailModalTitle = Send Link to ‘{itemName}’
 boxui.unifiedShare.enterAtLeastOneEmail = Enter at least one valid email
 # Tooltip text shown in the share modal, encouraging users to enter email addresses to share the item with
 boxui.unifiedShare.enterEmailAddressesCalloutText = Share this item with coworkers by entering their email addresses
+# Label for tooltips or other components that display expiration icons
+boxui.unifiedShare.expiresMessage = Expires
 # This is label for the button so a user understands the new interface
 boxui.unifiedShare.ftuxConfirmLabel = Got it
 # Text for the body of the tooltip for the ftux experience when the edit option is available for the user

src/features/unified-share-modal/SharedLinkSection.js

@@ -459,7 +459,6 @@ class SharedLinkSection extends React.Component<Props, State> {
         const isToggleEnabled = (canAddSharedLink || canRemoveSharedLink) && !submitting;
 
         let linkText;
-
         if (isSharedLinkEnabled) {
             linkText = <FormattedMessage {...messages.linkShareOn} />;
             if (expirationTimestamp && expirationTimestamp !== 0) {
@@ -472,7 +471,11 @@ class SharedLinkSection extends React.Component<Props, State> {
                                 expiration: convertToMs(expirationTimestamp),
                             })}
                         >
-                            <span className="shared-link-expiration-badge" role="img">
+                            <span
+                                aria-label={intl.formatMessage(messages.expiresMessage)}
+                                className="shared-link-expiration-badge"
+                                role="img"
+                            >
                                 <IconClock color={bdlWatermelonRed} />
                             </span>
                         </Tooltip>

src/features/unified-share-modal/__tests__/SharedLinkSection.test.js

@@ -148,7 +148,7 @@ describe('features/unified-share-modal/SharedLinkSection', () => {
         expect(wrapper).toMatchSnapshot();
     });
 
-    test('should account for shared link expirations being set', () => {
+    test('should match snapshot when shared link expiration is set', () => {
         const wrapper = getWrapper({
             sharedLink: {
                 accessLevel: 'peopleInYourCompany',
@@ -310,6 +310,22 @@ describe('features/unified-share-modal/SharedLinkSection', () => {
         expect(wrapper.exists('.email-shared-link-btn')).toBe(emailButtonExists);
     });
 
+    test('should have aria-label and role on shared link expiration badge when expiration timestamp exists', () => {
+        // Set an expiration timestamp so that Toggle is rendered with expiration icon
+        const sharedLink = {
+            expirationTimestamp: 1,
+            url: 'https://example.com/shared-link',
+        };
+        const wrapper = getWrapper({ sharedLink });
+        const toggle = wrapper.find('Toggle');
+
+        // The aria-label attr is on a span, which is contained within the label of the Toggle component
+        const spanLabel = toggle.dive().find('.shared-link-expiration-badge');
+
+        expect(spanLabel.prop('aria-label')).toBe('Expires');
+        expect(spanLabel.prop('role')).toBe('img');
+    });
+
     describe('componentDidMount()', () => {
         test('should attempt shared link creation when component is mounted with initial, empty shared link data', () => {
             const sharedLink = { url: '', isNewSharedLink: false };

src/features/unified-share-modal/__tests__/__snapshots__/SharedLinkSection.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`features/unified-share-modal/SharedLinkSection should account for shared link expirations being set 1`] = `
+exports[`features/unified-share-modal/SharedLinkSection should match snapshot when shared link expiration is set 1`] = `
 <div
   className="be"
 >
@@ -41,6 +41,7 @@ exports[`features/unified-share-modal/SharedLinkSection should account for share
               theme="default"
             >
               <span
+                aria-label="Expires"
                 className="shared-link-expiration-badge"
                 role="img"
               >

src/features/unified-share-modal/messages.js

@@ -540,6 +540,11 @@ const messages = defineMessages({
             'Text to show when the number of contact email addresses displayed on a tooltip exceeds the maximum amount that can be displayed',
         id: 'boxui.unifiedShare.contactEmailsTooltipText',
     },
+    expiresMessage: {
+        defaultMessage: 'Expires',
+        description: 'Label for tooltips or other components that display expiration icons',
+        id: 'boxui.unifiedShare.expiresMessage',
+    },
 });
 
 export default messages;