Uploaded image for project: 'Kuali Rice Development'
  1. Kuali Rice Development
  2. KULRICE-7086

Collapsable section headers need focus indicator

    Details

    • Epic Link:
    • Rice Module:
      KRAD
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required

      Description

      tabbing to section headers which are configured to be collapsable (disclosures), there is no indicator of focus.

      see section headers on: http://dev1.rice.kuali.org/portal.do?channelTitle=Uif%20Components%20(Kitchen%20Sink)&channelUrl=http://dev1.rice.kuali.org/kr-krad/uicomponents?viewId=UifCompView&methodToCall=start&readOnlyFields=field91

        Attachments

          Activity

          Hide
          thrclark Tom Clark added a comment -

          I can see two things that might be causing this:

          1. On the kitchen sink page, the <a> tag that triggers the header expand/collapse function doesn't containg the tabindex="" attribute.

          2. On some browsers, visual rendering of tab indexing doesn't seem to play well when header tags appear inside of the <a> tag. Kitchen sink currently renders this:

          <a>
          <h3><img src=expandicon.png> Header Title</h3>
          </a>

          Tab indexing seems to work better with this:

          <h3>
          <a><img src=expandicon.png> Header Title</a>
          </h3>

          Here's my test file:
          http://mypage.iu.edu/~thrclark/krad/tabbing-styles.html

          On a side note...in the kitchen sink, I've noticed that FF-OSX is rendering tab index visual styling only on form fields, and not links.

          Show
          thrclark Tom Clark added a comment - I can see two things that might be causing this: 1. On the kitchen sink page, the <a> tag that triggers the header expand/collapse function doesn't containg the tabindex="" attribute. 2. On some browsers, visual rendering of tab indexing doesn't seem to play well when header tags appear inside of the <a> tag. Kitchen sink currently renders this: <a> <h3><img src=expandicon.png> Header Title</h3> </a> Tab indexing seems to work better with this: <h3> <a><img src=expandicon.png> Header Title</a> </h3> Here's my test file: http://mypage.iu.edu/~thrclark/krad/tabbing-styles.html On a side note...in the kitchen sink, I've noticed that FF-OSX is rendering tab index visual styling only on form fields, and not links.
          Hide
          jcoltrin Jessica Coltrin (Inactive) added a comment -

          moving non-blocker and non-critical m4 Jiras to 2.2-backlog

          Show
          jcoltrin Jessica Coltrin (Inactive) added a comment - moving non-blocker and non-critical m4 Jiras to 2.2-backlog
          Hide
          thrclark Tom Clark added a comment -

          This seems to have been fixed with the upgrade to Bootstrap.

          Show
          thrclark Tom Clark added a comment - This seems to have been fixed with the upgrade to Bootstrap.

            People

            • Assignee:
              clrux Chris Rodriguez (Inactive)
              Reporter:
              wwashington William Washington (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: