classlinkinc / angular-material-time-picker

Material design time picker for 12 and 24 hour time.
MIT License
49 stars 30 forks source link

Tabindex #34

Open sajera opened 6 years ago

sajera commented 6 years ago

.md-up-arrow / .md-down-arrow span with tabindex... please define default styles. missing "tab" click disturbed the users brain =)

My use case in less

.time-picker { // button icon .md-icon-button { .material-icons { top: 3px; } &:focus,&:active,&:hover,&.md-focused { background-color: rgba(158,158,158,0.2); } } // arrows .md-up-arrow, .md-down-arrow { &:focus,&:active { color: #000; } } }

lrmcbr commented 5 years ago

Same problem here. It is missing the tab index, wich cannot be set by CSS, only HTML

mringler commented 5 years ago

Had the same issue, fixed it in the js file. Just add tabindex="-1" to the arrow elements in line 82 and 83:

          '<span class="md-up-arrow" aria-hidden="true" ng-click="!readOnly && increase()" tabindex="-1"></span>' +
          '<span class="md-down-arrow" aria-hidden="true" ng-click="!readOnly && decrease()" tabindex="-1"></span>' +

Fixing libraries is not ideal, but neither is waiting for a new version that might never come.

Andreasbaaserud commented 5 years ago

We are looking for someone that has time to maintain the project :)

On 1 Aug 2019, at 13:45, mringler notifications@github.com wrote:

Had the same issue, fixed it in the js file. Just add tabindex="-1" to the arrow elements in line 82 and 83:

      '<span class="md-up-arrow" aria-hidden="true" ng-click="!readOnly && increase()" tabindex="-1"></span>' +
      '<span class="md-down-arrow" aria-hidden="true" ng-click="!readOnly && decrease()" tabindex="-1"></span>' +

Fixing libraries is not ideal, but neither is waiting for a new version that might never come.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.