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

feat(ui5-slider, ui5-range-slider): add input as a tooltip #9547

Merged
merged 57 commits into from
Oct 14, 2024

Conversation

ndeshev
Copy link
Contributor

@ndeshev ndeshev commented Jul 23, 2024

Implement editable tooltips in ui5-slider and ui5-range-slider

packages/main/src/RangeSlider.hbs Outdated Show resolved Hide resolved
packages/main/src/themes/SliderBase.css Outdated Show resolved Hide resolved
packages/main/src/SliderBase.ts Outdated Show resolved Hide resolved
packages/main/src/SliderBase.ts Outdated Show resolved Hide resolved
packages/main/src/RangeSlider.ts Outdated Show resolved Hide resolved
@ndeshev ndeshev marked this pull request as ready for review August 19, 2024 06:47
@MapTo0
Copy link
Member

MapTo0 commented Aug 19, 2024

F2: should toggle focus to the handle to the input and back, now it traps in the input field
Live-change of the value in the input (e.g. by arrows) should not move the handle. Handle should be adjusted on change event (enter, focus out)
Tabbing goes to the tooltip when the tooltip is an input
Invalid values should trigger value state
Focus out when having invalid valud and focus in again => the tooltip has an empty value, should be the last valid one.
Something is wrong with the positioning of the handle itself, not its container, maybe remove left style?

@ndeshev
Copy link
Contributor Author

ndeshev commented Aug 20, 2024

We should discuss the arrow up/down behavior - ui5-input throws a change event in that case

remove the slider's accessible name from the tooltip input
and othe minor improvements acc improvements
@ndeshev
Copy link
Contributor Author

ndeshev commented Sep 26, 2024

Visually the input tooltip does not look like the one in UI5. The difference is even bigger in fiori_3 theme, where the input looks very strange. Screenshot 2024-09-13 at 18 39 54 Screenshot 2024-09-13 at 18 40 10

Tooltip inputs in UI5 are not following Fiori Visual Specifications

Copy link
Member

@MapTo0 MapTo0 left a comment

Choose a reason for hiding this comment

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

Issues found during testing:

  • Focus tooltip with value 2
  • Change it to 12 hit Enter
  • Arrow Up + Enter
  • Arrow Down + Enter
  • Arrow down + Enter

Issue: Tooltip value is 11 but the slider valu is 12 for on of the tooltips

@ndeshev ndeshev requested a review from MapTo0 October 1, 2024 06:54
@Okiana
Copy link
Contributor

Okiana commented Oct 8, 2024

Hi,

Please update the documentation to fullfill the Acceptance Criteria of the BLI.

add documentation to the new property
@ndeshev ndeshev dismissed elenastoyanovaa’s stale review October 14, 2024 10:17

Correction are applied

@ndeshev ndeshev merged commit 6a4dedf into main Oct 14, 2024
10 checks passed
@MapTo0 MapTo0 deleted the slider-input-tooltip branch October 14, 2024 10:19
@elenastoyanovaa
Copy link
Contributor

@ndeshev ,

Slider:

  • Open test page
  • Open any ACC validator. Run a test. Check complains:
  1. Slider with inputs. The element with role=slider (the handle) lacks accessible name (does not have a label, you have put everything in describedby). Please check the aria implementation of the Slider in UI5. There is a ui5-slider-sliderDesc element on each slider which is not used anywhere. (it should be)
  2. Slider with inputs. The element with role=slider has an aria-describedby reference to ui5-slider-accName, which is not existing. Here you have 2 problems - this should not be a description, but a label and secondly - this element should be linked to the handle only when an accessibleName/accessibleNameRef is provided to the slider.

RangeSlider

  • Open test page
  • aria-keyshortcuts missing
  • description for F2 missing

ndeshev added a commit that referenced this pull request Oct 16, 2024
fix accessibility related attributes for slider and range slider
related to: #9547
@ndeshev ndeshev restored the slider-input-tooltip branch October 17, 2024 10:37
ndeshev added a commit that referenced this pull request Oct 17, 2024
* fix(ui5-slider, ui5-range-slider): adjust aria-attributes

fix accessibility related attributes for slider and range slider
related to: #9547
@nnaydenow nnaydenow deleted the slider-input-tooltip branch October 24, 2024 19:58
kgogov pushed a commit that referenced this pull request Oct 30, 2024
* feat(ui5-slider, ui5-range-slider): add input as a tooltip

implement editable tooltip feature
kgogov pushed a commit that referenced this pull request Oct 30, 2024
* fix(ui5-slider, ui5-range-slider): adjust aria-attributes

fix accessibility related attributes for slider and range slider
related to: #9547
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants