Details

    • Epic Link:
    • Rice Module:
      KRAD
    • KRAD Feature Area:
      UIF Component
    • Application Requirement:
      KS
    • Sprint:
      2.5.0-m1 Sprint 2, 2.5.0-m1 Sprint 3
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required

      Description

      KNS functional equivalence item. Ability to display hierarchy or grouping within dropdown (select).

        Attachments

          Issue Links

            Activity

            Hide
            bsmith Brian Smith (Inactive) added a comment -

            Tags already built into html optgroup give us a way to separate by category already... doing anything beyond this adds accessibility issues we have to be careful with, however:

            Bootstrap has the dropdown menu we are using, could be manipulated to be a control with some effort (accessibility issues also)

            Someone has made a plugin that works within bootstrap that does what we want essentially (looks nice, we would have to make it accessible somehow)
            http://silviomoreto.github.io/bootstrap-select/

            Accessibility read:
            http://www.456bereastreet.com/archive/201111/an_accessible_keyboard_friendly_custom_select_menu/

            It looks like we either need to use standard tags or apply aria roles manually to achieve accessiblity using listbox and option roles among others, with aria-selected attribute see:
            http://oaa-accessibility.org/examples/role/82/

            See for a good custom dropdown implementation (not what we want to use but what we need achieve):
            http://dojotoolkit.org/reference-guide/1.9/dijit/form/Select.html#dijit-form-select

            Show
            bsmith Brian Smith (Inactive) added a comment - Tags already built into html optgroup give us a way to separate by category already... doing anything beyond this adds accessibility issues we have to be careful with, however: Bootstrap has the dropdown menu we are using, could be manipulated to be a control with some effort (accessibility issues also) Someone has made a plugin that works within bootstrap that does what we want essentially (looks nice, we would have to make it accessible somehow) http://silviomoreto.github.io/bootstrap-select/ Accessibility read: http://www.456bereastreet.com/archive/201111/an_accessible_keyboard_friendly_custom_select_menu/ It looks like we either need to use standard tags or apply aria roles manually to achieve accessiblity using listbox and option roles among others, with aria-selected attribute see: http://oaa-accessibility.org/examples/role/82/ See for a good custom dropdown implementation (not what we want to use but what we need achieve): http://dojotoolkit.org/reference-guide/1.9/dijit/form/Select.html#dijit-form-select
            Hide
            bsmith Brian Smith (Inactive) added a comment - - edited

            All things considered this is the one we should go with for maximum support (if customizing the dropdown style is needed):
            http://wiki.jqueryui.com/w/page/12138056/Selectmenu

            Show
            bsmith Brian Smith (Inactive) added a comment - - edited All things considered this is the one we should go with for maximum support (if customizing the dropdown style is needed): http://wiki.jqueryui.com/w/page/12138056/Selectmenu
            Hide
            bsmith Brian Smith (Inactive) added a comment -

            Current recommendation is to use Bootstrap select plugin but use the jquery ui dropdown as a guide to modify it to meet accessibility standards

            Show
            bsmith Brian Smith (Inactive) added a comment - Current recommendation is to use Bootstrap select plugin but use the jquery ui dropdown as a guide to modify it to meet accessibility standards
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Decision from UXI group was to just implement the html optgroup option from dropdowns. Note optgroup has a disabled option as well we should support. Not sure about multi-select support?

            Show
            jkneal Jerry Neal (Inactive) added a comment - Decision from UXI group was to just implement the html optgroup option from dropdowns. Note optgroup has a disabled option as well we should support. Not sure about multi-select support?
            Hide
            bsmith Brian Smith (Inactive) added a comment -

            Verified that its supported the same way in the multi-select scenario so we should support both

            Show
            bsmith Brian Smith (Inactive) added a comment - Verified that its supported the same way in the multi-select scenario so we should support both
            Hide
            jheckel Jeff Heckel (Inactive) added a comment -

            Added support of HTML optgroup. Sample config:

            <bean parent="Uif-DropdownControl" p:multiple="true">
            <property name="options">
            <list>
            <bean parent="Uif-OptionGroupLabel" p:label="American"/>
            <bean parent="Uif-KeyLabelPair" p:key="a1" p:value="Ford"/>
            <bean parent="Uif-KeyLabelPair" p:key="a2" p:value="Chevy"/>
            <bean parent="Uif-KeyLabelPair" p:key="a3" p:value="Buick"/>
            <bean parent="Uif-OptionGroupLabel" p:label="Japan"/>
            <bean parent="Uif-KeyLabelPair" p:key="j1" p:value="Toyota"/>
            <bean parent="Uif-KeyLabelPair" p:key="j2" p:value="Honda"/>
            </list>
            </property>
            </bean>

            Show
            jheckel Jeff Heckel (Inactive) added a comment - Added support of HTML optgroup. Sample config: <bean parent="Uif-DropdownControl" p:multiple="true"> <property name="options"> <list> <bean parent="Uif-OptionGroupLabel" p:label="American"/> <bean parent="Uif-KeyLabelPair" p:key="a1" p:value="Ford"/> <bean parent="Uif-KeyLabelPair" p:key="a2" p:value="Chevy"/> <bean parent="Uif-KeyLabelPair" p:key="a3" p:value="Buick"/> <bean parent="Uif-OptionGroupLabel" p:label="Japan"/> <bean parent="Uif-KeyLabelPair" p:key="j1" p:value="Toyota"/> <bean parent="Uif-KeyLabelPair" p:key="j2" p:value="Honda"/> </list> </property> </bean>
            Hide
            jkneal Jerry Neal (Inactive) added a comment -

            Another Bootstrap plugin that looks a little better (in case we come back to this):

            http://davidstutz.github.io/bootstrap-multiselect/

            Show
            jkneal Jerry Neal (Inactive) added a comment - Another Bootstrap plugin that looks a little better (in case we come back to this): http://davidstutz.github.io/bootstrap-multiselect/

              People

              • Assignee:
                jheckel Jeff Heckel (Inactive)
                Reporter:
                wwashington William Washington (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 1 week
                  1w
                  Remaining:
                  Time Spent - 1 day Remaining Estimate - 4 days
                  4d
                  Logged:
                  Time Spent - 1 day Remaining Estimate - 4 days
                  1d