Page MenuHomePhabricator

[L] Build a select list base Vue component
Closed, ResolvedPublic

Description

We'll need a select list Vue component for media search filters. OOUI has a SelectWidget, but we're using the TabOptionWidget which is styled differently and is meant to appear alongside tab headers. We should review the OOUI code and determine the simplest approach for this use case.

The current filter looks like this:


Acceptance criteria:

  • The select list component matches the design for the media search filters (and therefore OOUI styles)
  • OOUI styles and accessibility features are recreated

COVID-19 Deployment Criteria

  • Can you roll back this change without lasting impact? - Yes
    1. A recovery plan is required as this will help identify our capacity for recovering from the failure
    2. THIS IS A KEY QUESTION, if you can’t answer it, you shouldn’t deploy
  • Is specialized knowledge required to support this change in production? If so, are there multiple people with this knowledge? - Not needed
  • Is there a way to increase confidence about the correctness of this change? Code review and manual testing locally; testing in production will happen with parent task
    1. Reviews (Design, Code, etc)
    2. Testing coverage (unit tests, integration tests)
    3. Manual testing (e.g. Beta, vagrant, docker)

Related Objects

Event Timeline

AnneT created this task.Jul 15 2020, 10:11 PM

The language team wrote one such component(Demo, Code). Feel free to refer/copy/adapt

AnneT added a comment.Jul 16 2020, 2:11 PM

Oh awesome, thanks @santhosh!

AnneT claimed this task.Jul 29 2020, 5:36 PM

Change 619881 had a related patch set uploaded (by Anne Tomasevich; owner: Anne Tomasevich):
[mediawiki/extensions/WikibaseMediaInfo@master] Add select list component

https://gerrit.wikimedia.org/r/619881

Change 619881 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Add select list component

https://gerrit.wikimedia.org/r/619881

CBogen reassigned this task from AnneT to Etonkovidova.Aug 27 2020, 4:11 PM
Etonkovidova closed this task as Resolved.Aug 29 2020, 12:24 AM

Closing as Resolved - however, might follow up on accessibility testing. Chrome Lighthouse Accessibility report marks the page as 86% passed. The complaints are about

Failing Elements
span#imageSize__textbox.wbmi-select__current-selection
span#mimeType__textbox.wbmi-select__current-selection

@Etonkovidova, can you make a ticket so we can follow up on those specific accessibility issues? Thanks!