update css classes

digdir · Apr 15, 2024 · d31882a · d31882a
1 parent b551a4f
commit d31882a
Show file tree

Hide file tree

Showing 17 changed files with 29 additions and 77 deletions.
diff --git a/packages/css/utilities.css b/packages/css/utilities.css
@@ -2,7 +2,7 @@
   /**
  * Visually hide an element, but leave it available for screen readers
  */
-  .fds-utilities--visually-hidden {
+  .fds-sr-only {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -16,7 +16,7 @@
   /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-  .fds-utilities--focusable:focus-visible {
+  .fds-focus:focus-visible {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid

diff --git a/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx b/packages/react/src/components/Accordion/AccordionHeader/AccordionHeader.tsx
@@ -44,7 +44,7 @@ export const AccordionHeader = forwardRef<
     >
       <button
         type='button'
-        className={cl(classes.accordionButton, `fds-utilities--focusable`)}
+        className={cl(classes.accordionButton, `fds-focus`)}
         onClick={handleClick}
         aria-expanded={context.open}
         aria-controls={context.contentId}

diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx
@@ -56,7 +56,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
           type={type}
           className={cl(
             classes.button,
-            `fds-utilities--focusable`,
+            `fds-focus`,
             classes[size],
             classes[variant],
             classes[color],

diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
@@ -53,7 +53,7 @@ export const Card: OverridableComponent<CardProps, HTMLDivElement> = forwardRef(
           classes.card,
           classes[color],
           isLink && classes.linkCard,
-          isLink && `fds-utilities--focusable`,
+          isLink && `fds-focus`,
           className,
         )}
         {...rest}

diff --git a/packages/react/src/components/Chip/Removable/Removable.tsx b/packages/react/src/components/Chip/Removable/Removable.tsx
@@ -25,7 +25,7 @@ export const RemovableChip = forwardRef<HTMLButtonElement, RemovableChipProps>(
         ref={ref}
         className={cl(
           classes.chipButton,
-          `fds-utilities--focusable`,
+          `fds-focus`,
           classes[group?.size || size],
           classes.removable,
           className,

diff --git a/packages/react/src/components/Chip/Toggle/Toggle.tsx b/packages/react/src/components/Chip/Toggle/Toggle.tsx
@@ -45,7 +45,7 @@ export const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(
         aria-pressed={selected}
         className={cl(
           classes.chipButton,
-          `fds-utilities--focusable`,
+          `fds-focus`,
           classes[group?.size || size],
           { [classes.spacing]: shouldDisplayCheckmark },
           className,

diff --git a/packages/react/src/components/HelpText/HelpText.tsx b/packages/react/src/components/HelpText/HelpText.tsx
@@ -54,11 +54,7 @@ const HelpText = ({
           variant='tertiary'
         >
           <button
-            className={cl(
-              classes.helpTextButton,
-              `fds-utilities--focusable`,
-              className,
-            )}
+            className={cl(classes.helpTextButton, `fds-focus`, className)}
             aria-expanded={open}
             onClick={() => setOpen(!open)}
             {...rest}
@@ -77,7 +73,7 @@ const HelpText = ({
               className={cl(classes.helpTextIcon, classes[size], className)}
               openState={open}
             />
-            <span className={`fds-utilities--visually-hidden`}>{title}</span>
+            <span className={`fds-sr-only`}>{title}</span>
           </button>
         </Popover.Trigger>
         <Popover.Content className={classes.helpTextContent}>

diff --git a/packages/react/src/components/SkipLink/SkipLink.tsx b/packages/react/src/components/SkipLink/SkipLink.tsx
@@ -20,11 +20,7 @@ export const SkipLink = ({
   return (
     <a
       href={href}
-      className={cl(
-        `fds-utilities--visually-hidden`,
-        classes.skiplink,
-        className,
-      )}
+      className={cl(`fds-sr-only`, classes.skiplink, className)}
       {...rest}
     >
       {children}

diff --git a/packages/react/src/components/Table/TableHeaderCell.tsx b/packages/react/src/components/Table/TableHeaderCell.tsx
@@ -61,7 +61,7 @@ export const TableHeaderCell = React.forwardRef<
       >
         {sortable && (
           <button
-            className={`fds-utilities--focusable`}
+            className={`fds-focus`}
             onClick={onSortClick}
           >
             {children}

diff --git a/packages/react/src/components/form/CharacterCounter.tsx b/packages/react/src/components/form/CharacterCounter.tsx
@@ -41,7 +41,7 @@ export const CharacterCounter = ({
   return (
     <>
       <span
-        className={`fds-utilities--visually-hidden`}
+        className={`fds-sr-only`}
         id={id}
       >
         {srLabel}

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -25,11 +25,7 @@ export const ComboboxClearButton = () => {
   return (
     <button
       disabled={disabled}
-      className={cl(
-        classes.clearButton,
-        classes[size],
-        `fds-utilities--focusable`,
-      )}
+      className={cl(classes.clearButton, classes[size], `fds-focus`)}
       onClick={() => {
         if (readOnly) return;
         if (disabled) return;

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxLabel.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxLabel.tsx
@@ -29,10 +29,7 @@ export const ComboboxLabel = ({
         <Label
           size={size}
           htmlFor={formFieldProps.inputProps.id}
-          className={cl(
-            classes.label,
-            hideLabel && `fds-utilities--visually-hidden`,
-          )}
+          className={cl(classes.label, hideLabel && `fds-sr-only`)}
         >
           {readOnly && (
             <PadlockLockedFillIcon
@@ -50,10 +47,7 @@ export const ComboboxLabel = ({
         >
           <div
             id={formFieldProps.descriptionId}
-            className={cl(
-              classes.description,
-              hideLabel && `fds-utilities--visually-hidden`,
-            )}
+            className={cl(classes.description, hideLabel && `fds-sr-only`)}
           >
             {description}
           </div>

diff --git a/packages/react/src/components/form/Fieldset/Fieldset.tsx b/packages/react/src/components/form/Fieldset/Fieldset.tsx
@@ -74,7 +74,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               <span
                 className={cl(
                   classes.legendContent,
-                  hideLegend && `fds-utilities--visually-hidden`,
+                  hideLegend && `fds-sr-only`,
                 )}
               >
                 {readOnly && (
@@ -95,10 +95,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             >
               <div
                 id={descriptionId}
-                className={cl(
-                  classes.description,
-                  hideLegend && `fds-utilities--visually-hidden`,
-                )}
+                className={cl(classes.description, hideLegend && `fds-sr-only`)}
               >
                 {description}
               </div>

diff --git a/packages/react/src/components/form/NativeSelect/NativeSelect.tsx b/packages/react/src/components/form/NativeSelect/NativeSelect.tsx
@@ -75,10 +75,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
               weight='medium'
               size={size}
               htmlFor={selectProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && 'fds-utilities--visually-hidden',
-              )}
+              className={cl(classes.label, hideLabel && 'fds-sr-only')}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
@@ -97,7 +94,7 @@ export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
             className={cl(
               classes.select,
               classes[size],
-              `fds-utilities--focusable`,
+              `fds-focus`,
               props.multiple && classes.multiple,
               className,
             )}

diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx
@@ -121,10 +121,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               size={size}
               weight='medium'
               htmlFor={inputProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && 'fds-utilities--visually-hidden',
-              )}
+              className={cl(classes.label, hideLabel && 'fds-sr-only')}
             >
               <span>{label}</span>
             </Label>
@@ -145,7 +142,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
                 disabled={disabled}
                 className={cl(
                   classes.input,
-                  `fds-utilities--focusable`,
+                  `fds-focus`,
                   isSimple && classes.simple,
                   !isSimple && classes.withSearchButton,
                 )}
@@ -155,17 +152,12 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               />
               {showClearButton && (
                 <button
-                  className={cl(
-                    classes.clearButton,
-                    `fds-utilities--focusable`,
-                  )}
+                  className={cl(classes.clearButton, `fds-focus`)}
                   type='button'
                   onClick={handleClear}
                   disabled={disabled}
                 >
-                  <span className={`fds-utilities--visually-hidden`}>
-                    {clearButtonLabel}
-                  </span>
+                  <span className={`fds-sr-only`}>{clearButtonLabel}</span>
                   <XMarkIcon aria-hidden />
                 </button>
               )}

diff --git a/packages/react/src/components/form/Textarea/Textarea.tsx b/packages/react/src/components/form/Textarea/Textarea.tsx
@@ -91,10 +91,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               size={size}
               weight='medium'
               htmlFor={textareaProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && `fds-utilities--visually-hidden`,
-              )}
+              className={cl(classes.label, hideLabel && `fds-sr-only`)}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
@@ -112,21 +109,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             >
               <div
                 id={descriptionId}
-                className={cl(
-                  classes.description,
-                  hideLabel && `fds-utilities--visually-hidden`,
-                )}
+                className={cl(classes.description, hideLabel && `fds-sr-only`)}
               >
                 {description}
               </div>
             </Paragraph>
           )}
           <textarea
-            className={cl(
-              classes.textarea,
-              `fds-utilities--focusable`,
-              classes[size],
-            )}
+            className={cl(classes.textarea, `fds-focus`, classes[size])}
             ref={ref}
             aria-describedby={describedBy}
             {...omit(['size', 'error', 'errorId'], rest)}

diff --git a/packages/react/src/components/form/Textfield/Textfield.tsx b/packages/react/src/components/form/Textfield/Textfield.tsx
@@ -117,10 +117,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               size={size}
               weight='medium'
               htmlFor={inputProps.id}
-              className={cl(
-                classes.label,
-                hideLabel && `fds-utilities--visually-hidden`,
-              )}
+              className={cl(classes.label, hideLabel && `fds-sr-only`)}
             >
               {readOnly && (
                 <PadlockLockedFillIcon
@@ -138,10 +135,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
             >
               <div
                 id={descriptionId}
-                className={cl(
-                  classes.description,
-                  hideLabel && `fds-utilities--visually-hidden`,
-                )}
+                className={cl(classes.description, hideLabel && `fds-sr-only`)}
               >
                 {description}
               </div>
@@ -166,7 +160,7 @@ export const Textfield = forwardRef<HTMLInputElement, TextfieldProps>(
               className={cl(
                 classes.input,
                 classes[size],
-                `fds-utilities--focusable`,
+                `fds-focus`,
                 prefix && classes.inputPrefix,
                 suffix && classes.inputSuffix,
               )}