Skip to content
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.

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

[EuiRange]: Add conditional aria-valuetext when ticks prop is passed #7675

Merged
merged 20 commits into from
Apr 16, 2024
Merged
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
b6085ce
Added aria-valuetext logic to EuiRangeSlider.
1Copenut Apr 10, 2024
aab49b5
Added accessibleLabel type to EuiRangeTick, logic to build aria-value…
1Copenut Apr 10, 2024
a8517c8
Adding aria-valuenow logic for EuiRange.
1Copenut Apr 11, 2024
da14962
Adding unit test logic for aria-valuenow and aria-valuetext.
1Copenut Apr 11, 2024
5cc66a5
Updated EuiRange ticks doc with accessibleLabel.
1Copenut Apr 10, 2024
7c155dc
Updated Tick marks docs to highlight accessibleLabel property.
1Copenut Apr 11, 2024
bd2275e
Linting error on target declaration.
1Copenut Apr 11, 2024
cb7bfe8
Added changelog for 7675.
1Copenut Apr 11, 2024
20d11d6
Removing aria-valuenow attribute because it is not needed for SR anno…
1Copenut Apr 12, 2024
8372187
Refactored handleAriaValueText into one ternary from two guard clauses.
1Copenut Apr 12, 2024
7a2b1ca
Refactoring ternary for better readability.
1Copenut Apr 12, 2024
1a1f48d
Refactored handleAriaValueText to allow string labels.
1Copenut Apr 15, 2024
5ef3d4e
Updated test logic to include label typeof string.
1Copenut Apr 15, 2024
b8439df
Updated docs to illustrate aria-valuetext with label typeof string.
1Copenut Apr 15, 2024
7b7a870
Update changelogs/upcoming/7675.md
1Copenut Apr 16, 2024
08c8aa3
Update src/components/form/range/range.tsx
1Copenut Apr 16, 2024
0ccc7a4
[PR feedback] tests
cee-chen Apr 16, 2024
fed091f
sorry Trevor!
cee-chen Apr 16, 2024
f3b701e
Update src-docs/src/views/range/range_example.js
1Copenut Apr 16, 2024
87ea5d5
Update src/components/form/range/range.tsx
1Copenut Apr 16, 2024
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
Prev Previous commit
Next Next commit
Updated EuiRange ticks doc with accessibleLabel.
1Copenut committed Apr 11, 2024

Verified

This commit was signed with the committer’s verified signature. The key has expired.
1Copenut Trevor Pierce
commit 5cc66a5443c48203b23e54c14cc57d01e4cd8983
10 changes: 5 additions & 5 deletions src-docs/src/views/range/levels.tsx
Original file line number Diff line number Diff line change
@@ -31,11 +31,11 @@ export default () => {
];

const customTicks = [
{ label: 'low', value: 0 },
{ label: 'intermediate', value: 15 },
{ label: 'moderate', value: 35 },
{ label: 'high', value: 65 },
{ label: 'severe', value: 85 },
{ label: 'low', value: 0, accessibleLabel: 'low' },
1Copenut marked this conversation as resolved.
Show resolved Hide resolved
{ label: 'intermediate', value: 15, accessibleLabel: 'intermediate' },
{ label: 'moderate', value: 35, accessibleLabel: 'moderate' },
{ label: 'high', value: 65, accessibleLabel: 'high' },
{ label: 'severe', value: 85, accessibleLabel: 'severe' },
];

const customColorsLevels = [
16 changes: 8 additions & 8 deletions src-docs/src/views/range/ticks.tsx
Original file line number Diff line number Diff line change
@@ -137,15 +137,15 @@ export default () => {
min={0}
max={84}
ticks={[
{ label: '1 GB', value: 0 },
{ label: '2GB', value: 14 },
{ label: '4GB', value: 28 },
{ label: '8GB', value: 42 },
{ label: '16GB', value: 56 },
{ label: '32GB', value: 70 },
{ label: '64GB', value: 84 },
{ label: '1 GB', value: 0, accessibleLabel: 'one gigabyte' },
{ label: '2GB', value: 14, accessibleLabel: 'two gigabytes' },
{ label: '4GB', value: 28, accessibleLabel: 'four gigabytes' },
{ label: '8GB', value: 42, accessibleLabel: 'eight gigabytes' },
{ label: '16GB', value: 56, accessibleLabel: 'sixteen gigabytes' },
{ label: '32GB', value: 70, accessibleLabel: 'thirty-two gigabytes' },
{ label: '64GB', value: 84, accessibleLabel: 'sixty-four gigabytes' },
Copy link
Contributor

Choose a reason for hiding this comment

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

😍 Now this is an example that makes sense to me! Huzzah!

]}
aria-label="An example of EuiDualRange with no linear intervals"
aria-label="An example of EuiRange with no linear intervals"
/>
</>
);