Skip to content

Improve accessibility of slider setting #3091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
truongwp wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Improve accessibility of slider setting #3091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3a5246
Improve accessibility of slider setting
truongwp May 4, 2026
45ad186
Fix DeepSource errors
truongwp May 4, 2026
bee109d
Improve code
truongwp May 4, 2026
3e9d3f1
Fix PHPCS
truongwp May 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 27 additions & 66 deletions classes/views/styles/components/templates/slider.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
<?php if ( ! defined( 'ABSPATH' ) ) {
<?php
/**
* Slider style component template.
*
* @since 6.14
*
* @package Formidable
*
* @var string $component_attr HTML attribute string for the outer wrapper element.
* @var string $component_class CSS class string for the outer wrapper element.
* @var array $component Slider configuration data set by FrmSliderStyleComponent.
* @var string $field_name HTML name attribute string (e.g. 'name="frm_style_setting[post_content][font_size]"').
* @var string $field_value Raw field value including unit (e.g. '13px' or '10px 20px 10px 20px').
*/

if ( ! defined( 'ABSPATH' ) ) {
die( 'You are not allowed to call this page directly.' );
}

if ( $component['has-multiple-values'] ) : ?>
if ( ! empty( $component['has-multiple-values'] ) ) : ?>
<div class="<?php echo esc_attr( $component_class ); ?>" <?php echo esc_attr( $component_attr ); ?> >
<div class="frm-slider-component frm-has-multiple-values frm-group-sliders" data-display-sliders="top,bottom" data-type="vertical" data-max-value="<?php echo (int) $component['max_value']; ?>">
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-top-bottom' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['vertical']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['vertical']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add an accessible name to each range input.

These sliders are now native controls, but they still render without a label. Screen readers will announce an unnamed slider here because only the sibling text input/select has aria-label.

Representative fix 
-<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['vertical']['value'] ); ?>" />
+<input
+	aria-label="<?php esc_attr_e( 'Vertical value', 'formidable' ); ?>"
+	type="range"
+	class="frm-slider"
+	min="0"
+	max="<?php echo (int) $component['max_value']; ?>"
+	value="<?php echo esc_attr( $component['vertical']['value'] ); ?>"
+/>

Apply the same pattern to the other range inputs in this template.

Also applies to: 27-27, 43-43, 59-59, 75-75, 91-91, 114-114, 133-133, 154-154

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@classes/views/styles/components/templates/slider.php` at line 11, The range
inputs (class "frm-slider") lack accessible names — add an aria-label (or
aria-labelledby) to each range input using the same pattern/value used by the
sibling text input/select in this template so screen readers announce the
slider; update the input element with the aria attribute for every occurrence of
the range (the ones currently rendered with class "frm-slider" at the listed
positions) to use the same escaped label value used by the sibling control.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Vertical value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['vertical']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -30,13 +39,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-top' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['top']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['top']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Top value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['top']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -52,13 +55,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-bottom' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['bottom']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['bottom']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Bottom value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['bottom']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -74,13 +71,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-left-right' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['horizontal']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['horizontal']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Horizontal value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['horizontal']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -96,13 +87,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-left' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['left']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['left']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Left value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['left']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -118,13 +103,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-right' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $component['right']['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['right']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Right value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['right']['value'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -147,13 +126,7 @@
<?php if ( ! empty( $component['icon'] ) ) : ?>
<?php FrmAppHelper::icon_by_class( $component['icon'] ); ?>
<?php endif; ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $field_value; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['value_label'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['value_label'] ); ?>" />
Copy link
Copy Markdown

@deepsource-io deepsource-io Bot May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable $component might not be defined


A variable has been used but not defined, which may result in warnings during program execution. This can also cause bugs since the intended usage scope of the variable is not known.

Expand All @@ -172,13 +145,7 @@
<div class="frm-flex-justify">
<div class="frm-slider-container">
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-top-bottom' ); ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $field_value; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo esc_attr( $component['value_label'] ); ?>" />
</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" value="<?php echo esc_attr( $component['value_label'] ); ?>" />
Expand All @@ -199,13 +166,7 @@
<?php if ( ! empty( $component['icon'] ) ) : ?>
<?php FrmAppHelper::icon_by_class( 'frmfont frm-margin-' . $field['type'] ); ?>
<?php endif; ?>
<span class="frm-slider" tabindex="0">
<span class="frm-slider-active-track">
<span class="frm-slider-bullet">
<span class="frm-slider-value-label"><?php echo (int) $field['value']; ?></span>
</span>
</span>
</span>
<input type="range" class="frm-slider" min="0" max="<?php echo (int) $component['max_value']; ?>" value="<?php echo ! empty( $component['unit_measurement'] ) ? (int) $field['value'] : esc_attr( $field['value'] ); ?>" />
</div>
<div class="frm-slider-value">
<input aria-label="<?php esc_attr_e( 'Field value', 'formidable' ); ?>" type="text" value="<?php echo ! empty( $component['unit_measurement'] ) ? (int) $field['value'] : esc_attr( $field['value'] ); ?>" />
Expand All @@ -223,4 +184,4 @@
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php endif; ?>
Loading
Loading