nicolium: step slider value accessibility

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/ui/slider.tsx

@@ -8,6 +8,7 @@ interface ISlider {
   id?: string;
   'aria-labelledby'?: string;
   'aria-describedby'?: string;
+  'aria-valuetext'?: string;
   /** Value between 0 and 1. */
   value: number;
   /** Callback when the value changes. */
@@ -21,6 +22,7 @@ const Slider: React.FC<ISlider> = ({
   onChange,
   'aria-labelledby': ariaLabelledby,
   'aria-describedby': ariaDescribedby,
+  'aria-valuetext': ariaValueText,
 }) => {
   const node = useRef<HTMLDivElement>(null);
   const keyboardAnimationTimeout = useRef<number | null>(null);
@@ -161,6 +163,7 @@ const Slider: React.FC<ISlider> = ({
         aria-valuemin={0}
         aria-valuemax={1}
         aria-valuenow={value}
+        aria-valuetext={ariaValueText}
         aria-orientation='horizontal'
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}

packages/pl-fe/src/components/ui/step-slider.tsx

@@ -7,6 +7,7 @@ interface IStepSlider {
   id?: string;
   'aria-labelledby'?: string;
   'aria-describedby'?: string;
+  'aria-valuetext'?: string;
   /** Value between 0 and the amount of steps minus one. */
   value: number;
   /** Steps available in the slider. */
@@ -23,6 +24,7 @@ const StepSlider: React.FC<IStepSlider> = ({
   onChange,
   'aria-labelledby': ariaLabelledby,
   'aria-describedby': ariaDescribedby,
+  'aria-valuetext': ariaValueText,
 }) => {
   const node = useRef<HTMLDivElement>(null);
 
@@ -129,6 +131,7 @@ const StepSlider: React.FC<IStepSlider> = ({
         aria-valuemin={0}
         aria-valuemax={steps - 1}
         aria-valuenow={value}
+        aria-valuetext={ariaValueText}
         aria-orientation='horizontal'
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}

packages/pl-fe/src/features/preferences/index.tsx

@@ -128,6 +128,22 @@ const messages = defineMessages({
     defaultMessage: 'WYSIWYG',
   },
   brandColor: { id: 'preferences.options.brand_color', defaultMessage: 'Base color' },
+  interfaceSizeSmall: {
+    id: 'preferences.options.interface_size.sm',
+    defaultMessage: 'Small',
+  },
+  interfaceSizeMedium: {
+    id: 'preferences.options.interface_size.md',
+    defaultMessage: 'Medium',
+  },
+  interfaceSizeLarge: {
+    id: 'preferences.options.interface_size.lg',
+    defaultMessage: 'Large',
+  },
+  interfaceSizeExtraLarge: {
+    id: 'preferences.options.interface_size.xl',
+    defaultMessage: 'Extra large',
+  },
   dark: { id: 'theme_toggle.dark', defaultMessage: 'Dark' },
   black: { id: 'theme_toggle.black', defaultMessage: 'Black' },
 });
@@ -233,6 +249,21 @@ const Preferences = () => {
     [settings.locale],
   );
 
+  const interfaceSizeValueText = React.useMemo(() => {
+    const size = settings.theme?.interfaceSize ?? 'md';
+
+    switch (size) {
+      case 'sm':
+        return intl.formatMessage(messages.interfaceSizeSmall);
+      case 'lg':
+        return intl.formatMessage(messages.interfaceSizeLarge);
+      case 'xl':
+        return intl.formatMessage(messages.interfaceSizeExtraLarge);
+      default:
+        return intl.formatMessage(messages.interfaceSizeMedium);
+    }
+  }, [settings.theme?.interfaceSize, settings.locale]);
+
   const defaultContentTypeOptions = React.useMemo(() => {
     const postFormats = instance.pleroma.metadata.post_formats;
 
@@ -311,6 +342,7 @@ const Preferences = () => {
               value={INTERFACE_SIZES.indexOf(settings.theme?.interfaceSize ?? 'md')}
               steps={4}
               onChange={onInterfaceSizeChange}
+              aria-valuetext={interfaceSizeValueText}
             />
           </div>
         </ListItem>

packages/pl-fe/src/locales/en.json

@@ -1521,6 +1521,10 @@
   "preferences.options.content_type_mfm": "MFM",
   "preferences.options.content_type_plaintext": "Plain text",
   "preferences.options.content_type_wysiwyg": "WYSIWYG",
+  "preferences.options.interface_size.lg": "Large",
+  "preferences.options.interface_size.md": "Medium",
+  "preferences.options.interface_size.sm": "Small",
+  "preferences.options.interface_size.xl": "Extra large",
   "preferences.options.privacy_followers_only": "Followers-only",
   "preferences.options.privacy_public": "Public",
   "preferences.options.privacy_unlisted": "Unlisted",