fix(a11y): color preview fields have no aria label

Signed-off-by: Sami Mazouz <[email protected]>
flarum · Jul 19, 2022 · 8c9066d · 8c9066d
1 parent 6b577e6
commit 8c9066d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/...js/src/admin/components/AppearancePage.js → ...s/src/admin/components/AppearancePage.tsx b/...js/src/admin/components/AppearancePage.js → ...s/src/admin/components/AppearancePage.tsx
@@ -88,11 +88,13 @@ export default class AppearancePage extends AdminPage {
           type: 'color-preview',
           setting: 'theme_primary_color',
           placeholder: '#aaaaaa',
+          ariaLabel: app.translator.trans('core.admin.appearance.colors_primary_label'),
         })}
         {this.buildSettingComponent({
           type: 'color-preview',
           setting: 'theme_secondary_color',
           placeholder: '#aaaaaa',
+          ariaLabel: app.translator.trans('core.admin.appearance.colors_secondary_label'),
         })}
       </div>,
       70

diff --git a/framework/core/locale/core.yml b/framework/core/locale/core.yml
@@ -11,6 +11,8 @@ core:
     appearance:
       colored_header_label: Colored Header
       colors_heading: Colors
+      colors_primary_label: Primary Color
+      colors_secondary_label: Secondary Color
       colors_text: "Choose two colors to theme your forum with. The first will be used as a highlight color, while the second will be used to style background elements."
       custom_footer_heading: Custom Footer
       custom_footer_text: => core.ref.custom_footer_text