PxTools · KentMossback · Apr 22, 2026 · Apr 22, 2026 · Apr 22, 2026 · Apr 22, 2026
@@ -79,6 +79,10 @@
   position: absolute;
 }
 
+.visualOnlyButton {
+  pointer-events: none;
+}
+
 // --------------------------------------------------------
 // --- CSS classes for the Variabelbox Select component ---
 // --------------------------------------------------------
@@ -130,16 +134,17 @@
   justify-content: center;
   align-items: flex-start;
   gap: var(--px-border_width-default);
-  flex: 1 0 0;
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .optionLayoutVariablebox {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
+  display: block;
+  width: 100%;
   align-self: stretch;
   overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .modalRadioList {

@@ -51,6 +51,8 @@ function closeModal() {
   console.log('Close modal');
 }
 
+const changeCategory = 'Change category';
+
 export const Default = {
   args: {
     variant: 'default',
@@ -59,6 +61,7 @@ export const Default = {
     hideLabel: false,
     options: options,
     placeholder: placeholder,
+    changeCategory: changeCategory,
     onChange: selectedOptionChanged,
   },
 };
@@ -85,6 +88,7 @@ export const Variant: StoryFn<typeof Select> = () => {
         onChange={selectedOptionChanged}
         addModal={addModal}
         removeModal={closeModal}
+        changeCategory={changeCategory}
       ></Select>
     </>
   );
@@ -147,6 +151,7 @@ export const SelectedOption: StoryFn<typeof Select> = () => {
         options={options}
         placeholder={placeholder}
         onChange={selectedOptionChanged}
+        changeCategory={changeCategory}
       ></Select>
       <h3>Selected option = Option 2:</h3>
       <Select
@@ -156,6 +161,7 @@ export const SelectedOption: StoryFn<typeof Select> = () => {
         placeholder={placeholder}
         selectedOption={options[1]}
         onChange={selectedOptionChanged}
+        changeCategory={changeCategory}
       ></Select>
     </>
   );
@@ -182,6 +188,7 @@ export const WithVeryLongOptionText: StoryFn<typeof Select> = () => {
         placeholder={placeholder}
         selectedOption={options[2]}
         onChange={selectedOptionChanged}
+        changeCategory={changeCategory}
       ></Select>
     </>
   );
@@ -198,6 +205,8 @@ export const RTLLanguage: StoryFn<typeof Select> = () => {
 
   const rtlPlaceholder = 'اختر خيارًا';
 
+  const changeCategory = 'تغيير الفئة';
+
   return (
     <div style={{ width: '100%' }}>
       <h1>RTL Language Support</h1>
@@ -207,12 +216,12 @@ export const RTLLanguage: StoryFn<typeof Select> = () => {
         <Select
           label="التصنيف"
           variant="inVariableBox"
-          languageDirection="rtl"
           options={rtlOptions}
           placeholder={rtlPlaceholder}
           onChange={selectedOptionChanged}
           addModal={addModal}
           removeModal={closeModal}
+          changeCategory={changeCategory}
         />
       </div>
 
@@ -221,9 +230,9 @@ export const RTLLanguage: StoryFn<typeof Select> = () => {
         <Select
           label="التصنيف"
           variant="inVariableBox"
-          languageDirection="rtl"
           options={rtlOptions}
           placeholder={rtlPlaceholder}
+          changeCategory={changeCategory}
           selectedOption={rtlOptions[1]}
           onChange={selectedOptionChanged}
           addModal={addModal}

@@ -8,17 +8,17 @@ import BodyShort from '../Typography/BodyShort/BodyShort';
 import { Icon } from '../Icon/Icon';
 import Modal from '../Modal/Modal';
 import Radio from '../Radio/Radio';
-import { getIconDirection } from '../../util/util';
+import Button from '../Button/Button';
 
 export type SelectProps = {
   variant?: 'default' | 'inVariableBox';
   label: string;
-  languageDirection?: 'ltr' | 'rtl';
   modalHeading?: string;
   modalCancelLabel?: string;
   modalConfirmLabel?: string;
   hideLabel?: boolean;
   placeholder?: string;
+  changeCategory?: string;
   options: SelectOption[];
   selectedOption?: SelectOption;
   onChange: (selectedItem: SelectOption | undefined) => void;
@@ -32,12 +32,12 @@ export type SelectProps = {
 export function Select({
   variant = 'default',
   label,
-  languageDirection = 'ltr',
   modalHeading = '',
   modalCancelLabel = '',
   modalConfirmLabel = '',
   hideLabel = false,
   placeholder = '',
+  changeCategory = '',
   options: ops,
   selectedOption,
   onChange,
@@ -66,12 +66,12 @@ export function Select({
       {variant === 'inVariableBox' && (
         <VariableBoxSelect
           label={label}
-          languageDirection={languageDirection}
           modalHeading={modalHeading}
           modalCancelLabel={modalCancelLabel}
           modalConfirmLabel={modalConfirmLabel}
           options={ops}
           placeholder={placeholder}
+          changeCategory={changeCategory}
           selectedOption={selectedOption}
           onChange={onChange}
           tabIndex={tabIndex}
@@ -194,19 +194,19 @@ type VariableBoxSelectProps = Pick<
   | 'className'
   | 'codeListLabelId'
 > & {
-  languageDirection: 'ltr' | 'rtl';
   addModal: (id: string, onClose: () => void) => void;
   removeModal: (name: string) => void;
+  changeCategory?: string;
 };
 
 function VariableBoxSelect({
   label,
-  languageDirection,
   modalHeading,
   modalCancelLabel,
   modalConfirmLabel,
   options,
   placeholder,
+  changeCategory,
   selectedOption,
   onChange,
   tabIndex,
@@ -223,6 +223,13 @@ function VariableBoxSelect({
   );
 
   const selectedItem: SelectOption | undefined = selectedOption;
+  const triggerAriaLabel = [
+    label,
+    selectedItem ? selectedItem.label : placeholder,
+    changeCategory,
+  ]
+    .filter(Boolean)
+    .join(', ');
 
   const handleOpenModal = () => {
     setIsModalOpen(true);
@@ -289,20 +296,14 @@ function VariableBoxSelect({
     }
   }, [removeModal, isModalOpen, addModal]);
 
-  // handle rtl for the icon
-  const chevronIcon = getIconDirection(
-    languageDirection,
-    'ChevronRight',
-    'ChevronLeft',
-  );
-
   return (
     <>
       <div
         className={cl(classes.selectVariabelbox) + cssClasses}
         tabIndex={tabIndex}
         role="button"
         aria-haspopup="dialog"
+        aria-label={triggerAriaLabel}
         ref={selectRef}
         onClick={(event) => {
           if (programmaticFocusRef.current) {
@@ -313,7 +314,7 @@ function VariableBoxSelect({
           handleOpenModal();
         }}
         onKeyUp={(event) => {
-          if (event.key === ' ') {
+          if (event.key === ' ' || event.key === 'Enter') {
             handleOpenModal();
           }
         }}
@@ -323,8 +324,8 @@ function VariableBoxSelect({
           }
         }}
       >
-        <div className={cl(classes.textWrapper)}>
-          <Label size="small" textcolor="default">
+        <div className={cl(classes.textWrapper)} aria-hidden="true" inert>
+          <Label as="span" size="small" textcolor="default">
             {label}
           </Label>
           <BodyShort
@@ -338,13 +339,16 @@ function VariableBoxSelect({
             {selectedItem ? selectedItem.label : placeholder}
           </BodyShort>
         </div>
-        <Icon
-          iconName={chevronIcon}
-          className={cl(
-            classes.iconColor,
-            languageDirection === 'rtl' ? classes.rtl : classes.ltr,
-          )}
-        ></Icon>
+        <Button
+          variant="primary"
+          size="small"
+          className={cl(classes.visualOnlyButton)}
+          tabIndex={-1}
+          aria-hidden="true"
+          inert
+        >
+          {changeCategory}
+        </Button>
       </div>
       <div className={cl(classes.divider)}></div>
       {isModalOpen && (

@@ -37,7 +37,6 @@ type VariableBoxContentProps = VariableBoxPropsToContent & {
   selectedValues: SelectedVBValues[];
   totalValues: number;
   totalChosenValues: number;
-  languageDirection: 'ltr' | 'rtl';
   onChangeCodeList: (selectedItem: SelectOption, varId: string) => void;
   onChangeCheckbox: (varId: string, value: string) => void;
   onChangeMixedCheckbox: (
@@ -57,7 +56,6 @@ type VirtualListItem = {
 export function VariableBoxContent({
   varId,
   label,
-  languageDirection,
   type,
   values,
   codeLists,
@@ -516,7 +514,6 @@ export function VariableBoxContent({
               label={t(
                 'presentation_page.side_menu.selection.variablebox.content.select.label',
               )}
-              languageDirection={languageDirection}
               modalHeading={label}
               modalCancelLabel={t(
                 'presentation_page.side_menu.selection.variablebox.content.select.modal.cancel_button',
@@ -527,6 +524,9 @@ export function VariableBoxContent({
               placeholder={t(
                 'presentation_page.side_menu.selection.variablebox.content.select.placeholder',
               )}
+              changeCategory={t(
+                'presentation_page.side_menu.selection.variablebox.content.select.change_category',
+              )}
               addModal={addModal}
               removeModal={removeModal}
               options={mappedAndSortedCodeLists}

@@ -97,8 +97,9 @@
           },
           "content": {
             "select": {
-              "label": "حدد التجميع",
+              "label": "حدد الفئة",
               "placeholder": "قم بالاختيار",
+              "change_category": "تغيير الفئة",
               "modal": {
                 "cancel_button": "يلغي",
                 "confirm_button": "يحفظ"

@@ -154,8 +154,9 @@
           },
           "content": {
             "select": {
-              "label": "Select grouping",
+              "label": "Select category",
               "placeholder": "Nothing selected",
+              "change_category": "Change",
               "modal": {
                 "cancel_button": "Cancel",
                 "confirm_button": "Save"

@@ -154,8 +154,9 @@
           },
           "content": {
             "select": {
-              "label": "Velg inndeling",
+              "label": "Velg kategori",
               "placeholder": "Ikke valgt",
+              "change_category": "Endre",
               "modal": {
                 "cancel_button": "Avbryt",
                 "confirm_button": "Bekreft"

@@ -154,8 +154,9 @@
           },
           "content": {
             "select": {
-              "label": "Välj indelning",
+              "label": "Välj kategori",
               "placeholder": "Inget valt",
+              "change_category": "Ändra",
               "modal": {
                 "cancel_button": "Avbryt",
                 "confirm_button": "Spara"

@@ -1,4 +1,4 @@
-interface Resources {
+export default interface Resources {
   translation: {
     common: {
       alert: {
@@ -282,7 +282,8 @@ interface Resources {
               mixed_checkbox: 'Select all';
               mixed_checkbox_search: 'Select all results';
               select: {
-                label: 'Select grouping';
+                change_category: 'Change';
+                label: 'Select category';
                 modal: {
                   cancel_button: 'Cancel';
                   confirm_button: 'Save';
@@ -384,5 +385,3 @@ interface Resources {
     };
   };
 }
-
-export default Resources;