Merge pull request #3 from code4rena-dev/develop

Minor accessibility cleanup

Author: leo95oliveira

README.md

@@ -13,6 +13,9 @@ OR
 yarn storybook
 ```
 
+### Storybook Actions
+If you want to make use of [Storybook actions](https://storybook.js.org/docs/angular/essentials/actions) for a specific component, please refer to the `Button.stories.tsx` file. The recommendation is to pass the event handler function directly to the Story component as opposed to passing it through _ComponentName.args_. Passing the event handler function through the **args** parameter may not log the event in the `Actions` tab of the Story's dashboard.
+
 ## Testing
 For testing, we are using [Jest](https://jestjs.io/docs/getting-started) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
 

src/components/Alert/Alert.scss

@@ -27,6 +27,13 @@
     a {
         display: inline;
         color: $color__blurple__text--light;
+        
+        &:focus {
+            outline: none;
+            padding: 0 $spacing__xs;
+            border: 1px solid $color__white !important;
+            border-radius: $border-radius__base;
+        }
 
         &:after {
             content: " →"

src/components/Alert/Alert.tsx

@@ -20,7 +20,7 @@ import "./Alert.scss";
  * @param redirectUrl - Relative path or absolute url to be navigated to.
  * @param variant - Style variant to be applied to rendered component.
  * @param className - String of custom classes to extend the default styling of the component.
- * @param id - Element identifier
+ * @param id - HTML element identifier
  */
 const Alert: React.FC<AlertProps> = ({
   title,

src/components/Alert/Alert.types.ts

@@ -18,6 +18,6 @@ export interface AlertProps {
   variant?: AlertVariant;
   /** String of custom classes to extend the default styling of the component. */
   className?: string;
-  /** Element identifier */
+  /** HTML element identifier */
   id?: string;
 }

src/components/Button/Button.scss

@@ -24,6 +24,8 @@ $button__border-width: 2px;
   border-radius: $border-radius__m;
   color: $color__white;
   font-family: $font__default;
+  font-size: 1.125rem;
+  line-height: 150%;
   font-weight: 500 !important; // These could be inherited from copy/text styles
   text-decoration: none !important; // These could be inherited from copy/text styles
   text-align: center;

src/components/Button/Button.stories.tsx

@@ -17,18 +17,25 @@ const meta: Meta<typeof Button> = {
   tags: ["autodocs"],
   argTypes: {
     variant: { control: "select" },
-    type: { control: "select" },
+    type: { control: "select", if: { arg: "href", truthy: false } },
     size: { control: "select" },
     onClick: {
       control: "function",
+      action: "clicked",
+      if: { arg: "href", truthy: false },
+    },
+    disabled: {
+      if: { arg: "href", truthy: false },
     },
   },
 };
 export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const SampleComponent: Story = (args) => <Button {...args} />;
+export const SampleComponent: Story = (args) => (
+  <Button onClick={() => console.log("Sample Button clicked!")} {...args} />
+);
 SampleComponent.parameters = {
   docs: {
     canvas: { sourceState: "shown" },
@@ -44,7 +51,6 @@ SampleComponent.args = {
   iconLeft: "",
   iconRight: "/icons/edit.svg",
   size: ButtonSize.NARROW,
-  onClick: () => console.log("Sample button clicked!"),
   className: "",
   id: "",
 };
@@ -67,19 +73,19 @@ export const Links: Story = {
       <div style={wrapperStyle}>
         <Button
           variant={ButtonVariant.PRIMARY}
-          label="Internal Link"
+          label="Primary Internal Link"
           href="#internal-test"
         />
         <Button
           variant={ButtonVariant.PRIMARY}
           external
-          label="External Link"
+          label="Primary External Link"
           href="https://google.com"
         />
         <Button
           variant={ButtonVariant.PRIMARY}
           href="#internal-test"
-          label="Link W/ Icons"
+          label="Primary Link W/ Icons"
           iconLeft="/icons/edit.svg"
           iconRight="/icons/edit.svg"
         />
@@ -89,26 +95,29 @@ export const Links: Story = {
       <div style={wrapperStyle}>
         <Button
           variant={ButtonVariant.SECONDARY}
-          label="Internal Link"
+          label="Secondary Internal Link"
           href="#internal-test"
         />
         <Button
           variant={ButtonVariant.SECONDARY}
           external
-          label="External Link"
+          label="Secondary External Link"
           href="https://google.com"
         />
         <Button
           variant={ButtonVariant.SECONDARY}
           href="#internal-test"
-          label="Link W/ Icons"
+          label="Secondary Link W/ Icons"
           iconLeft="/icons/edit.svg"
           iconRight="/icons/edit.svg"
         />
       </div>
     </>
   ),
 };
+Links.parameters = {
+  controls: { hideNoControlsWarning: true, include: [] },
+};
 
 /**
  * Below is a collection of the different states in which you can find C4 buttons.
@@ -130,12 +139,12 @@ export const Buttons: Story = {
         <Button
           variant={ButtonVariant.PRIMARY}
           onClick={() => null}
-          label="Enabled Button"
+          label="Primary Enabled Button"
         />
         <Button
           variant={ButtonVariant.PRIMARY}
           onClick={() => null}
-          label="Button W/ Icons"
+          label="Primary Button W/ Icons"
           iconLeft="/icons/edit.svg"
           iconRight="/icons/edit.svg"
         />
@@ -146,22 +155,25 @@ export const Buttons: Story = {
         <Button
           variant={ButtonVariant.SECONDARY}
           onClick={() => null}
-          label="Enabled Button"
+          label="Secondary Enabled Button"
         />
         <Button
           variant={ButtonVariant.SECONDARY}
           onClick={() => null}
-          label="Button W/ Icons"
+          label="Secondary Button W/ Icons"
           iconLeft="/icons/edit.svg"
           iconRight="/icons/edit.svg"
         />
         <Button
           variant={ButtonVariant.SECONDARY}
           onClick={() => null}
-          label="Disabled Button"
+          label="Primary/Secondary Disabled Button"
           disabled
         />
       </div>
     </>
   ),
 };
+Buttons.parameters = {
+  controls: { hideNoControlsWarning: true, include: [] },
+};

src/components/Button/Button.tsx

@@ -22,7 +22,7 @@ import "./Button.scss";
  * @param external - Determines whether navigation should occur on the same page or in a new tab.
  * @param onClick - Function to be triggered on button click. Does not apply to links.
  * @param className - String of custom classes to extend the default styling of the component.
- * @param id - Element identifier.
+ * @param id - HTML element identifier.
  */
 const Button: React.FC<ButtonProps> = ({
   label,
@@ -93,7 +93,7 @@ Button.defaultProps = {
   size: "NARROW",
   href: "",
   external: false,
-  onClick: () => null,
+  onClick: undefined,
   className: "",
   id: "",
 };

src/components/Button/Button.types.ts

@@ -39,6 +39,6 @@ export interface ButtonProps {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   /** String of custom classes to extend the default styling of the component. */
   className?: string;
-  /** Element identifier */
+  /** HTML element identifier */
   id?: string;
 }

src/components/ContestStatus/ContestStatus.tsx

@@ -12,7 +12,7 @@ import "./ContestStatus.scss";
  *
  * @param status - Status indicator for the current contest. Enum of type {@link Status}.
  * @param className - String of custom classes to extend the default styling of the component.
- * @param id - Element identifier.
+ * @param id - HTML element identifier.
  */
 const ContestStatus: React.FC<ContestStatusProps> = ({
   status,

src/components/ContestStatus/ContestStatus.types.ts

@@ -9,6 +9,6 @@ export interface ContestStatusProps {
   status?: Status;
   /** String of custom classes to extend the default styling of the component. */
   className?: string;
-  /** Element identifier */
+  /** HTML element identifier */
   id?: string;
 }