Alert component: Add role, id, and hidden attributes (#1914)

Author: gerardo-rodriguez

.changeset/thick-sloths-talk.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Updates the Alert component by adding `role`, `id` and `hidden` template properties

src/components/alert/alert.stories.mdx

@@ -1,11 +1,72 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import template from './alert.twig';
 
 <Meta
   title="Components/Alert"
   argTypes={{
-    message: { type: { name: 'string' } },
-    dismissable: { type: { name: 'boolean' } },
+    class: {
+      type: 'string',
+      description: 'CSS class(es) to append to the root element.',
+    },
+    message: {
+      type: 'string',
+      description: 'The message within the alert.',
+      table: {
+        defaultValue: { summary: 'Hello world!!!' },
+      },
+    },
+    dismissable: {
+      type: 'boolean',
+      description: 'Adds a close button to the right of the message.',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    icon: {
+      options: [
+        '',
+        'bell',
+        'check',
+        'cloud-slash',
+        'brands/github',
+        'brands/twitter',
+      ],
+      type: 'string',
+      description:
+        'An option to add one of our [icons](/?path=/docs/design-icons--page).',
+      control: {
+        type: 'select',
+      },
+    },
+    floating: {
+      type: 'boolean',
+      description: 'Adds a light border and shadow for a floating effect.',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    tag_name: {
+      type: 'string',
+      description: 'The root element',
+      table: {
+        defaultValue: { summary: 'div' },
+      },
+    },
+    id: {
+      type: 'string',
+      description: 'Adds an `id` attribute to the root element',
+    },
+    hidden: {
+      type: 'boolean',
+      description: 'Adds a `hidden` attribute to the root element.',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    role: {
+      type: 'string',
+      description: 'Adds a `role` attribute on the root element.',
+    },
   }}
 />
 
@@ -30,6 +91,8 @@ This component is still a work in progress. The following features are not yet i
   </Story>
 </Canvas>
 
+<ArgsTable story="Basic" />
+
 ## Dismissable
 
 When `dismissable` is `true`, a close button will display to the right of the message.
@@ -119,15 +182,6 @@ When more contrast is desired, you may also attach a theme class to the the floa
   </Story>
 </Canvas>
 
-## Template Properties
-
-- `class` (string)
-- `icon` (string)
-- `dismissable` (boolean, default `false`)
-- `floating` (boolean, default `false`)
-- `message` (string, default `'Hello world!'`)
-- `tag_name` (string, default `'div'`)
-
 ## Template Blocks
 
 - `content`

src/components/alert/alert.test.ts

@@ -0,0 +1,80 @@
+import path from 'path';
+
+import type { ElementHandle } from 'pleasantest';
+import { getAccessibilityTree, withBrowser } from 'pleasantest';
+
+import { loadTwigTemplate } from '../../../test-utils.js';
+
+/** Helper to load the Twig template file */
+const template = loadTwigTemplate(path.join(__dirname, './alert.twig'));
+
+describe('Alert component', () => {
+  test(
+    'should have no role by default',
+    withBrowser(async ({ utils, page }) => {
+      await utils.injectHTML(
+        await template({
+          message: '¡Hola!',
+        })
+      );
+
+      const body = await page.evaluateHandle<ElementHandle>(
+        () => document.body
+      );
+      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(
+        `text "¡Hola!"`
+      );
+    })
+  );
+
+  test(
+    'should be able to set a role',
+    withBrowser(async ({ utils, page }) => {
+      await utils.injectHTML(
+        await template({
+          role: 'status',
+        })
+      );
+
+      const body = await page.evaluateHandle<ElementHandle>(
+        () => document.body
+      );
+      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+        status
+          text "Hello world!"
+      `);
+    })
+  );
+
+  test(
+    'should respect `hidden` template property',
+    withBrowser(async ({ utils, page }) => {
+      await utils.injectHTML(
+        await template({
+          hidden: true,
+        })
+      );
+
+      const body = await page.evaluateHandle<ElementHandle>(
+        () => document.body
+      );
+      // Nothing to see if the `hidden` attribute is added to the alert
+      expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(``);
+    })
+  );
+
+  test(
+    'should set an `id` attribute',
+    withBrowser(async ({ utils, screen }) => {
+      await utils.injectHTML(
+        await template({
+          id: 'my-id',
+          role: 'status',
+        })
+      );
+
+      const alert = await screen.getByRole('status');
+      await expect(alert).toHaveAttribute('id', 'my-id');
+    })
+  );
+});

src/components/alert/alert.twig

@@ -10,7 +10,12 @@
   {% endblock %}
 {% endset %}
 
-<{{ tag_name }} class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
+<{{ tag_name }}
+  {% if id %}id="{{id}}"{% endif %}
+  class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}"
+  {% if hidden %}hidden{% endif %}
+  {% if role %}role="{{ role }}"{% endif %}
+>
   <div class="c-alert__inner">
     {% if _icon_block|trim is not empty %}
       <span class="c-alert__extra">