Defect Hunting Sprint 94

[InnaAtanasova]

Please list all the issues you find during the defect hunting specifying the browser you used (in case it's browser specific)

[InnaAtanasova]

both issues needs to be investigated

• [ ] Grid List visual issues:
  • [ ] In active state the text should be changed to contract color

• [ ] In active state the focus outline should be white

[InnaAtanasova]

to be investigated

• [ ] Grid List in RTL - the status indicator gets rounded corners on all sides

[InnaAtanasova]

• [x] Grid List images issue on small screens. Expected behaviour: the image takes the width of the container - https://github.com/SAP/fundamental-styles/pull/3899

[InnaAtanasova]

• [ ] Quick View focus issues - https://github.com/SAP/fundamental-styles/pull/3896 and https://github.com/SAP/fundamental-ngx/pull/8753

1. Visually it looks broken (maybe needs some offset)
2. The focus should be kept inside the element (aka focus trap is missing) for the Popover example. It looks properly in the Dialog example.

[InnaAtanasova]

• [ ] Scrollbar - shouldn't scrollbar be controlled using the keyboard? - can you create a separate issue : https://github.com/SAP/fundamental-ngx/pull/8780

[InnaAtanasova]

• [ ] Quick View in Horizon:

To reproduce:

1. Click. on the Mobile, Phone or Email input
2. Close the popup
3. Mobile and Phone inputs are now white and the value is gone
4. For Email focus again the input, the value is gone now

[InnaAtanasova]

• [ ] Segmented button https://github.com/SAP/fundamental-ngx/issues/8558

[droshev]

• [x] Form Message (Horizon) with Input Group on Hover : https://github.com/SAP/fundamental-styles/pull/3908

• [x] documentation color issues in HC themes - some of the text is not visible : https://github.com/SAP/fundamental-ngx/pull/8779

• [ ] documentation - Fixed Card Layout example has native textarea (let's make it fd textarea)

• [x] Side Navigation with menu RTL - less padding : https://github.com/SAP/fundamental-styles/pull/3909

• [ ] Vertical Navigation in HCB Horizon Icon/link text color (normal and hover state) doesn't look right

• [ ] Wizard steps menu text color in HCB Horizon doesn't look right(or maybe it is the color for disabled steps), and the menu look behind the bottom line of the steps

[mikerodonnell89]

All tested in Firefox on mac

• [ ] Alert accessibility - this is more of a question - but do we think when an alert is thrown, should the focus move to the alert dismiss button, or a button in the alert content (assuming it has one or the other)? Currently, keyboard only users will need to tab through every other element on the page to get to the newly opened alert.

• [ ] Avatar group - Firefox. If I focus an avatar and press enter only once, the browser thinks I'm trying to make a phone call. This should simply open the details about the avatar I've clicked

• [ ] Avatar group, Firefox, horizon high contrast themes - number text is cutoff

• [ ] Avatar group, expanded overflow grid - in my opinion, up/down arrow keys should move rows (same as product switch or calendar) rather than to the next avatar

• [ ] Menu with icons, RTL, some icons positioned incorrectly (possibly fundamental-styles thing)

• [ ] Menu in mobile mode - top corners have border radius, bottom don't - most apparent in Horizon. I actually think this is something we need to talk about, "mobile" mode vs "fullscreen" mobile mode. I think "fullscreen" needs to have no border-radius and should be intended for only fullscreen mobile dialogs. And the current "mobile" mode should really be called "dialog" if it is not intended to occupy the whole screen (in which case it should have border-radius)

• [ ] Splitter, pagination example - no margin between these two buttons, most apparent in high contrast horizon modes.

• [ ] Our step inputs allow alphabetical character entry only to remove them on blur. ui5 doesn't allow them at all, which makes more sense to me. Our step input has a function dedicated to pulling out any non-numerical characters the user may enter - why not simply use type="number" for the input?

• [x] Table with focusable rows and cells - up/down arrow keys need a preventDefault to stop the page scrolling - https://github.com/SAP/fundamental-ngx/pull/8562

• [ ] Table popin mode - horizon themes - this extra little empty cell is visually hoverable/clickable

https://user-images.githubusercontent.com/2471874/184733884-a0784b63-6faf-44bd-bcef-b321efe6fe7f.mov

• [ ] Table in a card with activable rows, bad border radius. Fix should come from styles. I expect the fix would be similar to what is happening with the last item in lists in cards, but this will add a (small?) layer of complexity when dealing with activable cells rather than rows

• [ ] Flexible card layout, resizable card layout etc - After focusing the first list item when the list is in a card, the down arrow doesn't move through the list but instead moves to the next card. There is no way to click other list items via keyboard.

• [ ] On a similar note, in my opinion, cards shouldn't allow focus navigation via arrow keys due to the unpredictability of the layout. Only moving through the cards with the tab key makes more sense to me (again just my opinion, would be curious to hear thoughts from designers)

[g-cheishvili]

• [ ] Pagination resize listener is slow

[g-cheishvili]

• [ ] Relation between popover and sidebar does not seem right

[shrvr]

Inna: I don't think this can be fixed without a major refactoring. The calendar implementation is based on a table and in this specific case the 3 buttons (holding the year range) are placed in a

so not many options are available.

• [NA (to discuss)] Calendar Internationalization: selecting year range overflows.

[g-cheishvili]

• [x] Product switch list mode does not have wrap when navigating using keyboard. if you are focused on last element and click arrow down, it does not go anywhere https://github.com/SAP/fundamental-ngx/pull/8746

[g-cheishvili]

• [x] Vertical navigation - should not vertical navigation items navigable via arrow keys? Also when you click on "space" while focused on item, it will just scroll down, not "click" on it - @mikerodonnell89 https://github.com/SAP/fundamental-ngx/pull/8721

[g-cheishvili]

• [x] Wizard - Circled items are coming from other example - https://github.com/SAP/fundamental-ngx/pull/8696

[shrvr]

• [ ] Safari - Calendar: misalignment of current month highlighter in compact mode. https://github.com/SAP/fundamental-ngx/issues/8432

• [ ] Safari - Calendar: Tab down to the selected month and mouseover the next month. Tab focus and mouseover tile overlaps. https://github.com/SAP/fundamental-ngx/issues/8432

[shrvr]

• [x] Busy Indicator: Inline wrapper- Button not in full width. - https://github.com/SAP/fundamental-ngx/pull/8569

[shrvr]

• [ ] Notification: Top-left borders not visible.

• [ ] Basic Object Number: Negative number in RTL having minus sign at the end.

• [ ] Object Status: Shouldn't these inverted statuses retain their color for HC themes?

• [ ] Quick View in Popover in Safari: Phone and email cannot be focussed.

[N1XUS]

• [ ] Action Sheet mobile view Horizon HCB:

• [ ] Inline help Horizon HCB: Triangle border is lesser than bubble border

• [ ] Micro process flow Horizon HCB:

• [ ] Product switch Horizon HCB: Inner content jumps when state changes to selected

• [ ] Maybe not a bug: Status indicator in Horizon HCB has semantic colors support (green, amber, red). Process indicator with state does not support colors. I guess the logic should be harmonized

• [x] Raring indicator Horizon HCB: https://github.com/SAP/fundamental-ngx/pull/8779 Text is barely readable

• [x] Split button: https://github.com/SAP/fundamental-ngx/pull/8573 Documentation text goes beyond container width

• [ ] Toolbar: Items are not verticaly centered. Form controls are not harmonized in height

• [ ] Vertical navigation Horizon HCB: Icon is not visible during hover, and I think color is not correct?

[platon-rov]

• [ ] Safari outline issues, https://github.com/SAP/fundamental-styles/issues/3541

[platon-rov]

(Safari) Calendar

• [ ] Focus not per specs

• [ ] While on tabbing in normal mode we get currently selected day in focus, in mobile mode we don't get the same

• [ ] (enhancement, not a bug) after selecting first date in range other dates get hover styles if they're in range, but the same isn't happen when selecting with keyboard, it'd good to have it I think

https://user-images.githubusercontent.com/20265336/185613878-a1ccf74d-5725-44f2-9705-6dbe75571aae.mov

[platon-rov]

(Safari) Link

• [ ] Icon doesn't get proper color on focus

[platon-rov]

(Safari) List

• [ ] (not a bug maybe) When we're tabbing over list - only first item gets tab stop, next items accessible using arrows, but if we have any focusable elements inside of it - they get tab stops also. I see some inconsistency here, if we allow focusing by tab only the first item we probably should skip next items no matter what they contain.

https://user-images.githubusercontent.com/20265336/185616380-55b3a3a5-6fb4-4a60-a6a5-2cce1c2277fd.mov

[platon-rov]

(Safari) Menu

• [ ] Menu items not accessible/clickable with keyboard in mobile mode (dialog). https://github.com/SAP/fundamental-ngx/pull/8752

[platon-rov]

(Safari) Micro Process Flow

• [ ] Wrong focus outline styles

[platon-rov]

(Safari) Multi Input

• [x] No initial focus on dropdown open with click on dropdown button (in focus on screenshot), arrows don't work also for accessing the list items. Things are work okay if press enter on the multi-input field. https://github.com/SAP/fundamental-ngx/pull/8686

• [x] No initial focus after mobile dialog with options get opened. https://github.com/SAP/fundamental-ngx/pull/8686

• [ ] Focus get lost from the input field after removing all the items. https://github.com/SAP/fundamental-ngx/pull/8797

https://user-images.githubusercontent.com/20265336/185637754-38b931ee-e4b5-46b1-a989-6a98fe7c0480.mov

• [ ] Not clear why we have dropdown opener (focused on the screenshot) present at all, as we already in the dialog. Clicking on it makes dialog disappear.

[platon-rov]

(Safari) Tabs

• [ ] Focus outline not shown

• [ ] Wrong styles

• [ ] After selecting tab from overflow menu focus get lost.

[platon-rov]

(Safari) Text

• [ ] "More" has the same color as the text, user won't know that it's the link/button.

[platon-rov]

(Safari) Tile

• [ ] Wrong box-shadow radius

• [ ] HC themes, close button has incorrect styling

[platon-rov]

(Safari) Time

• [ ] No focus styling