Style ecr-library sort

[lina-roth]

PULL REQUEST

Summary

• Remove outline on arrow
• Remove highlight color
• Move arrows to the far right ( sometimes appears as if not at the end because of the changing width of the rckms rule summary column)

Related Issue

Fixes #2860

Acceptance Criteria

• Move sort arrows to the far right of the columns
• The default sort is that the table is sorted by Received Date, with the most recent eCRs at the top. The arrow next to Received Date should be pointing up by default always to indicate this sort, but the column should not be highlighted blue until somebody clicks the arrow again. Received date is already the default sort, just turn off highlighting
• Change highlighted column color to #DFE1E2. Check with design
• Fix outline around SortButton when clicked to be a more proper size

Checklist

• If this code affects the other scrum team, have they been notified? (In Slack, as reviewers, etc.)

[ashton-skylight]

Reviewed! Lina and I chatted about moving the filtering arrow to the far right for received date and encounter date. As the ticket calls out, due to the dynamic nature of the RCKMS summary, we had two options: (1) remove the responsive columns from RCKMS or (2) push the filtering arrows to the far right. We chose to keep the responsive columns in favor of user readability for the RCKMS summary.

[mcmcgrath13]

Removing the highlight on the arrows is an accessibility issue. If you keyboard navigate through the viewer there is now no visual indication you are on a sort button that is interactive (Just kinda goes into the void until you end up on the names in the list)

[mcmcgrath13]

I think you can get the no outline for pointer users, but still outline with keyboard navigators by re-adding the styles with the :focus-visible selector

button:focus-visible {
  outline: 5px auto -webkit-focus-ring-color;
}

[ashton-skylight]

@mcmcgrath13 @lina-roth Great callout, thank you, Mary! Looking at the component now. The default state of the table with sorting does not highlight the column. If we keep that as the default state that should work, and then if the user clicks on the column, the header could change to base-lighter, #A9AEB1.

[mcmcgrath13]

when encounter date is sorted, the arrow on patient name is cut off

[lina-roth]

@mcmcgrath13 arrow isnt cutoff for me when sorting by encounter date

[mcmcgrath13]

@lina-roth I think the difference has to do with what the rem is set to. I use a smaller font than standard (14), so I think that's what's causing the difference. We should probably account for that. I don't see the icon cut off on the main branch.

[mcmcgrath13]

since these are fit to an icon that is sized in px - we should probably use px here instead of rem. Inspector says the icons are 24x24

[lina-roth]

done

[mcmcgrath13]

LGTM (assuming acceptance of 12px change)

thank you!!