fix(vue): replace legacy sr-only with amplify-visually-hidden (#2712)

* use amplify-visually-hidden over sr-only

* Add alias-control unit test

* Create slow-cycles-search.md

* Remove describe layer and improve wording

* start each `it` with a verb + remove unused code

* Align wording

Author: wlee221

.changeset/slow-cycles-search.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-vue": patch
+---
+
+fix(vue): replace legacy `sr-only` with `amplify-visually-hidden`

packages/vue/global-spec.ts

@@ -1,21 +1,25 @@
-import BaseWrapper from './src/components/primitives/base-wrapper.vue';
+import BaseAlert from './src/components/primitives/base-alert.vue';
+import BaseFieldSet from './src/components/primitives/base-field-set.vue';
 import BaseFooter from './src/components/primitives/base-footer.vue';
 import BaseForm from './src/components/primitives/base-form.vue';
-import BaseAlert from './src/components/primitives/base-alert.vue';
+import BaseHeading from './src/components/primitives/base-heading.vue';
+import BaseInput from './src/components/primitives/base-input.vue';
+import BaseLabel from './src/components/primitives/base-label.vue';
 import BaseTwoTabItem from './src/components/primitives/base-two-tab-item.vue';
 import BaseTwoTabs from './src/components/primitives/base-two-tabs.vue';
-import BaseFieldSet from './src/components/primitives/base-field-set.vue';
-import BaseHeading from './src/components/primitives/base-heading.vue';
+import BaseWrapper from './src/components/primitives/base-wrapper.vue';
 import AmplifyButton from './src/components/primitives/amplify-button.vue';
 
 export const components = {
-  BaseWrapper,
-  BaseFooter,
-  BaseForm,
   AmplifyButton,
-  BaseTwoTabItem,
-  BaseTwoTabs,
   BaseAlert,
   BaseFieldSet,
+  BaseFooter,
+  BaseForm,
   BaseHeading,
+  BaseInput,
+  BaseLabel,
+  BaseTwoTabItem,
+  BaseTwoTabs,
+  BaseWrapper,
 };

packages/vue/jest.config.cjs

@@ -3,6 +3,7 @@ module.exports = {
   verbose: true,
   moduleFileExtensions: ['js', 'ts', 'json', 'vue', 'tsx'],
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
   transform: {
     '^.+\\.(ts)$': 'ts-jest',
     '^.+\\.(js|jsx)$': 'babel-jest',

packages/vue/jest.setup.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+
+/**
+ * This is a workaround to the problem of the jsdom library not supporting
+ * URL.createObjectURL. See https://github.com/jsdom/jsdom/issues/1721.
+ */
+if (typeof window.URL.createObjectURL === 'undefined') {
+  window.URL.createObjectURL = jest.fn();
+}

packages/vue/package.json

@@ -48,6 +48,7 @@
     "@rollup/plugin-dynamic-import-vars": "^1.4.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@rushstack/eslint-patch": "^1.1.3",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/vue": "^6.6.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^17.0.34",

packages/vue/src/components/__tests__/alias-control.spec.ts

@@ -0,0 +1,69 @@
+import AliasControl from '../alias-control.vue';
+import { components } from '../../../global-spec';
+import { render, screen } from '@testing-library/vue';
+
+describe('AliasControl', () => {
+  it('renders a label with default class', async () => {
+    render(AliasControl, {
+      global: {
+        components,
+      },
+      props: {
+        label: 'Username',
+        name: 'username',
+        placeholder: 'Username',
+      },
+    });
+    const label = await screen.findByText('Username');
+    expect(label).toHaveClass('amplify-label');
+  });
+
+  it('should add `amplify-visually-hidden` class to label when labelHidden is true', async () => {
+    render(AliasControl, {
+      global: {
+        components,
+      },
+      props: {
+        label: 'Username',
+        name: 'username',
+        placeholder: 'Username',
+        labelHidden: true,
+      },
+    });
+
+    const label = await screen.findByText('Username');
+    expect(label).toHaveClass('amplify-visually-hidden');
+  });
+
+  it('renders text field with default class and attributes', async () => {
+    render(AliasControl, {
+      global: {
+        components,
+      },
+      props: {
+        label: 'Username',
+        name: 'username',
+        placeholder: 'Username',
+      },
+    });
+    const field = await screen.findByRole('textbox');
+    expect(field).toHaveClass('amplify-input', 'amplify-field-group__control');
+  });
+
+  it('should add aria-invalid attribute to text field when hasError is true', async () => {
+    render(AliasControl, {
+      global: {
+        components,
+      },
+      props: {
+        label: 'Username',
+        name: 'username',
+        placeholder: 'Username',
+        hasError: true,
+      },
+    });
+
+    const field = await screen.findByRole('textbox');
+    expect(field).toHaveAttribute('aria-invalid');
+  });
+});

packages/vue/src/components/alias-control.vue

@@ -46,7 +46,7 @@ const randomPhone = Math.floor(Math.random() * 999999);
     <base-label
       :for="'amplify-field-' + random"
       class="amplify-label"
-      :class="{ 'sr-only': labelHidden }"
+      :class="{ 'amplify-visually-hidden': labelHidden }"
       v-bind="$attrs"
     >
       {{ label }}