Add a11y to MdAccordion, increase MdInput suffix contrast (#51)

* Add a11y to MdAccordion, increase MdInput contrast * let accordion close button text be definable * update AccordionItem.Stories.tsx * set input suffix to even darker color for higher contrast
miljodir · Dec 8, 2023 · 9169869 · 9169869
1 parent 198b4ae
commit 9169869
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 18 deletions.
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

diff --git a/packages/css/src/formElements/input/input.css b/packages/css/src/formElements/input/input.css
@@ -130,10 +130,6 @@
   display: flex;
 }
 
-.md-input__suffix-content {
-  color: var(--mdGreyColor60);
-}
-
 .md-input__suffix > * + * {
   margin-left: 0.5em;
 }

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

diff --git a/packages/react/src/accordion/MdAccordionItem.tsx b/packages/react/src/accordion/MdAccordionItem.tsx
@@ -14,6 +14,7 @@ export interface MdAccordionItemProps {
   children?: React.ReactNode;
   className?: string;
   hideCloseButton?: boolean;
+  closeButtonText?: string;
   rounded?: boolean;
   onToggle?(_e: React.MouseEvent): void;
 }
@@ -28,6 +29,7 @@ const MdAccordionItem: React.FunctionComponent<MdAccordionItemProps> = ({
   className = '',
   children,
   hideCloseButton = false,
+  closeButtonText = 'Lukk',
   rounded = false,
   onToggle,
 }: MdAccordionItemProps) => {
@@ -72,8 +74,10 @@ const MdAccordionItem: React.FunctionComponent<MdAccordionItemProps> = ({
     <div className={accordionClassNames}>
       {/* Header */}
       <button
-        id={String(accordionId) || undefined}
+        id={`md-accordion-item_button_${accordionId}`}
         type="button"
+        aria-expanded={isExpanded}
+        aria-controls={`md-accordion-item_content_${accordionId}`}
         className={headerClassNames}
         disabled={!!disabled}
         onClick={(e: React.MouseEvent) => {
@@ -89,7 +93,11 @@ const MdAccordionItem: React.FunctionComponent<MdAccordionItemProps> = ({
 
       {/* Content */}
       {!disabled && (
-        <div className={contentClassNames}>
+        <div
+          id={`md-accordion-item_content_${accordionId}`}
+          aria-labelledby={`md-accordion-item_button_${accordionId}`}
+          className={contentClassNames}
+        >
           <div className="md-accordion-item__content-inner">{children}</div>
 
           {!hideCloseButton && (
@@ -101,8 +109,8 @@ const MdAccordionItem: React.FunctionComponent<MdAccordionItemProps> = ({
               }}
               tabIndex={isExpanded ? 0 : -1}
             >
-              <MdMinusIcon className="md-accordion-item__close-button__icon" />
-              <div>Lukk</div>
+              <MdMinusIcon aria-hidden="true" className="md-accordion-item__close-button__icon" />
+              {closeButtonText}
             </button>
           )}
         </div>

diff --git a/packages/react/src/formElements/MdAutocomplete.tsx b/packages/react/src/formElements/MdAutocomplete.tsx
@@ -125,7 +125,6 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
         {helpText && helpText !== '' && (
           <div className={`md-autocomplete__help-text ${helpOpen ? 'md-autocomplete__help-text--open' : ''}`}>
             <MdHelpText
-              role="region"
               id={`md-autocomplete_help-text_${uuid}`}
               aria-labelledby={helpText && helpText !== '' ? `md-autocomplete_help-button_${uuid}` : undefined}
             >

diff --git a/packages/react/src/formElements/MdCheckboxGroup.tsx b/packages/react/src/formElements/MdCheckboxGroup.tsx
@@ -107,7 +107,6 @@ const MdCheckboxGroup: React.FunctionComponent<MdCheckboxGroupProps> = ({
       {helpText && helpText !== '' && (
         <div className={`md-checkboxgroup__help-text ${helpOpen ? 'md-checkboxgroup__help-text--open' : ''}`}>
           <MdHelpText
-            role="region"
             id={`md-checkboxgroup_help-text_${groupId}`}
             aria-labelledby={helpText && helpText !== '' ? `md-checkboxgroup_help-button_${groupId}` : undefined}
           >

diff --git a/packages/react/src/formElements/MdInput.tsx b/packages/react/src/formElements/MdInput.tsx
@@ -94,7 +94,6 @@ const MdInput = React.forwardRef<HTMLInputElement, MdInputProps>(
         {helpText && helpText !== '' && (
           <div className={`md-input__help-text ${helpOpen ? 'md-input__help-text--open' : ''}`}>
             <MdHelpText
-              role="region"
               id={`md-input_help-text_${inputId}`}
               aria-labelledby={helpText && helpText !== '' ? `md-input_help-button_${inputId}` : undefined}
             >
@@ -126,7 +125,7 @@ const MdInput = React.forwardRef<HTMLInputElement, MdInputProps>(
           />
 
           <div className="md-input__suffix">
-            {suffix && <div className="md-input__suffix-content">{suffix}</div>}
+            {suffix}
             {error && !hideErrorIcon && (
               <div className="md-input__error-icon">
                 <MdWarningIcon />

diff --git a/packages/react/src/formElements/MdMultiSelect.tsx b/packages/react/src/formElements/MdMultiSelect.tsx
@@ -158,7 +158,6 @@ const MdMultiSelect: React.FunctionComponent<MdMultiSelectProps> = ({
       {helpText && helpText !== '' && (
         <div className={`md-multiselect__help-text ${helpOpen ? 'md-multiselect__help-text--open' : ''}`}>
           <MdHelpText
-            role="region"
             id={`md-multiselect_help-text_${uuid}`}
             aria-labelledby={helpText && helpText !== '' ? `md-multiselect_help-button_${uuid}` : undefined}
           >

diff --git a/packages/react/src/formElements/MdRadioGroup.tsx b/packages/react/src/formElements/MdRadioGroup.tsx
@@ -105,7 +105,6 @@ const MdRadioGroup: React.FunctionComponent<MdRadioGroupProps> = ({
       {helpText && helpText !== '' && (
         <div className={`md-radiogroup__help-text ${helpOpen ? 'md-radiogroup__help-text--open' : ''}`}>
           <MdHelpText
-            role="region"
             id={`md-radiogroup_help-text_${radioId}`}
             aria-labelledby={helpText && helpText !== '' ? `md-radiogroup_help-button_${radioId}` : undefined}
           >

diff --git a/packages/react/src/formElements/MdSelect.tsx b/packages/react/src/formElements/MdSelect.tsx
@@ -145,7 +145,6 @@ const MdSelect = React.forwardRef<HTMLButtonElement, MdSelectProps>(
         {helpText && helpText !== '' && (
           <div className={`md-select__help-text ${helpOpen ? 'md-select__help-text--open' : ''}`}>
             <MdHelpText
-              role="region"
               id={`md-select_help-text_${uuid}`}
               aria-labelledby={helpText && helpText !== '' ? `md-select_help-button_${uuid}` : undefined}
             >

diff --git a/packages/react/src/formElements/MdTextArea.tsx b/packages/react/src/formElements/MdTextArea.tsx
@@ -68,7 +68,6 @@ const MdTextArea: React.FunctionComponent<MdTextAreaProps> = ({
       {helpText && helpText !== '' && (
         <div className={`md-textarea__help-text ${helpOpen ? 'md-textarea__help-text--open' : ''}`}>
           <MdHelpText
-            role="region"
             id={`md-textarea_help-text_${textAreaId}`}
             aria-labelledby={helpText && helpText !== '' ? `md-textarea_help-button_${textAreaId}` : undefined}
           >

diff --git a/stories/AccordionStories/AccordionItem.stories.tsx b/stories/AccordionStories/AccordionItem.stories.tsx
@@ -88,6 +88,17 @@ export default {
       },
       control: { type: 'boolean' },
     },
+    closeButtonText: {
+      type: { name: 'string' },
+      description: 'The text for the close button inside accordion content.',
+      table: {
+        defaultValue: { summary: 'null' },
+        type: {
+          summary: 'string',
+        },
+      },
+      control: { type: 'text' },
+    },
     rounded: {
       type: { name: 'boolean' },
       description: 'Add rounded corners to accordion item',